Simple CRUD graphql / next js example

I’m looking for a good and simple example using graphql (apollo v3) nextjs v10 and strapi v3.x.

The example should be really simple and just do:

For client side rendering

  • Login / Logout
  • list the items in a table
  • display details of a item in the table
  • update an item in the table

For server side rendering
The generation of pages must be authenticated and the jwt must be stored in .env

  • list the items in a table → generate a static page
  • display details of a item in the table → generate one static page pr item

I have found several implementations that deal with setting up the connection.
Variations of: createApolloClient, initializeApollo, useApollo
Find it hard to figure out which one to use. So my question is if there is a sample code for this.

System Information
  • Strapi Version: 3.x.x
  • Operating System: any
  • Database: postgres
  • Node Version: 14.x
  • NPM Version:
  • Yarn Version:


Hey there! While I don’t have a tutorial on using GraphQL with Next.js and Strapi, I do have a sample app that I built with Magic, Next.js and Strapi. It’s a simple app where users can log in to see Strapi data. Not sure if it’ll help, but here it is: GitHub - seemcat/meet-at-cafe-estela.

Let me know if you have any questions about my code!