Bypass loading state between two queries
Let's say you are iterating over a paginated list where each page data is fetched with useQuery
How to avoid the spinner during the time where the data is getting fetched?
In most cases, and assuming that the queries are optimized enough, you'd rather want to show the page1 data for some amount of time until we receive page2 data, and avoid the spinner phase.
I could not find what is the canonical way of doing this with tanstack query- any pointers appreciated!
1 Reply
sunny-greenOP•2y ago
Ok got it, for some reason I had not understood that the placeholderData prop accepted a function
https://tanstack.com/query/latest/docs/react/guides/placeholder-query-data#placeholder-data-as-a-function
Placeholder Query Data | TanStack Query Docs
What is placeholder data?
Placeholder data allows a query to behave as if it already has data, similar to the initialData option, but the data is not persisted to the cache. This comes in handy for situations where you have enough partial (or fake) data to render the query successfully while the actual data is fetched in the background.