DEV Community

Setting up Apollo GraphQL in Next.js with Server Side Rendering.

Angad Gupta on April 15, 2020

Single page applications are a popular way of architecting modern front end applications. However, the biggest downside to client side rendering is...
Read full post
Collapse
 
hereisnaman profile image
Naman Kumar •

Hey Angad, this looks good but doesn't work with the getServerSideProps in newer version of Next.

To support that, It was required to split that apollo clinet HOC into two parts, one for provider and for one srr, as now. I have implemented that here. Will love to see suggestions and improvement tips on it.

Another option is to auto define the static prop on each PageComponent which does the SSR data extraction and then export that from each page.

Collapse
 
angad777 profile image
Angad Gupta •

Hey Naman,

Thanks mate - I'll have a look at your repo and implementation now.

I believe there may be even more changes when Apollo v3 comes out of beta.

Cheers

Collapse
 
muddybootscode profile image
Michael Porter •

I was able to extend this out a bit with getStaticProps and getStaticPaths:

export async function getStaticPaths(ctx) {
  const client = await apolloClient(ctx)
  const response = await client.query({
    query: ALL_CHARACTER_IDS
  })

  const { count } = response.data.characters.info;

  const ids = [...Array(count).keys()];

  const paths = ids.map(id => ({
    params: { id: `${id + 1}` },
  }))

  return { paths, fallback: true }
}

export async function getStaticProps({ params }, ctx) {
  const client = await apolloClient(ctx)
  const response = await client.query({
    query: GET_CHARACTER,
    variables: {id: `${params.id}`}
  })

  const { character } = response.data;

  return { props: {
    character,
    loading: response.loading,
    error: !response.error ? null : response.error
    }
  }

Build time takes a bit but otherwise nice.

Collapse
 
tmaximini profile image
Thomas Maximini •

Thanks, that was useful!

Collapse
 
muddybootscode profile image
Michael Porter • • Edited

So how would you use this with the api? export it the same way? I was able to do the dynamic routes pretty easy I also styled up the application as well but going the API route has been damn near impossible. github.com/MuddyBootsCode/tailswin...

Collapse
 
angad777 profile image
Angad Gupta •

Hey Michael.

I see you have dynamic routing implemented in your repo. Is this still an issue for you ? I'd happy to take a look and point you in the right direction. Let me know.

Some docs here for you reference : nextjs.org/docs/routing/dynamic-ro...

Thanks

Collapse
 
muddybootscode profile image
Michael Porter •

Cheers Angad. Yep found that and was able to get it working. Now what I'm trying to do is get this to work with getStaticProps. I'm finding a lot of different implementations but this seems to be the most promising github.com/zeit/next.js/discussion... though it's not completely working for me and seems like it might be a bit over complicated at the moment. However, it does look like there's a lot of headway getting made quickly.

Collapse
 
ericburel profile image
Eric Burel • • Edited

Hi, does it actually server render? My apollo cache seems empty after this setup, like described in the old issue from react-apollo-hooks: github.com/trojanowski/react-apoll...
So the page will be rendered in loading mode systematically with this approach.

For instance, what apolloClient.cache.extract() displays on your app?

Collapse
 
xetera profile image
Xetera •

Yeah I don't think this is actually doing server side rendering, I tried github.com/adamsoffer/next-apollo-... instead and it worked

Collapse
 
alexr89 profile image
Alex •

Hey Angad,
Great post, but is there a reason why this implementation seems quite a lot more complicated than the with apollo example on the NextJS repo (Found Here)?

The example in the above link simply creates an Apollo Client, passes this into the ApolloProvider which wraps the _app.js file and then uses getStaticProps inside of the pages which need it (index.js for example).

How come this example uses a fairly substantial apollo.js file?

Collapse
 
romain_fromi profile image
Romain Fromi •

I am facing an issue with Next.js v.9.4.4: "Error: Circular structure in "getInitialProps" result"
This is due to apolloClient being passed in getInitialProperties: the comment stating that: "As soon as this payload gets JSON.stringified it will remove itself." does not seems true anymore, or I missed something. Did you face that issue too?

Collapse
 
mcabreradev profile image
Miguelángel Cabrera •

Thanks a lot..! this post help me to finally get the graphql stuff.. gracias!!!

Collapse
 
angad777 profile image
Angad Gupta •

Welcome Miguelangel, I'm glad the post was helpful.

Collapse
 
shunyuan profile image
Tan Shun Yuan •

where did you obtain ‘withApollo’ section of code?

Collapse
 
aaiing profile image
AAI INGENIERIA •

Thanks a lot coleague, run to first!!, u know any project to create mutations?

Collapse
 
terchris profile image
Terje Christensen •

Thanks for the example.
I have a simple question I can't figure out. How do I set up a [id].js page so that I can use the id to make a query ?

Collapse
 
angad777 profile image
Angad Gupta •

Welcome Terje, You can setup dynamic routing using this : nextjs.org/docs/routing/dynamic-ro...

Collapse
 
abubaka_afzal profile image
Abubakar Afzal •

Hi Angad
How are you?
I just start working in react so it's a bit hard for me to understand the code of the lib file.it will be great if you please make a video on this or describe the code briefly

Collapse
 
angad777 profile image
Angad Gupta •

Hello Abubakar Afzal.

I am great thanks for asking. Hope you're well too.

Yes absolutely. Thats a great suggestion. I will make a video and describe these concepts shortly.

Thanks
Angad