T
TanStack•14mo ago
eastern-cyan

Is there a way to use interceptors in tanstack query ?

A few days ago i learn how to use interceptors.request/response with axios and know i am curious if tanstack i can do the same JUst a bit of code about how i do it: 
import axios, { AxiosError, AxiosInstance } from "axios"
    _axiosInstance = axios.create({
        baseURL: import.meta.env.VITE_API_URL,
        timeout: 5000
    })
_axiosInstance!.interceptors.request.use(
        async (config) => {
            if (config.url?.includes(import.meta.env.VITE_TOKEN_URL)) {
                config.headers.set(
                    "Refresh-Token",
                    // do smt
                )
            } else {
                config.headers.set(
                    "Access-Token",
                                // do smt
                )
            }

            return config
        },
        (error) => Promise.reject(error)
    )
import axios, { AxiosError, AxiosInstance } from "axios"
    _axiosInstance = axios.create({
        baseURL: import.meta.env.VITE_API_URL,
        timeout: 5000
    })
_axiosInstance!.interceptors.request.use(
        async (config) => {
            if (config.url?.includes(import.meta.env.VITE_TOKEN_URL)) {
                config.headers.set(
                    "Refresh-Token",
                    // do smt
                )
            } else {
                config.headers.set(
                    "Access-Token",
                                // do smt
                )
            }

            return config
        },
        (error) => Promise.reject(error)
    )
i am curios how can i do in tanstack the same
6 Replies
automatic-azure
automatic-azure•14mo ago
you can use axios with react-query ... it's not either/or
eastern-cyan
eastern-cyanOP•14mo ago
so i can create a wrapper in axios and then use it in react-query ? @TkDodo 🔮
harsh-harlequin
harsh-harlequin•14mo ago
Yes, I always do this.
eastern-cyan
eastern-cyanOP•14mo ago
roger roger danke @caproll. do you have a basic example ? and if u may want to share it will be a great example for me to understand it thx in advance
harsh-harlequin
harsh-harlequin•14mo ago
API function is in services folder React query hook is in hooks folder Axios setup is in config folder https://github.com/taufanp/mployee
eastern-cyan
eastern-cyanOP•14mo ago
danke

Did you find this page helpful?