with-apollo SSR example added.

[0xtimsb]

with-apollo example shows how to use Apollo with Next.js using:

1. SSG (index.js)
2. Client-only (client-only.js)

There was a lot of discussion over adding SSR example too Here

So, I have added ssr.js, which uses getServerSideProps, and also added a link in the header component to access that page.

[leerob]

Wouldn't you want to render the posts and use the data you fetched?

[0xtimsb]

Here, we are returning apolloClient, which contains fetched data, and it adds all the posts to the apollo cache, we have at a client.

Then, inside the <PostList /> component, that data is queried and the apollo client provides it from the cache.

We are using the same technique in the SSG example to use fetched data.

return addApollState(apolloClient, {
   props: {},
}

[leerob]

Interesting. I know that's not your responsibility, because you're just following the pattern already set, but that seems confusing. All other usage of getStaticProps / getServerSideProps show forwarded the data to the component via props (hence the names). I wonder how many people are getting stuck on this.

[louisnt-prod]

Interesting. I know that's not your responsibility, because you're just following the pattern already set, but that seems confusing. All other usage of getStaticProps / getServerSideProps show forwarded the data to the component via props (hence the names). I wonder how many people are getting stuck on this.

I've adopted the same convention as above following the examples available, but if there are some better practice / more straightforward I'd love to hear about them!

[filipesmedeiros]

We ran into this issue/decision on our project. Why isn't the best practice to just create an ApolloClient inside gSSP, fetch whatever and pass it as normal props to the page?

[filipesmedeiros]

That's the issue: you can't because functions are not JSONable, and what Next abstracts from us is basically a REST call (or something). But you don't have to right? fetchMore is only sugar for passing just a cursor (and Apollo will fill the rest of the vars with whatever was there before). If you hydrate on the first render on the client side, you should still be perfectly able to fetch the cursor from your fetched data and pass it to fetchMore. Really the only difference is that the first render will have cached Apollo Client data. This is the only connecting between Apollo and Next (with SSR). You fill the cache with whatever arbitrary data you want (most of the times, the first data the client will need). From the pages side, none of this matters, they just do whatever queries they need, and Apollo will have them in cache, they code stays the same. The only issue here (I think) is how to hydrate this state, and IMO it can be done with useApolloClient (get the client, hydrate data, etc etc), right before you useQuery. Of course you can abstract this away with a custom hook to reuse between pages. Something like useHydratedQuery.

[0xtimsb]

I see that makes sense. You are right, making a custom hook for this purpose would be really beneficial. But adding such complex logic inside with-apollo, wouldn't that be overkill for people who are just getting started. I think the current implementation is good, from the perspective of the example. We ain't creating a full-fledged app in here. Haha.

[filipesmedeiros]

Yeah that's also true. I mean if it works, it can't be that bad. But note that this current example (and the ones that existed before) doesn't point (IMO) in the best direction, which basically would be align with Next's way of thinking. With this said, it's not that complex, and I think anyone who is serious about Next will ask the same question we are asking and decide for themselves.

As for the hook, idk, it's as complex as what we currently have. Tbh I don't have a strong opinion to leave or remove, I'm just curious to see what core thinks (@leerob ?)

[0xtimsb]

Yep same. Let's see.

[leerob]

I agree that both approaches work. I just worry about beginners seeing it and getting confused.

Maybe it just needs a comment to explain why?

[leerob]

Filed #21984 to improve the with-apollo example. Thank you!

[Kempo]

Hi! Not sure if this is the correct place, but is this PR deployed onto the demo link? There doesn't seem to exist the /client-only or /ssr route in the demo. I get a 404 in either of those links, when technically they should be available?

[0xtimsb]

It's not deployed yet. Do we have the rights to deploy? I think only owners can do that.

[Kempo]

Got it! I guess I can just clone the repo and play around with it locally. Do we know who can deploy it?

[0xtimsb]

@leerob Can you deploy the latest version?

[leerob]

I'm not sure who owns that URL. Best bet would likely be to either remove it from the README or a deploy a new one and update it 👍