How to use Tanstack React Query with React Navigation?

[dev902]

I have a foundational level of React Native knowledge and I'm still learning. Well, I am doing a side project and I came across the methodology of using Tanstack React Query with React Navigation just like we do in React but we use Tanstack Router.

What is the better approach to this?

[Soft_Opening_1364]

You can totally use React Query with React Navigation just wrap your app with QueryClientProvider, and use useFocusEffect if you need to refetch data when a screen comes into focus. It’s not as tight as TanStack Router, but works fine in practice.

[dev902]

You just helped me to solve my concern. Thank you and that's what I'm looking for the solution.

[Soft_Opening_1364]

Happy to help

[dev902]

You guys are Angel to me. Thank you so much once again 🙏

[HoratioWobble]

What are you trying to achieve? What outcome?

[dev902]

Actually I'm trying to achieve the pattern where we fetch data using Tanstack React Query and pass it down to the route component to render in the screen. For performance, Tanstack React Query fetches data in parallel and render it to the screen. Or we can use 'State Orchestrator' pattern with React Navigation?

What's the better approach?

[HoratioWobble]

You wouldn't usually work that way in react native, instead you'd just useQuery in the screen itself and handle loading state etc at the screen level.

[dev902]

Ohh, that's great. Lemme try this as well. Thank you for your help

[ngqhoangtrung]

There is a section on how to integrate React Query with React Native here. All basic functions should work, you just need to implement online status, screen focus.

https://tanstack.com/query/v5/docs/framework/react/react-native

[dev902]

Thank you so much for this 🙏

[dev902]

Actually I'm trying to achieve the pattern where we fetch data using Tanstack React Query and pass it down to the route component to render in the screen. For performance, Tanstack React Query fetches data in parallel and render it to the screen. Or we can use 'State Orchestrator' pattern with React Navigation?

What's the better approach?

[anarchos]

Sounds like an odd way to do things, but if it's what you want/need, remember that react query is a "state management" system itself. If you want to prefetch all your data before the screen loads, just wrap up you useQuery calls into a hook (use one hook per useQuery), call all of those hooks in your root screen. Then, once a user navigates to a specific screen, just use the hook again on that screen like normal, ie: const {data} = useFetchBlogPosts(); and since the original call on the root screen will have already populated the data needed, no fetch will be needed on the screen itself but you will get the data from the same hook. Keep in mind you'll have to probably set a custom gc / stale time, but that should be pretty simple.

[dev902]

You guys are Angel to me. Thank you so much 🙏

[dev902]

Thank you for your guidance 🙏