Example for axios

With axios it’s handy to “define requests” using a request object, for example like this:

import axios, { AxiosRequestConfig } from 'axios';

const request: AxiosRequestConfig = {
  baseURL: 'https://api.example.com',
  withCredentials: true,
  method: 'GET',
  url: '/search',
  params: {
    term: 'foobar',
  },
};

const response = await axios(request);
const data = response.data;

But from what I can gather, the key I can pass in to useSWR has to be a string? I can’t find any of your included examples that uses anything other than a simple string either. In the readme, there’s a short mention of using arrays, which can include both strings and objects, but it doesn’t mention what the fetcher would actually look like, and it also says the key comparison is shallow, so with my request object above here, I assume that means a change in request.params.term would not be picked up?

Would it be possible for someone to add an example of how one can use useSWR with axios and a request object like this? Or is it perhaps not possible to do that?

[o-alexandrov]

@Svish Thank you for the example. In case anyone interested, a typed version of this example:

import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios"
import useSWR, { ConfigInterface } from "swr"

export const useSWRAxios = <Data extends {}>(
  request: Omit<AxiosRequestConfig, "baseURL" | "method" | "data">,
  config?: ConfigInterface,
) => {
  const requestModified: AxiosRequestConfig = {
    ...request,
    method: `GET`,
  }
  const configModified: ConfigInterface = {
    ...config,
    // global customizations
  }
  /**
   * Axios has a wrapper object around data => filter response
   */
  const { data: response, ...responseUseSWR } = useSWR<
    AxiosResponse<Data>,
    AxiosError
  >(
    JSON.stringify(requestModified),
    async () => axios(requestModified),
    configModified,
  )
  const { data, ...responseAxios } = response || {}
  return { ...responseUseSWR, responseAxios, data }
}

[shuding]

When using an array as the key, SWR will pass those items as arguments to the fetcher function:

useSWR([A, B, C, ...], fetcher)
// calls fetcher(A, B, C, ...)

For your specific case, I’d do something like:

// global config because this part won't change
const getRequest: AxiosRequestConfig = {
  baseURL: 'https://api.example.com',
  withCredentials: true,
  method: 'GET'
};

function App () {
  // inside component
  const params = useMemo(() => ({ term }), [term])
  useSWR(
    ['/search', params],
    (url, params) => axios({ ...getRequest, url, params }).then(res => res.data)
  )
}

or simpler:

// global config because this part won't change
const getRequest: AxiosRequestConfig = {
  baseURL: 'https://api.example.com',
  withCredentials: true,
  method: 'GET'
};

const fetchTerm = (url, term) =>
  axios({ ...getRequest, url, params: { term } }).then(res => res.data)

function App () {
  // inside component
  useSWR(['/search', term], fetchTerm)
}

The major reason of shallow comparison is performance. So it will always render faster, and it will reuse the stale data if the same url + params pair has occurred before.

Thanks for the feedback! We will definitely improve the readme and create an example for axios.