New Server Components NextJS~ How should we query our Server Within New Server Only Components

[wakywayne]

With the new version of react and nextJS having server components how do you guys recommend querying the yoga instance in a server component since you can't use apollo client or any other client-side tools In a server component? I don't know if this isn't a big deal and I am just not used to querying data via the server side or if this is a big change. I know there are a lot of tools scrambling to update with the new server components as it is a big change.

[saihaj]

if you are already using Apollo client it shod imo work same for SSR. It will just populate Apollo cache which when the app hydrates on client side populate the client side Apollo store. This way when the page loads it loads the data from Apollo store instead of making a fetch call

[wakywayne]

No using Apollo client on the server throws an error I will find the discussion

[wakywayne]

The problem is, that the is client only while client.query (kinda) is server only. So components that are supposed to be reusable on client and server, have to fetch data either with client.query or useQuery(). Apollo already had SSR-support (client.query), and Client support (useQuery) - separately - but not at the same time. NxJS13 just introduced, "both at the same time" 🙂

So to iterate: it works fine, serverside. But the components gets "tainted" by it.

So components would have to be split into "am i serverside" and "am i clientside" - and all of the sudden it starts smelling like angular 🙂

I suspect a huge wide array of packages will have this challenge.

[n1ru4l]

There are multiple options available here:

Use fetch for loading data from the GraphQL API via HTTP

This is straightforward - you don't need a GraphQL client, it always depends on what you want to achieve. Executing a GraphQL operation can be as simple as doing an HTTP request with fetch.

This is best if your GraphQL Yoga HTTP server lives outside or alongside your Next.js Application as a separate service.

@notrab also made a video about Server Components and graphql-request, that would also be applicable here: https://graphql.wtf/episodes/66-graphql-with-nextjs-13-server-components

Use yoga.fetch for loading data without HTTP

You can actually use the following API for doing a GraphQL Yoga execution/request without a real HTTP overhead.
https://the-guild.dev/graphql/yoga-server/docs/features/testing

[wakywayne]

thanks for taking the time to answer my question I really appreciate it