How to hydrate urql cache from data fetched in Server Components (Next.js App Router)?

[HiroshiIgarash]

I'm working with the Next.js App Router and trying to reduce duplicate GraphQL requests by hydrating the urql client cache with data fetched inside Server Components.

Here's what I understand so far:

• When using useQuery from @urql/next, the query runs on the server and the result is available in the client cache — this works great, but useQuery cannot be used inside Server Components.
• I've read the official docs on server-side rendering, and I understand how to fetch data manually in a Server Component and use it directly within that component.

However, I’m currently facing the following issue:

• I fetch GraphQL data inside Server Components (or related server-only functions like generateMetadata()).
• Since this data is not connected to the urql cache, the same query is executed again on the client via useQuery.
• Ideally, I want to avoid this second request by hydrating the urql client cache with the data already fetched in the Server Component.

Is there any way to inject manually fetched data (from Server Components) into the urql client cache, so that the client doesn’t re-fetch it?

If this is currently not supported, would it make sense to expose a utility (e.g., a manual cache write) for this use case?

Urql version

@urql/core 5.1.1
@urql/next 1.1.5

[JoviDeCroock]

Your best bet would be to use the restoreData method that is available on the ssrExchange. When you arrive on the client you call ssr.restoreData({ [result.operation.key]: result }) and that should be enough to have this hydrated in your client cache because the next time this operation goes through the exchange chain the ssr-exchange will reply with the data you restored.

This means that from your server-component you'll need to pass { [result.operation.key]: result } as props to your first client-component.

[HiroshiIgarash]

Apologies for the delayed response, and thank you so much for your helpful reply!