Tanstack Query optimization for React Native

[mertafor]

I'm using TanStack Query with React Native and React Navigation. I have several screens such as Dashboard, Invoices and Invoice. What I do is launching the app, visit dashboard, then Invoices list and then a specific Invoice. Each page has their own api queries with useQuery. When I'm on the single Invoice screen, I put the app to background and then open the app again. Although I'm on a single invoice screen, I noticed that all queries placed in other screens I've visited (Dashboard and Invoices) also refetched on app active state. Depending on the number of screens, react query makes almost 10-12 queries at once to the API which is huge performance issue since these are unneccesary queries. What I want is that inactive screens should stay as stale until they're focused.

I found something called useFocusNotifyOnChangeProps in TanStack Query docs but didn't succeed. How can I prevent refetching all queries on inactive screens when app is focused?

[mertafor]

My bad, I've been using query invalidation method without noticing.