-
|
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. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
No using Apollo client on the server throws an error I will find the discussion |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
There are multiple options available here: Use
|
Beta Was this translation helpful? Give feedback.
-
|
thanks for taking the time to answer my question I really appreciate it |
Beta Was this translation helpful? Give feedback.
There are multiple options available here:
Use
fetchfor loading data from the GraphQL API via HTTPThis 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.fetchfor loading data without HTTPYou can actually use the following API for doing a GraphQL Yo…