Purpose of PreloadQuery

[mikew]

Apologies, this isn't really an issue and is more of a discussion but it looks like there's no Discussions turned on for this repo.

---

Earlier at work we were investigating an issue, which brought me back to this repo and I see there's a new PreloadQuery component. It's description reads:

... can preload data in RSC to populate the cache of your Client Components

So I tried it out, comparing it to a page that used useSuspenseQuery and ... I couldn't really see any difference? Other than with PreloadQuery I got an error in nextjs' error overlay (something about "Query failed upstream", even though the query actually worked), and the query happened on the client side (and maybe the server, I'm not sure).

But it's the claim that it can "populate the cache of your Client Components" that I'm curious about. Because when using just useSuspenseQuery, the query happens on the server, there's no query on the client side, and yet using the Apollo Devtools extension, I can see the query in the cache and active queries tab.

So I'm just not clear on what the use case is for that component.

[phryneas]

Next.js renders in two different ways:

• RSC means that every time you switch over to a new route, data for that route is transferred from the server to the browser. If the content is dynamic, that means a render happens on the server each time a user changes their route.
• SSR means that on the initial page load, the HTML rendered by Client Components is transferred from the server to the browser. If the content is dynamic, that means a render happens on the server each time a user visits your page.

What you are seeing when you describe "when using just useSuspenseQuery, the query happens on the server, there's no query on the client side" is a SSR thing - your client components execute on the server, and the network request doesn't happen in the browser, because we go to great lenghts to transport that data over.
But this will only happen on first page load - it will not happen between in-page route navigations.

If you want those in-page route navigations to receive data from your RSC server instead of your GraphQL server (to prevent request waterfalls and maybe because the connection between those two servers is faster), you need PreloadQuery, which will fetch data in RSC and merge it into the Browser cache.

"Query failed upstream"

This seems curious - does your query maybe fail from your RSC server, but not from your SSR server?

[mikew]

If you want those in-page route navigations to receive data from your RSC server instead of your GraphQL server

Would it be correct to also word this as "If you want those in-page route navigations to initiate a fetch from your (nextjs) server instead of the user's client"? Just trying to re-word it to see if I actually understand it.

I think I finally see the difference!

I made this to test out 2 approaches (useSuspenseQuery and PreloadQuery + useReadQuery): https://codesandbox.io/p/devbox/preloadquery-playground-clrhzd

When I start on the Home page, then click "useSuspenseQuery", you're right I definitely see the query happen in my browser. If I go back to the home page, reload my browser, then go to "PreloadQuery", no request happens in the browser.

This seems curious - does your query maybe fail from your RSC server, but not from your SSR server?

TBH I didn't look too much into it. I wanted to focus on a smaller test (the codesandbox linked above). It's not happening there, so I'm chalking that error up to inexperience for now.

[phryneas]

Would it be correct to also word this as "If you want those in-page route navigations to initiate a fetch from your (nextjs) server instead of the user's client"? Just trying to re-word it to see if I actually understand it.

Yup. That wording works :)

TBH I didn't look too much into it. I wanted to focus on a smaller test (the codesandbox linked above). It's not happening there, so I'm chalking that error up to inexperience for now.

If you ever encounter it, please open an issue on it :)

I think all questions here have been answered, so I'll close this issue for now. Have a great day!

[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.