react-nativereact-querytanstackreact-query

React-query isRefetching is triger loader in RefreshControl at first mount screen

In my react-native project, I use tanstack react-query: https://tanstack.com/query/latest/docs/framework/solid/reference/useQuery#isrefetching-boolean

Why is isRefetching executed if I don't call refetch()? And it shows the loader in for RefreshControl

react-native: 0.79

For example at root:

const queryClient = new QueryClient();

Inside the component:

const { data, isLoading, isRefreshing, refetch} = useQuery({queryKey: ['user'], queryFn: getUser});

return (
 <FlatList 
  data={data} 
  renderItem={renderItem} 
  keyExtractor={item => item.id} 
  refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={refetch} />}
 />
)

So I don't trigger a reload/pull to refresh, I just open the screen for the first time. And it always isRefreshing: true. When I go back and open the same screen again.

Solution

  • The docs are pretty clear on this:

    - isRefetching: boolean
  - Is true whenever a background refetch is in-flight, which does not include initial pending
  - Is the same as isFetching && !isPending

    So if you open the screen for the first time where you have no data in the cache (data returned form useQuery is undefined), this will be false.

    Then, whenever the queryFn is running while you have data, this flag will be true. This doesn’t have to be a manual call to refetch - it can also be because of an automatic background refetch, e.g. triggered by refetchOnMount.

    If you see a different behaviour, please provide a minimal reproduction.