Access context inside queryFn

[debater-coder]

Currently I am using @tanstack/react-query to fetch data from an authenticated API. I have a context accessible with a hook useAuth which contains information on whether the user is logged in, etc. Most importantly, it contains a function that refreshes a token. If a query is fetching, and it receives a REFRESH_TOKEN response, then the query calls refresh() inside the fetchFn and then tries to fetch again. To get the refresh currently I pass it down from the component. Now, I am trying to fetch this query from a React Router loader, using queryClient.fetchQuery() but the loader is not a component so I can't call the hook. I must get the function from the hook, as it is wrapped in a _.throttle() to prevent multiple queries causing repeated invocations of the request while it is in flight. How can I access this function inside the queryFn without manually passing it down?

[TkDodo]

Not sure I fully follow the use-case. If something is only available as a hook, like useAuth, and you want to access that in a react-router loader - you have to pass it in there. Though I am questioning the need of having a token refresh logic live inside react. As you said, you mostly need this outside of react (in the queryFn). Usually, the best place to do these kind of things is in your "network layer", like the fetch wrapper you're likely to have. There, you also don't have or need react.

[debater-coder]

I've refactored my app so that this information is available outside the context.