keepPreviousData deprecated - what now?

[ffxsam]

I just upgraded to the latest TanStack Query (Vue) and I noticed keepPreviousData is no longer an option when setting queryClient.setDefaultOptions(). Do I need to explicitly specify this now via placeholderData, or is the default behavior of placeholder data to use the previously fetched & cached data? If I just leave off this option, that seems to be the case.

[TkDodo]

You can do:

queryClient.setDefaultOptions({
  placeholderData: (prev) => prev
})

that is the same as setting keepPreviousData: true globally. The defaults haven't changed.

[ffxsam]

Thanks! It seems as though this is default behavior. I don't have this option set, and when I navigate through our app, I always see the previously cached data shown. But I'll add this placeholderData just to be safe.

[TkDodo]

and when I navigate through our app, I always see the previously cached data shown.

That's the default behaviour, yes, but it has nothing to do with placeholderData. When you navigate through your app, you likely change components, and those have different useQuery calls, observering different parts of the cache. When cached data is available, you'll always get it plus potentially a background refetch (stale-while-revalidate).

What keepPreviousData (and the placholderData function replacement in v5) does is give you data from the previous query when you change from one query to the next in the same observer (component). That usually happens when the queryKey changes. It's meant to give you a transition like behaviour you'd get from using suspense and startTransition in react without using suspense.

[ffxsam]

All clear now, thanks Dominik!

[Adnan-Niloy]

I use placeholderData: keepPreviousData which does the same for me

[LeulAria]

not working for me ????

[hnrchrdl]

By setting placeholderData to (previousData) => previousData or keepPreviousData function exported from TanStack Query, we get a few new things:

The data from the last successful fetch is available while new data is being requested, even though the query key has changed.
When the new data arrives, the previous data is seamlessly swapped to show the new data. isPlaceholderData is made available to know what data the query is currently providing you.

From the Tanstack Query Documentation