How to Delay Queries Until Access Token is Available in TanStack Query?
I’m using next-auth to store accessToken in the session. When I reload the page, useSession initially has a status of loading, and the accessToken becomes available after a short delay. During this time, queries made with useQuery (from TanStack Query) are sent with an empty accessToken, resulting in 401 Unauthorized errors from the backend.
What I’ve tried so far:
Adding enabled: !!accessToken to every useQuery. This works but was rejected by my team lead.
Setting a global queryFn in QueryClient. However, this would require removing all individual queryFn implementations, which isn’t feasible.
Using QueriesObserver for intercepting queries, but the logs didn’t provide actionable data for handling fetches.
Is there any way to delay queries globally until the accessToken is available? Or does TanStack Query have a beforeAction-like mechanism to manage this? Any advice would be appreciated!
What I’ve tried so far:
Adding enabled: !!accessToken to every useQuery. This works but was rejected by my team lead.
Setting a global queryFn in QueryClient. However, this would require removing all individual queryFn implementations, which isn’t feasible.
Using QueriesObserver for intercepting queries, but the logs didn’t provide actionable data for handling fetches.
Is there any way to delay queries globally until the accessToken is available? Or does TanStack Query have a beforeAction-like mechanism to manage this? Any advice would be appreciated!
