useInfiniteQuery with RSCs
I'm using the useInfiniteQuery hook with Next 13, inside of the app directory.
An RSC loads the initial data, which then gets put into
initialData in the useInfiniteQuery hook.
This works perfectly. The rub is, on the page, the user can modify filters, which causes the querystring to change, and the RSC to reload data, and send down the updated data.
Is there a way to force the hook to sort of "reset" and revert back to this updated data? The workaround I'm currently using is to just say
<Fragment key={queryString}>
around the component with the infinite query, so it re-renders at the React level when this search filters change. This works, but it's a bit of a hack.5 Replies
exotic-emerald•3y ago
This is one of the reasons why i wouldn't recommend the initialData approach. Refetches on the server are just ignored on the client because the cache entry has already been created. The <Hydrate> approach solves this much better. Also, we have an experimental next 13 specific plugin that we'll release probably next week
funny-blueOP•3y ago
Ohhhh this sounds intriging! When you say <Hydrate> do you mean this
https://tanstack.com/query/v4/docs/react/reference/hydration#hydrate-1
or is that something that's coming in the Next-13 plugin you mentioned
hydration | TanStack Query Docs
dehydrate
dehydrate creates a frozen representation of a cache that can later be hydrated with Hydrate, useHydrate, or hydrate. This is useful for passing prefetched queries from server to client or persisting queries to localStorage or other persistent locations. It only includes currently successful queries by default.
exotic-emerald•3y ago
Yes, hydration is documented for next13 here: https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydrate
With the plugin it will just work without it. Call useQuery on the server with suspense:true and it'll stream to the client automatically
SSR | TanStack Query Docs
React Query supports two ways of prefetching data on the server and passing that to the queryClient.
Prefetch the data yourself and pass it in as initialData
funny-blueOP•3y ago
WHOA
dude thank you SO much!
exotic-emerald•3y ago
@AdamRackis it's released: https://github.com/TanStack/query/releases/tag/v5.0.0-alpha.80
GitHub
Release v5.0.0-alpha.80 · TanStack/query
Version 5.0.0-alpha.80 - 7/14/2023, 8:32 AM
Changes
Feat
react-query-next-experimental package (#5598) (1a12a6a) by Dominik Dorfmeister
Packages
@tanstack/react-query-next-experimental@5.0.0-alp...