Is Tanstack Query nerfed in React Navigation? (and React Native in general)
Everyone online in React Native communities seems to love it and I wanna love it too, but I feel like I'm fighting it. And maybe I'm wrong, which is why I am asking, I have great love and respect for everyone working on this widely used library 
Example:
You have a tab navigator from react-navigation. Its screens stay forever mounted by default.
Doesn't work in react native.
Nope, since
Let's say the 2nd tab screen you have has an infinite scrolling list with some filters you can apply to sort it (different query keys).
You have to call
Maybe when you apply a filter you want to refetch only the first page. You have to do something like this and you'll end up repeating it:
Example:
You have a tab navigator from react-navigation. Its screens stay forever mounted by default.
staleTimeuseQueryuseInfiniteQuery"But there is refetchOnWindowFocus"
Doesn't work in react native.
will take care of it and you can set it per query, it will garbage collect the cache and data will refetch"*gcTime
Nope, since
gcTimeobserver=1Let's say the 2nd tab screen you have has an infinite scrolling list with some filters you can apply to sort it (different query keys).
You have to call
refetch()useFocusEffectMaybe when you apply a filter you want to refetch only the first page. You have to do something like this and you'll end up repeating it:
useFocusEffect(
React.useCallback(() => {
if (firstTimeRef.current) {
firstTimeRef.current = false
return
}
const state = queryClient.getQueryState(queryKey)
const isStale = state
? queryClient.getQueryCache().find({ queryKey })?.isStale()
: false
if (isStale) {
queryClient.refetchQueries({
queryKey,
type: 'active',
stale: true,
})
}
}, [queryClient, queryKey]),
)const trimInfiniteDataToFirstPage = (oldData) => {
if (!oldData?.pages || !oldData?.pageParams) return oldData;
return {
...oldData,
pages: oldData.pages.slice(0, 1),
pageParams: oldData.pageParams.slice(0, 1),
};
};
