Top 5 GraphQL Resources for Next.js Developers in 2021

GraphQL is stepping in to the 6th year in 2021 and is seeing great adoption in the developer community. We have compiled a short list of 5 best resources (in no particular order) specifically catering to Next.js developers, since it's one of the most popular frontend frameworks in the community.

The list broadly focusses on the categories like GraphQL clients, data fetching, authentication, API routes in Next.js and Serverless.

1. GraphQL Clients

GraphQL requests can be made using a simple fetch API call. But specialised GraphQL clients exist to serve use cases around caching, better querying and for building reusuable modules. Here are a few clients that we recommend trying out for Next.js.

Apollo Client

Apollo Client is a fully featured client for managing GraphQL on the frontend. We have created a learn course to talk about how to integrate Apollo Client with Next.js.

urql

urql is a lightweight featured client with automatic caching and a slightly different approach to caching (everything is automagical and manual cache access isn't there). But otherwise the API is available via Hooks that can be plugged into your Next.js components.

SWR

SWR (stale-while-revalidate) is a react hooks library for data fetching, where the data is returned from the cache (stale) and then a request is made to revalidate. Self plug - I made a GraphQL client with SWR and have the boilerplate hosted on github - swr-graphql

Relay

GraphQL APIs that support the relay spec can leverage the Relay client. It's built to be production ready and fundamentally revolves around local declarations of data requirements. Each component specifies what they want, more like how each GraphQL query specifies what response should be returned.

Fluent GraphQL Clients

GraphQL queries are typically written as strings and parsed by these specialised clients better. But what if you can write your GraphQL query as objects? You can do this using a bunch of fluent GraphQL Clients.

2. Data Fetching

Next.js has different data fetching modes. We will see how GraphQL fits in these modes and what tooling can help around these use cases.

Server side rendering (SSR)

Next.js has a SSR mode where the pages are rendered on every request. This is possible via getServerSideProps where data is fetched on each request. In this method, we can make use of a simple fetch API or even specialised GraphQL clients. Here's an example of SSR integration with Next.js + Apollo Client.

Static Export

Static export mode is when data is fetched at build time and html files are pre-generated with that data. Typical use cases for these are static sites like blogs, product pages in e-commerce and content heavy sites that barely change often. In this case, the GraphQL integration can be done via getStaticProps where any GraphQL API call can be made inside using simple fetch.

Dynamic (Client side rendering and SSR)

Dynamic interactions on the frontend requires API integrations to be done on the client. With Next.js client side rendering, we can make use of Hooks to make GraphQL calls. The popular ones from Apollo and urql let's you make useQuery, useMutation and useSubscription hooks on the client side rendering.

Videos on Data Fetching

Here's a video walk through by Lee Robinson talking about Fetching Data with Next.js
Building a forum software from scratch using Hasura GraphQL and Next.js by Jamie Barton.

3. Authentication

Next.js recommends two Authentication patterns based on what strategy is being used for data fetching (like SSR, Static or Dynamic).

Use static generation to server-render a loading state, followed by fetching user data client-side.
Fetch user data server-side to eliminate a flash of unauthenticated content.

Based on this, if you are going for an approach with your own database, there is an open source library called next-auth that takes care of storing user and session data in db. Read more about Next.js JWT Authentication with next-auth. There's an equivalent live stream that we did as a follow up.

There's also a community created boilerplate app for next-auth and Hasura: next-hasura-boilerplate by Nirmalya Ghosh.

Auth0

Auth0 can support both authentication patterns listed above. You can read more about how to configure Auth0 with Next.js from our fullstack Next.js serverless tutorial. This configures an Apollo GraphQL Client with authorization token (accessToken) that can be sent from the headers.

If you are using Firebase, you can use the static generation pattern.

4. API Routes

You can build APIs with Next.js via API routes. You can technically build a GraphQL server using Next.js API routes.

There are two ways to approach this. One is to create a GraphQL Server inside of Next.js and it becomes serverless by default. Voila! The other option is to create the typical serverless function, write your logic and map it to GraphQL types using Hasura Actions.

5. Serverless

The easiest way to deploy your Next.js app is on the Vercel platform. Your Next.js API routes become serverless by default and there by your GraphQL server side APIs too.

herm.dev is a free online workshop on everything you need to build fullstack GraphQL apps with Hasura, Next.js, and Serverless by Christian Nwamba. It is modelled on the 3factor app architecture (read more about building 3factor apps with event-driven programming).
Next.js API Routes are deployed as Serverless functions and enjoys the benefit of scale and costs.

Also read more on how a Django app architecture was migrated to Next.js Serverless architecture, saving dollars in the process. Migrating Django to Serverless with Next.js by Alan Balja.

Let us know in the comments on what your favorite Next.js + GraphQL resource for 2021 :)