Getting status integrating react-query with react-router loaders
Hey, hope you're doing well.
I've faced an issue while using react-query with react-router loaders.
I've seen the example https://tanstack.com/query/v4/docs/examples/react/react-router.
The issue is we can't have the query 'status' where we're using useQuery & it's always in 'success' state.
Thanks in advance.
React Query React Router. Example | TanStack Query Docs
An example showing how to implement React Router. in React Query
6 Replies
conscious-sapphire•4y ago
The issue is we can't have the query 'status' where we're using useQuery & it's always in 'success' state.what's the issue?
conscious-sapphireOP•3y ago
what should I do if I wanted to have access to those states in my component/view?!
conscious-sapphire•3y ago
useQuery?
conscious-sapphireOP•3y ago
yes. I explained above. I'm integrating react-query with react-router loader. assume I'm in a page then I do change params in the same page. screen freezes until loader fetches the new data. but I want to show loading state in the page.
/random-page?q=foo -> /random-page?q=bar
this route fetches data in the loader & provides it to react-query. then I read the data using useQuery and render it. but I can't access states like isLoading. cause data is being fetched before re-render.
sorry for my poor English.
conscious-sapphire•3y ago
That's pretty much the point of fetching in the router. You don't need to check for loading states in the component anymore, because the router guarantees that data is fetched when you visit the route.
wise-white•3y ago
Bit late to the party, but… it may not be super clear from the example but with a root ‘layout’ route that renders an
<Outlet/> you could use a navigation.state === loading (from React Router's useNavigation) to show a global loading state while fetching happend in a loader.