We're transitioning Studio from Beta to Early Availability

Announcing the Official Hygraph Todo App Starter

Introducing the Todo App starter built using Hygraph, Next.js, NextAuth.js, SWR, and Tailwind. Quickly get started with user generated content.
Jamie Barton

Written by Jamie Barton

Dec 24, 2021
Mobile image

We're excited to share that we have a new official Hygraph Starter. A Todo App!

Todos preview

This reference application is an example of how you can build a fully functional todo app using a popular React data fetching library, and use Hygraph to store user profiles, and their own todos.


  • Authenticate users with NextAuth.js
  • Protected user todos with email/password login
  • Styled with Tailwind CSS
  • Works with Next.js API routes + SWR

This application demonstrates how you can leverage your existing Next.js applications to include Hygraph, even if you are still using API routes instead of a GraphQL endpoint.

We understand not everyone can start using GraphQL on the frontend right away, but with this example, we'll be using the powerful React hooks library SWR for fetching (and mutating) data to show how you can begin to use GraphQL behind your frontend API routes.

If you've been looking for an excuse to start using GraphQL and Hygraph, this example is perfect for you.


  1. Create a new project using the Todo App starter
  2. Create a Permanent Auth Token with permissions to Create, Read, Update, Delete, Publish, and Unpublish on the DRAFT stage
  3. Deploy to Vercel and provide your API endpoint and token

Get started with your own Todo App →

Blog Author

Jamie Barton

Jamie Barton

Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.