DEV Community

Cover image for NextJS x GraphQL x Apollo Client SSR

NextJS x GraphQL x Apollo Client SSR

ghack.dev on April 17, 2020

I've built my personal blog (https://www.ghack.dev/) using NextJS, GraphQL with Apollo Server and Apollo Client. My blog is a Progressive and Isomo...
Collapse
 
alexxxpopa profile image
Alex Popa

Thank you for your article

What version of @apollo/react-ssr are you using?

Have you tried this also with the latest version 4.0.0 on both @apollo/react-ssr and @apollo/react-hooks?
I have tried updating my project and encountered a ton of issues.
From my understanding getDataFromTree has been removed. I have followed this thread
github.com/vercel/next.js/discussi...

Collapse
 
shuzootani profile image
shuzo

Thanks for sharing and ghack.dev loads very fast!!
Is there anything that you did to improve the loading speed?

Collapse
 
ghackdev profile image
ghack.dev • Edited

Hey thanks! ghack.dev is a progressive web app and it's an isomorphic web app. Yeah it's fast by default, but believe me it can be faster if I did more optimizations because the lighthouse scores are not pretty good enough. :)

The image file sizes, the css size, there are still a lot of homework to do :D

Collapse
 
mattheslington profile image
Matt Heslington

Great looking site!

Collapse
 
ghackdev profile image
ghack.dev

Thanks brother!

Collapse
 
rezaavoor profile image
Reza Hosseini

Just wondering what the benefit of using graphql api is when using Next.js. Can't you just talk to the database directly in Nextjs backend part instead of having an extra api doing that for you?

Collapse
 
ghackdev profile image
ghack.dev • Edited

Actually, GraphQL is my only backend. I'm consuming some third-party APIs like dev.to API and Youtube API that I orchestrated in my GraphQL backend. I also retrieve some data from MongoDB.

I preferred to use GraphQL rather than Rest API because with GraphQL I can do a lot of things and have good documentation about the data that will be consumed by the front-end apps, web and I also have a plan to build a mobile app.

The benefits of using GraphQL are also I can use Apollo Client that has a lot of awesome features like caching, optimistic response and it also can be rendered on the server for SEO purposes so I think it fits my needs, because I want to build an Isomorphic web app.

Collapse
 
rezaavoor profile image
Reza Hosseini

Ah that explains it.
Thank you!

Collapse
 
pkellner profile image
Peter Kellner

I'm struggling to find a good way to integrate GraphQL/NextJS and jwttoken auth. any hints?

Collapse
 
ghackdev profile image
ghack.dev

you could do it easily by putting the jwt token on cookie and put it on Apollo Client's link option.

Collapse
 
krpecd profile image
David Krpec

Thanks for great Article!

Maybe you can remove the AppContext from the code. To make the code cleaner, more corresponding with the title and easier to understand :)

Collapse
 
ghackdev profile image
ghack.dev

Yeah. great Idea David! That's unnecessary. out of context :)