Configure SWR fetcher and axios global in react

Question

Here is my fetcher and my application is becoming too bulky that i wouldn't want to be calling it in evvery component, how do i configure the fetcher to be accessible everywhere in my application.

     const fetcher = (url) => axios.get(url).then((resp) => resp);

I also want to set a default baseURL for axios in my application so i wouldn't have to be using the full url everytime i'm trynna make a request, so i did

    axios.defaults.baseURL= "https://dog.ceo/api/breeds/image/random"

in my App.js, but it doesn't work.

Is there a better way to achieve these two problems using SWR?

`.then((resp) => resp);` ... what is the purpose of this null code — Jaromanda X, Jul 30 '22 at 13:21
this is a promise that resolves the data and also throws an error if there is any — Leyksnal, Jul 30 '22 at 14:47
For SWR global configuration see https://swr.vercel.app/docs/global-configuration. — juliomalves, Jul 31 '22 at 00:26

score 0 · Accepted Answer · answered Jul 30 '22 at 12:31

0

It's possible by creating new axios instance with whole config and then import it anywhere you want to make a call instead of importing axios package.

e.g.

in api.js

import { axios } from 'axios';

export const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
});

in any other file when you want to use it

import { axiosInstance } from 'path/api'

axiosInstance.get('/pathAfterBaseUrl')

answered Jul 30 '22 at 12:31

Szymon Pancerz

237
1
3

I did create new Axios instance and and my fetcher as well in a config file then I was able to import it and use it anywhere within my application, thanks that was really helpful. – Leyksnal Jul 31 '22 at 22:02

score 0 · Answer 2 · answered Aug 06 '22 at 16:16

Here is my solution.

In Api.js

const instance = axios.create({
  baseURL: 'https://your-api.com/v1',
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    authorization: "Bearer " + token,
  },
});
export default instance;

Then use it in swr's fetcher function

import instance from './Api.js';

const fetcher = async (key, params) => {
  const resp = await instance.get(`/route?id=${key}&param=${params}`).then(res => res.data);
  return resp;
};
const { data, error } = useSWR([key, params], fetcher);

Configure SWR fetcher and axios global in react

2 Answers2

Linked