Would it be possible for Tanstack Query to set authentication headers similar to apollo client?

[olafur164]

Hi, I’ve been working with React Query and Apollo Client across several projects, but I’ve never really settled on a good strategy for setting the authorization header when using JWT tokens in React Query. I like how Apollo Client handles it with links, but since TanStack Query doesn’t provide anything similar (as far as I know), I’m wondering if there’s a way to achieve something like that without too much extra work.

The main issue I run into is when handling token refresh. If I rely on a custom function to fetch the auth token, multiple simultaneous queries can cause the token refresh logic to run multiple times at once, which isn’t ideal. This does not seem to happen with the auth link in apollo client.

[TkDodo]

React Query is not tied to data fetching - it only wants promises. So it also can’t help with anything that’s “Header” specific. This is something your API layer needs to handle.

[mohamadgarmabi]

TanStack Query is intentionally transport-agnostic, so the "link" equivalent lives in your fetch layer rather than in Query itself. The pattern that has worked best for me:

1. Read the token at request time inside a shared fetch wrapper (not in the queryKey, so it doesn't fragment your cache).
2. Pass signal from the queryFn context so cancellation works.
3. Throw on non-2xx so Query's error / retry behave correctly.
4. On 401, refresh once and share the promise, so parallel queries don't each trigger a refresh.

Disclosure: I maintain a small library built around exactly this, tanstack-fetch (not official TanStack). Auth works as an interceptor chain, which is close to Apollo links:

const api = createFetch({
  baseUrl: '/api',
  interceptors: [createAuthInterceptor({ getToken: () => accessToken })],
})
api.use('refresh-token', createRefreshTokenInterceptor({ refresh }))

useQuery({ queryKey: ['me'], queryFn: ({ signal }) => api.get('/me', { signal }) })

Recipe: https://mohamadgarmabi.github.io/tanstack-fetch/recipes/refresh-token

But the 4 points above apply whatever client you use.