axios_client.js

import axios from 'axios'
import jsifyKeysDeep from 'jsify-case-keys-deep' // Like `camelcase-keys-deep` but also transforms suffix '?' with prefix `is`
import decamelizeKeysDeep from 'decamelize-keys-deep'
import Qs from 'qs'

export default (baseURL) => {
  const axiosClient = axios.create({
    baseURL,
    responseType: 'json',
  })

  axiosClient.interceptors.response.use(
    (response) => {
      // Reload if a new backend has been deployed but the user is still using an
      // old version of the React app
      const apiVersion = response.headers['x-api-version']
      const localVersion = global.window.REACT_API_RELEASE_VERSION
      if (localVersion !== apiVersion) global.location.reload()

      return jsifyKeysDeep(response)
    },
    (error) => {
      // Reload if unauthorized. After reload, Devise will kick in and redirect
      // to the login page.
      if (error.response && error.response.status === 401) global.location.reload()
      return Promise.reject(error)
    },
  )

  axiosClient.interceptors.request.use(
    config => (config.data instanceof global.FormData
      ? config
      : {
        ...config,
        data: decamelizeKeysDeep(config.data),
        params: decamelizeKeysDeep(config.params),
        paramsSerializer: params => Qs.stringify(params, {
          arrayFormat: 'brackets',
          encode: false,
        }),
      }),
    error => Promise.reject(error),
  )

  const csrfMetaTag = global.document.getElementsByName('csrf-token')[0]
  // csrf-token is not rendred in tests
  if (csrfMetaTag) {
    axiosClient.defaults.headers.common['X-CSRF-Token'] = csrfMetaTag.content
  }

  return axiosClient
}

For anyone that wants to get really in to rails/react note that this doesn't transform GET parameters on the URL string - only post/formdata.

I've had good luck pairing this (which works AWESOME BTW) with a parser for any get query string work.

export const queryString = (inputObj) => {
  return Qs.stringify(decamelizeKeysDeep(inputObj));
};

axiosClient.get(`search/?${queryString({ ...searchFilters, s: searchTerm })}

I am happy that this has been useful for someone! :)

I think that another way to achieve what you want to do would be:

axiosClient.get('search', params: { ...searchFilters, s: searchTerm })

And, then, Axios would take care of serializing the params for you.

Btw, we now use AxiosMiddleware with Redux. It is quite convenient.

https://gist.github.com/6temes/45c30c88d471d1c483dc1207b099e5a4

thank you, 🤦‍♂️ that's much cleaner, I totally missed the obvious answer!

I've been considering axios middleware with redux - thanks for the config integration on that, I'll check that out when I get around to moving that direction.