How can I redydrade the client side cache.

[naimulemon]

Suppose I use query in server component. And mutation on client component using mutation hook. The refetching of use Mutation hook doesn't hydrate the server-side data. Is it possible to sync hydrate data cache both server side and client side ?

[jerelmiller]

Hey @naimulemon 👋

I'll let @phryneas chime in here as well, but your server-side cache is only very short-lived. Assuming you're using the APIs in the README, the client and its cache only survives for a single request. We don't recommend sharing a cache between requests because there is a security risk of multiple customers data accidentally leaking if you do. This package handles creating those clients for you on each request.

That said, your mutations will likely change some data somewhere (a database or remote API). In that case, the next time your page uses SSR to hydrate, it should just query the data source again. I wouldn't rely on Apollo's server-side cache at all as a data store. Typically you'd execute the mutation in a client component anyways, so when that mutation returns, it should update the client-side cache much like if you were just using a SPA.

Hope this helps!

(again @phryneas feel free to chime in if anything I said here looks incorrect)

[phryneas]

I'd want to put this section from our README into focus:

The idea is that for every part of data, you should decide "will I need this in Client Components?".

If the answer is "no", you can use it in server components and mutate it with server actions.

If the answer is "yes", you should never render it in server components and also only mutate it from the client.

The core problem here is that if you render something in a server component and a client component at the same time, your client cache might update, but your server component will not (and even if you get it to update, it will not at the same time) - you will end up with tearing.

If it's only SSR you're after, you can also skip RSC (or just fetch data in RSC for priming your client cache with PreloadQuery) and use useSuspenseQuery in your Client Components. On first page load, your Client Components will have a SSR pass, which means that your Client Components will server-side-render, but then continue with an interactive client cache in the browser.

Synchronization beyond that from CC to RSC is unfortunately impossible, as you'd have to upload your full client component cache to the server with every request, which would be quite a lot of data.

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.