Hasura Con, our user conference is back! Registrations and talk submissions are now open!

A Real-World GraphQL Tutorial Series by Hasura

Move from GraphQL basics to production ready concepts with our hands-on opensource tutorials for fullstack developers.

GraphQL APIs for Beginners

GraphQL is a query language for APIs. A GraphQL server following the GraphQL spec can be implemented using any programming language and can be consumed by any frontend.

Learn more about our Introduction to GraphQL course

The Frontend GraphQL Tutorial Series

What you will learn: These are backend agnostic tutorials where you will integrate server-side GraphQL APIs into your favorite frontend framework to build apps.

Learn how to integrate GraphQL with Frontend

Our Hasura GraphQL Backend Tutorial Series

Learn how to set up a GraphQL API from scratch, how to use Hasura to make web apps, how to convert a REST API to GraphQL API using Hasura Actions, and more.

Create your first GraphQL API

An Introduction to GraphQL : GraphQL APIs for Beginners

GraphQL is open source and is maintained by the Linux Foundation. GraphQL API has a schema and type system. Learn more about the fundamentals of GraphQL through the resources listed below.

query {
  brands(order_by: ["id"], limit: 5) {
   id
   name
   products {
     id
     name
     image
   }
  }
}

GraphQL Mutations >

GraphQL mutation is a type of request that may result in the state of your backend "mutating" or changing, resulting in data being modified in the data store.

This mutation inserts a `product`. Mutations can be used for any type of write operation, including insert, update, and delete.

Learn more about GraphQL Mutations

mutation {
  insert_products(objects:[{name: "Product 1", image: "product1.jpg"}]) {
    id
  }
}

GraphQL Subscriptions >

GraphQL Subscription allows you to subscribe to real-time data from a GraphQL server. This allows an app to subscribe to "events" or "live results" from the backend service while allowing you to control the "shape" of the event from your app.

The subscription can also have nested data to fetch type user, the user id, and user type to know about who placed the order in the same response.

Learn more about GraphQL Subscriptions

subscription {
  orders (where: {id: {_eq: "XX-12"}}) {
    id
    payment
    dispatched
  }
}

The Frontend GraphQL Tutorial Series

You'll find that in every chapter, and in all of our GraphQL tutorials and articles on our website, we'll cover the following concepts time and again:

GraphQL vs. REST
Realtime feed with notifications.
Integrating GraphQL Mutations with Query Variables.
GraphQL Queries, Mutations, Subscriptions.
Using Subscriptions with Apollo Client.
Integrating Mutations to update, delete and bulk delete.
Setting up a GraphQL client with Apollo.
Integrating GraphQL queries in the app.
Managing Local Cache after a Mutation.
Optimistic UI updates for responsive user experience.

Apollo Client
GraphQL with React

In this GraphQL tutorial by our community authors, you'll learn how to integrate a GraphQL API into your React app and build a complete, working application.

Apollo Client
GraphQL with Vue

With this GraphQL tutorial, you'll develop an understanding of using GraphQL APIs in your Vue app while constructing an effective, functioning application.

Apollo Client
GraphQL with NextJS

A GraphQL tutorial on using GraphQL APIs with your Next.js app and creating a comprehensive, operational application.

Apollo Client
GraphQL with Typescript

Get an understanding of how to use a GraphQL API with your React app to build a working app that uses functional components with hooks usage throughout.

Apollo Client
GraphQL with React Native

Learn how to build apps with this GraphQL tutorial on integrating GraphQL APIs with your React Native app.

Apollo Client
GraphQL with Angular

In another GraphQL tutorial by our brilliant community authors, learn how to make a working GraphQL API-using application with Angular.

Native GraphQL Client
GraphQL with Flutter

Develop an understanding of how to use GraphQL APIs with your Flutter app in this GraphQL tutorial by one of our community authors.

Apollo Client
GraphQL with Android

In this GraphQL tutorial, we see how to integrate a GraphQL API with an Android app. The example is in React but the functionality and technology in Android will look like this.

Native GraphQL Client
GraphQL with Elm

The concepts in this GraphQL tutorial will guide you on integrating a GraphQL API with your Elm app. As with all our tutorials, you'll learn how to make a complete, working application.

Native GraphQL Client
GraphQL with Unity

Learn how to use Hasura to implement multiplayer features in Unity by building a cross-platform multiplayer realtime first-person shooter game.

Apollo Client
GraphQL with ReasonML

This GraphQL tutorial teaches you how to build a realtime todo application using authenticated GraphQL APIs.

Apollo Client
GraphQL with iOS

This GraphQL tutorial will help you integrate GraphQL APIs into your iOS app to build a complete and working app.

Hasura Tutorials

Our three courses on Hasura take you all the way from the basics (where you learn how to run Hasura in just 30 minutes) all the way to advanced concepts that teach you how to optimize your applications. Through these courses you will learn:

Setting up GraphQL API from scratch
Write custom GraphQL server with Apollo and Node js
Best practices for using Hasura to build web applications
Authorization and Authentication example using GraphQL
Convert a REST API to GraphQL API using Hasura Actions
Leverage database features
Write GraphQL schema and types and map them to REST APIs.

Hasura Basics

A 30-minute hands-on tutorial to get you up and running with Hasura.

Auth Patterns with Hasura

Follow along on our recorded workshop from Hasura Con 20 on building complex authorization systems with Hasura.

Hasura Advanced

This course is meant to be taken by users of Hasura who want to optimise their application for production use

Fullstack GraphQL Tutorial Series

The following fullstack GraphQL tutorials will teach you how to build realtime todo apps using authenticated GraphQL APIs

Apollo Client
GraphQL with NextJS

In this fullstack tutorial, we will look at building a Hasura GraphQL Backend to generate APIs, followed by integration with Next.js app. We'll be using Auth0 for the Authentication and Vercel for deployment.

Native GraphQL Client
RxDB Offline First Tutorial

In this course, we will look at how to make a web app offline first using a client-side database that is synced securely with Postgres. We'll be using two open-source tools, RxDB and Hasura to help set up the sync. We will be using Auth0 for Authentication though other tools like Firebase, AWS Cognito or AuthGuardian should also work perfectly well.

FAQs

Are these tutorials free?

Absolutely! All of our GraphQL Tutorials are free and open source.

Who can take these tutorials?

All frontend / backend / fullstack developers can take these tutorial series to build real-world applications.

Will there be example code snippets or links to documentation?

All the tutorials will have the full source code available in the open-source hasura/learn-graphql repo.

GraphQL easy to learn?

Yes! GraphQL is easy to learn and consume on the client. However, building a custom GraphQL Server following best practices can be difficult for developers coming from REST API background.

What front end clients are being used in the tutorials?

Most of the frontend frameworks use Apollo Client for the integration. We are planning to add more tutorials around other clients like Urql.

What technologies are used in the tutorials?

Technology choices are mostly wide open. The javascript libraries used can be replaced with an equivalent one. The server-side APIs are taken care of by Hasura GraphQL Cloud Service connected to a PostgreSQL database.

Is GraphQL frontend or backend?

GraphQL is just a query language spec and there are implementations on both client and server.

What language is GraphQL written in?

GraphQL is language agnostic. Reference implementations for the spec have been written in multiple languages, the most popular one being in javascript.

Hasura GitHub Channel

Join our GitHub channel and stay connected with Hasura users from over 83 countries.

→

Hasura Discord Channel

Join our Discord channel and stay connected with Hasura users from over 83 countries.

→

Recommended GraphQL Resources

GraphQL fundamentals are fairly easy to learn. Recommended resources to help guide you through your Hasura & Fullstack development journey.

React + GraphQL

Vue + GraphQL

GraphQL Community

Awesome Fluent GraphQL Clients

Convert your Node js REST API to GraphQL API

GraphQL FAQ

Awesome GraphQL Lists

We've put together a set of awesome lists for your favorite front-end frameworks. These lists talk about clients, developer tools, boilerplates, use cases, and more:

awesome-react-graphql

A curated collection of resources, clients, and tools that make working with GraphQL and React/React Native awesome.

awesome-vue-graphql

A curated collection of resources, clients, and tools that make working with GraphQL and Vue awesome.

awesome-angular-graphql

A curated collection of developer tools, tutorials, and stories that make working with GraphQL and Angular incredibly fulfilling and awesome.

Sample Apps

Check out the sample apps below to get a taste of how real-time GraphQL and Auth work with Hasura. We also have boilerplates to help you get started quickly with your favorite framework.

awesome-react-graphql

A curated collection of resources, clients, and tools that make working with GraphQL and React/React Native awesome.

awesome-vue-graphql

A curated collection of resources, clients, and tools that make working with GraphQL and Vue awesome.

awesome-angular-graphql

A curated collection of developer tools, tutorials, and stories that make working with GraphQL and Angular incredibly fulfilling and awesome.

Sample Apps

Check out the sample apps below to get a taste of how real-time GraphQL and Auth work with Hasura. We also have boilerplates to help you get started quickly with your favorite framework.

WhatsApp Clone

A simple WhatsApp clone with group chat and auth.

React to-do app

A React to-do app with public and private to-dos.

Uber-like app

A demo of an Uber-like location tracking experience.

Our courses have been taken by world-class organizations