Updating hydrated data in Next App Router via a server action
Hello, I'm trying to get something working that basically involves a combination of Prefetching / Hydration of React Query and changing that data later using a server action. The basic flow:
- in a root layout file, I'm prefetching some data and using a HydrationBoundary to pass it to the client
- I'm passing promises rather than resolved data so that things will suspend on the clientside until those initial server requests are completed
- the clientside eventually loads and renders properly with that prefetched data
- now I'm triggering a server action on the clientside which modifies one of the prefetched pieces of data, and I want to basically invalidate and rerender the HydrationBoundary such that the prefetched data is fetched again and my updated piece of data is passed again to the clientside query client, to be merged into its existing query cache
The problem I'm facing is that the clientside query client doesn't pick up that new data. I'm not sure if it reacts to re-rendered HydrationBoundaries for queries that were already previously hydrated, or whether it's some interaction with the Next cache stuff I don't really understand. Or, could be the fact that I'm dehydrating promises rather than resolved data.
Either way, I want to figure out if it's possible to get this to work. It may seem weird since in theory I should be able to refetch this data clientside, but the way I'm using React Query for this specific query is that the data prefetched on the serverside has no client-accessible API and can only be accessed serverside, and I'm trying to avoid building an API to directly expose it.
8 Replies
afraid-scarletOP•10mo ago
In the server action that updates data, I've tried:
- calling invalidateQueries on the query key I want to refresh
- calling `revalidatePath('/') to wipe the layout cache that contains my prefetching component so that it runs again
- calling router.refresh() on the clientside after the server action is finished
none of that seems to work
actually it looks like it works if I specifically await that prefetch call rather than sending the promise to the client, so I guess the HydrationBoundary only merges updated data if the data is already resolved and isn't a promise?
manual-pink•10mo ago
Are you able to share some code or an example on stackblitz? App Router and React Query are a bit tricky to get to work together. This guide has a bit more details (linking to the section that I think is most relevant to you)
https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
afraid-scarletOP•10mo ago
trying to get something together based on the example stackblitz
doesnt seem like it specifies packages correctly though so it cant build
afraid-scarletOP•10mo ago
actually even with everything installed the example stackblitz gives this error about missing queryFn before ive even modified it 🤷♂️
afraid-scarletOP•10mo ago
StackBlitz
Query Nextjs App Prefetching Example - StackBlitz
Run official live example code for Query Nextjs App Prefetching, created by Tanstack on StackBlitz
afraid-scarletOP•10mo ago
well I cant get it running for whatever reason but I modified the example to sort of demonstrate what Im trying to do:
https://stackblitz.com/edit/tanstack-query-fit2ih?file=app%2Fpokemon-info.tsx
Adam Wootton
StackBlitz
Query Nextjs App Prefetching Example (forked) - StackBlitz
Run official live example code for Query Nextjs App Prefetching, created by Tanstack on StackBlitz
afraid-scarletOP•10mo ago
basically modified the Pokemon prefetch query to randomize the pokemon it fetches to simulate data being changed on the server. Then added a button to the clientside that calls a server action which revalidates the root path. The expectation would be that clicking that button should cause the pokemon to change
it seems to work locally if you download the project, it just doesnt work on stackblitz :/
afraid-scarletOP•10mo ago
filed a bug here
https://github.com/TanStack/query/issues/8369
GitHub
Prefetched non-awaited query does not update clientside query cache...
Describe the bug have a HydrationBoundary in a Next.js app which dehydrates a query that contains prefetched queries which have not been awaited serverside (ie. they are promises which are being se...