Infinite queries not updating after queryFn finished

[Laci556]

We're developing a React Native application, where we want to cache queries to be viewed offline. The queries are persisted nicely with createAsyncStoragePersister and are immediately available when the user opens the app. The problem is that when we navigate to a screen with an infinite query the cached data is displayed and the queryFn is called. If the data has changed since the user last fetched it I'd expect queryFn to overwrite the returned data, but that is not the case. I confirmed that queryFn ran and returned the correct data but the cache and data was not updated. (Neither in the app nor in the devtools)

My query looks something like this:

const {
  data,
  refetch,
} = useInfiniteQuery({
  queryKey: ['events', eventFilters] as const,
  queryFn: ({ pageParam, queryKey: [, filters] }) =>
    axios
      .get('/event', {
        params: {
          page: pageParam,
          active: 1,
          limit: 10,
          show_expired: 0,
          featured: 0,
          ...filters,
        },
      })
      .then((res) => {
        console.log('fetched events', res.data.data); // Gets called with the fresh data
        return res.data.data as {
          data: EventProps[];
          meta: { current_page: number; last_page: number };
        };
      }),
  initialPageParam: 1,
  getNextPageParam: ({ meta }) =>
    meta.current_page < meta.last_page ? meta.current_page + 1 : undefined,
  select: (data) => data.pages.flatMap((page) => page.data),
  subscribed: isFocused,
  refetchOnMount: 'always',
});

console.log('events', data); // Never updated to the new value unless refetch called

Even while switching screens or changing filters the queryFn runs but the data just does not update at all, neither does the persisted cache (if I force quit the app it still shows the previously cached data). It seems like only refetch can update the query cache. Is this expected behavior? I didn't experience this with normal useQuery calls, only with infinite queries. Here is the query client config:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: Infinity,
      networkMode: 'offlineFirst', // doesn't matter if set to 'offlineFirst' / 'online' / unchanged
    },
  },
});

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
});

const persistOptions: Omit<PersistQueryClientOptions, 'queryClient'> = {
  persister: asyncStoragePersister,
  maxAge: Infinity,
};

// ... in the custom query client provider
<PersistQueryClientProvider
  client={queryClient}
  persistOptions={persistOptions}
>
  {children}
</PersistQueryClientProvider>

[TkDodo]

I would need to see a minimal, standalone reproduction please. feels like something is off.

[Laci556]

Hey! While reproducing the issue I realized it was indeed a problem with our configuration. The FlatList's onEndReached prop was called immediately after the first render (I tested with 1-2 item so it didn't fill out the whole screen). I was checking if the next page was fetching just like in the docs (<List onEndReached={() => !isFetchingNextPage && fetchNextPage()} />) but isFetchingNextPage was false since it was the initial fetch, so it got cancelled (similar to #6709 and #5583). I get that only one queryFn can be running at a time and that's why fetchNextPage cancelled it, the confusing part was not seeing queryFn get called again and a request being made since there was no next page.

[Laci556]

I created a small PR updating the related examples in the docs #9172, I might open another one with a little more explanation/examples. Although reading it now after understanding the problem completely, it does warn about this kind of unexpected behavior but I feel like it could be expanded (especially on how it relates to persisters / invalidation / other edge cases)