blog/refreshing-an-authentication-in-token-in-tanstack-query

[giscus[bot]]

blog/refreshing-an-authentication-in-token-in-tanstack-query

Setup TanStack Query to automatically refresh the authentication token when it expires by running the refresh token flow on 400 responses

https://akhilaariyachandra.com/blog/refreshing-an-authentication-in-token-in-tanstack-query

[magrega]

Great article. I was looking for a way to avoid using Axios interceptors since it seems a bit cumbersome for my project. Thanks a lot!
I real killer would've been to have a repo with this example. I am curious how useTokens hook works.

[magrega]

I am sorry for a separate comment, seems like I can't edit my previous one.

I also wanted to ask why is QueryClient in useState?

[akhila-ariyachandra]

I real killer would've been to have a repo with this example. I am curious how useTokens hook works.

This was done on a private repo so I have no way of sharing it. useToken can be anything from reading a cookie with react-cookie to reading a token that has been passed into a context from a server component.

I also wanted to ask why is QueryClient in useState?

That comes from the TanStack Query documentation but the better way to initialize the QueryClient would be like this.

[magrega]

Cool, thanks! How do you retry failed queries after getting a new token?

[akhila-ariyachandra]

All query that have the token as part of the query key will refetch once the token changes. Or, you could call queryClient.invalidateQueries() to invalidate all active queries.