What will Apollo code look like in server components?

(Sorry for using an issue to ask a question.)

From my understanding, this package so far only tells me how to instantiate an Apollo Client in Next.js 13. (I'm sure it's doing way more, but on a surface level, that's the only thing I could see.)

But I'm confused about how I'm supposed to use Apollo on the server. Here's my thought process:

To avoid too many GQL requests on the server, my first instinct would be to have one GraphQL request somewhere at the root of a page and pass the data down to other server components using props - kind of like we used to do it using `getStaticProps`. But that doesn't seem very ergonomic to me. This also leads to data being fetched unnecessarily when you change or remove some child components and nothing tells you to remove the unused fields from your query.

Another option I can think of is using fragments in the individual components and Apollo somehow combining them into a single query for you. I don't know if that can work, but it seems like the most intuitive option to me. But I think this approach might be at odds with Next.js's fetch-level caching.

The last approach that comes to my mind involves having many individual queries, with each component fetching its own data. I guess this would be the most cacheable approach, but it could result in dozens or even hundreds of requests per server-rendered page.

However, with the first and last approaches, I struggle to see the benefits of using the Apollo Client.

Can someone explain to me the vision of how we are supposed to use Apollo Client on the server?

Start with the package’s existing Next.js 13 client-instantiation guidance and read the 15-comment issue thread for the intended server-component usage. Done means providing clear documentation of the recommended server-side Apollo approach, including how requests, fragments, and caching should be handled.

Written by the indexing model from the issue text.