Interceptors in combinatie with SWR

[kennethhaspeel]

I have been following your tutorials in creating a react app. The persistent login works perfectly. The axios interceptors do their job. But fetching data is still done in a useEffect() hook. It seems this is no longer the way to go. I'm switching to SWR and fetching data is very simple if no authentication is required.

But i'm having trouble implementing the axiosPrivate interceptors. Would you be so kind to give me a nudge in the right direction on how to use the interceptors in useAxiosPrivate in combinatie with SWR?

EDIT: maybe i should add how far i got:
const { data: missions, isLoading, error } = useSWR('GetMissions', async ()=>{const response = await axiosPrivate(axiosUrls('GetAllMissions')); return response.data}, { onSuccess(data, key, config) { console.log(data) } })

The axiosUrls is just a list of endpoints. This executes without react warnings but i'm getting the 401 Unauthorized response. On checking the request, it seems the accesstoken isn't added to the header.

Using useEffect (like in your User component), this is the request

When used in useSWR, this is the request