There's a way to implement a token interceptor?

[veronesecoms]

Hi, i need to create a token interceptor, i look in documentation and don't find a way to provide this.

I need to add a bearer token in all requests except login, someone knows if is possible to make this in react-query?

[jrozbicki]

This has really nothing to do with react-query itself.

What you want to do is pass token to Authorization header.

If you use axios you could do this in every request like:

axios.get('http://someapi.com/api/todos', { headers: { Authorization: `Bearer ${token}`})

but this get's repetetive pretty quickly.

Better solution would be to set up wrapper with global instance of axios and pass token there, this would look more like this:

// request.js
import axios from 'axios';
import { getToken } from 'someUtilsFunctions'

// optionaly add base url
const client = axios.create({ baseURL: 'http://someapi.com/api' });

const request = ({ ...options }) => {
    client.defaults.headers.common.Authorization = `Bearer ${getToken()}`;

    const onSuccess = (response) => response;
    const onError = (error) => {
       // optionaly catch errors and add some additional logging here
       return error;
    }

    return client(options).then(onSuccess).catch(onError);
}

export default request;

then you could wrap request (maybe besides /login if you don't want token there):

const getTodos = () => request({
   url: '/todos',
});

Having this you can use react-query as usual:

const { data } = useQuery('todos', async () => {
    const response = await getTodos();
    return response;
})

[itsmelion]

😂 that's why i like Typescript and linters.

[inoumen]

BTW, here the error is just returning, but you need to throw the error, otherwise, React Query will not understand that the error occurred.

[itsmelion]

True.
That's why its better to use the onError() method on the query.
Its better because i think it even awaits for retries etc. before failing.

[leslie555]

To others who will use this code in 2023， pay attention that here is baseURL instead of baseUrl. 😂

https://axios-http.com/docs/instance

[jrozbicki]

@leslie555 Thanks! I've updated original answer 🎉

[petarivanovv9]

As an addition to @jrozbicki 's answer, we could do something very similar. For instance, we could check the status of the error and navigate to the login page in our app. Here is the code:

import axios from 'axios';

import { API_URL } from '../config';

const SESSION_EXPIRED_STATUS_CODE = 401;

const baseApiClient = axios.create({
    baseURL: API_URL,
});

const apiClient = ({ ...options }) => {
    const onSuccess = (response) => response;

    const onError = (error) => {
        if (error.response.status === SESSION_EXPIRED_STATUS_CODE) {
            // Navigate to Login screen
        }

        return Promise.reject(error);
    };

    return baseApiClient(options)
        .then(onSuccess)
        .catch(onError);
};

export default apiClient;

In this way, we could use them like:

export const getUser = async () => {
    const { data } = await apiClient({
        url: `/user`,
    });
    return data;
};

and optionally we could add a hook:

export const useUser = (config) =>
    useQuery(['user'], getUser, config);

Hope that I've helped!

[itsmelion]

Anyhow, i think RQuery having an interceptor would be great.
especially having hooks on it, add mutation to consume refresh_tokens..
and better yet: get the token expire time, and set it as the staleTime of the user/auth query.