I don't understand how keepPreviousData works

[piotrpalek]

Hey! I'm trying to understand how keepPreviousData works. I wanted to use it like this:

• I open Page 1 initially with no data, and I show a spinner because it's the initial hard load
• I go to Page 2 with no data, so the same thing happens
• I go back to Page 1, but now I show the "old" data (which should be kept via keepPreviousData) and replace it with new data once that comes in, without showing a spinner

(we can assume the query keys just go from "1" -> "2" -> "1")

Now what I don't understand it that isPreviousData seems to be true whenever I fetch new data, but is false when I re-fetch data/cache key that I have already fetched before. Shouldn't this be the inverse? Because if we refetch a previously fetched cacheKey in the background, it would show the "previous data" in the meantime?

I have found a CodeSandbox that I modified slightly to show what I mean: https://codesandbox.io/s/isloading-vs-isfetching-when-using-keeppreviousdata-forked-qiixhg?file=/pages/index.js

If we go back and forth there, between page 1 and 2 (hitting nextPage/prevPage constantly) isFetching will be true every 5s., and the other booleans will be false. But if we go to a page we didn't open previously, isPreviousData will also be true until the new data loads, shouldn't this be the opposite? I'm confused.

Additionally I don't think I understand the interactions between stale data, cached data and previousData (and potentially initialData and placeholerData) is there a guide somewhere that explains it a bit better? I've searched, but couldn't find something that would clear it up for me.

[anusuryadevi]

Hello All,
withKeepPreviousdata, You don't expect it to store previously queried data to load from the cache the next time you fire the same query.
With KeepPreviousData, it keeps only the last fetched data result until it loads the new Data.
Without KeepPreviousData, it makes data undefined as soon as you fire a new query and fills in new data after being loaded.
keepPreviousData only makes sense in case of pagination, instead of showing an empty result set in between page changes, you can show the last fetched data until new data is fetched.

[TkDodo]

keepPreviousData keeps previous data on the screen while the QueryKey changes / transitions to a new value. In your example:

1. you fetch page 1. you get no data and a loading spinner. this is the first load.
2. you go to page 2. Even though your queryKey has page2 in it, we keep showing data for page 1 (instead of undefined data). You get isPreviousData: true here.
3. fetching of page 2 finishes, you get isPreviousData: false and the actual data for page 2.
4. you go back to page 1. We have cached data for that page, so we can show it. This has nothing to do anymore with keepPreviousData, so isPreviousData is also false.

In your example sandbox, you will only see isPreviousData: true when data that is displayed does not correspond to the Current Page value. In the steps I described above, this will only happen between steps 2 and 3.

[fitimbytyqi]

@TkDodo Hey, I wanted to ask you if this property is safe to be used for forcing scroll restoration ?
Because when I use it, on pagination change it scroll the page to top which is just the thing that I want,

I noticed scroll restoration wouldn't work otherwise :/

[KishorJena]

i tried using keepPreviousData but it seems it return undefined. i used it in useQuery
placeholderData: keepPreviousData,