Confused by isPreviousData

[Jonzy3000]

I am trying to get desired results similar to this - #1453

I am using useQuery and want to display a loading indicator when:

• data is fetching
• no data is found in cache for current keys

The resolution to this was to use isPreviousData combined with isFetching, though isPreviousData doesn't always seem to be true when getting data from the cache. In this example, https://codesandbox.io/s/frosty-faraday-zz7pv?file=/pages/index.js is there a reason why isPreviousData is false when going back to the previous page?

[TkDodo]

in this example sandbox, there is a useEffect that will pre-fetch the next page. So when you click next, the data will already be readily available in the cache, thus it is not the previous data. if you remove the effect that achieves that:

  // Prefetch the next page!
  React.useEffect(() => {
    if (data?.hasMore) {
      queryClient.prefetchQuery(["projects", page + 1], () =>
        fetchProjects(page + 1)
      );
    }
  }, [data, page, queryClient]);

you will see isPreviousData transition to true when you click next, and back to false once the actual data is received.

I did that here: https://codesandbox.io/s/awesome-shannon-o5fnn?file=/pages/index.js

[Jonzy3000]

Hi @TkDodo, thanks for the speedy reply and explanation! Makes sense, I was thinking that isPreviousData was used for when data has been previously fetched for that queryKey but was in a fetching state.

[TkDodo]

isPreviousData is true when the data that you currently see is not really the data for your queryKey, but it is actually the "lagged" data that you are still seeing from the "previous page".

[mikechabotcandy]

@TkDodo How exactly does react-query "know" what your previous data is if the queryKey has changed (i.e. no data in the cache for the new/incoming queryKey). Does it walk back up the queryKey array (i.e slice the array) until it locates data? Does it decrement the last entry in the array (if it's a number) in an attempt to locate something in the cache?

[TkDodo]

the data is stored on the observer that is created by useQuery. So every useQuery instance has its own local copy of the data, so it does know what the previous one was, independent of the key.