quickest-silver

useInfiniteQuery returns stale data even though new data has been fetched

I use tanstack query in my RN application, inside a screen and use infinite query to fetch some messages. I've added logging inside the queryFN before returning the data, as well as logging of the data retrieved from query.data When I open the screen I see that the queryFN returns the expected data, while query.data log returns old data (i.e. queyFN logs N items, while query.data logs N-1 items). Since I'm using a FlatList with refreshControl, when I pull to refresh the data gets synced. Do you have any idea why Tanstack Query doesn't sync the data correctly?

4 Replies

yelping-magenta•3y ago

Can you provide a sandbox?

national-gold•3y ago

Same error happens to me and I dont have solution, only thing I can think off now is to use something extra hacky like:

  useEffect(() => {
    if (reachedEndTimes) {
      setTimeout(() => {
        fetchNextPage();
      }, 2000);
    }
  }, [fetchNextPage, reachedEndTimes]);

  useEffect(() => {
    if (reachedEndTimes) {
      setTimeout(() => {
        fetchNextPage();
      }, 2000);
    }
  }, [fetchNextPage, reachedEndTimes]);

But this is not good at all

xenophobic-harlequin•3y ago

I'm encountering the same issue when invalidating the query from another component. Using my debugger I can see the same; queryFn executes and fetches the expected data, but the value returned to my component remains the stale value from the first fetch. I think I figured it out. In my FlatList I had defined:

onEndReached={() => {
          fetchNextPage();
      }}

onEndReached={() => {
          fetchNextPage();
      }}

But this was firing and conflicting with the regular fetch after invalidation. The fix was annoyingly simple:

onEndReached={() => {
        if (!isFetching) {
          fetchNextPage();
        }
      }}

onEndReached={() => {
        if (!isFetching) {
          fetchNextPage();
        }
      }}

xenophobic-harlequin•3y ago

GitHub

fetchNextPage from useInfiniteQuery doesn't work if has been fired ...

Describe the bug fetchNextPage from useInfiniteQuery doesn't send a request if was fired before the first request returned data. If you open the codesandbox example, you will see that query res...

Gaming

Programming

useInfiniteQuery returns stale data even though new data has been fetched

Did you find this page helpful?