apollo-client-nextjs icon indicating copy to clipboard operation
apollo-client-nextjs copied to clipboard

(do not merge) schemalink in app-dir-experiments

Open phryneas opened this issue 1 year ago • 6 comments

@patrick91 This came up in #31 and could be an elegant solution to have the GraphQL api in a Route Handler file, while using it from the server (and also having it accessible during build). I don't really want to add it to the app-dir-experiments example, but it might be worth adding that to the polls demo - what do you think?

phryneas avatar Jun 09 '23 10:06 phryneas

this is quite interesting, I think I can change the demo to use this, maybe next week if I have time 😊

patrick91 avatar Jun 14 '23 10:06 patrick91

If I remember correctly there are 3 environments where data may be fetched (correct me if I'm missing anything):

  1. RSC (React Server Components)
  2. SSR (Server Side Rendering)
  3. CSR (Client-side rendering): This one is the outlier, can't bypass the HTTP request, and needs a server up & running to fetch the data.

Afaik SchemaLink would work for queries on RSC and SSR since it would bypass the HTTP request and query the resolver/db directly, however here's where I lack knowledge on these, how would a mutation or a subscription work on those?

Let's say a Subscription is not a common use case, the one I'm worried about is the mutation, have yet to see an example of a mutation outside CSR, and an app without mutations is basically a static website...

luchillo17 avatar Jun 15 '23 08:06 luchillo17

Went looking a bit more and SSR is basically the same as CSR aside from the cache rehydration after the first render, which is why we have a condition to check if running on server we use SchemaLink, on the client we use HttpLink, so a mutation would work like a normal client app right?

So the actual outlier here would be RSC, dunno what a mutation would look like in this case...

luchillo17 avatar Jun 15 '23 08:06 luchillo17

@luchillo17 mutations and queries should work exactly the same - I'm not 100% sure if the SchemaLink supports subscriptions, but generally I don't think that subscriptions should be used server-side, as that would mean that the server would just have to keep streaming forever (which is something React cannot do - it just does one first render pass).

phryneas avatar Jun 15 '23 09:06 phryneas

Hmm I don't think mutation with RSC works yet, when I try to execute a mutation inside a server action I get an error saying I should mark it as "use server", however I am already doing it, it breaks specifically when I add the mutation code, not sure what the issue is, guess it's marked as experimental for a reason: image

luchillo17 avatar Jun 15 '23 14:06 luchillo17

My guess at this point is that ServerActions is experimental, RSC currently only works with data fetching but interactivity (like onClick or form submission) right now is client-side only, so currently for an app with mutations we would have to use the SSR version of this library, or find a fix for the error above, which I wouldn't recommend until ServerActions gets released (out of experimental phase), the docs themselves mention the use cases for RSC and the rest: https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-and-client-components

luchillo17 avatar Jun 15 '23 15:06 luchillo17