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 BeginnersGraphQL 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.

The Frontend GraphQL Tutorial SeriesThe 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.

Our Hasura GraphQL Backend Tutorial SeriesOur 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.

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.
Hasura mascot

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:
  • TickGraphQL vs. REST
  • TickRealtime feed with notifications.
  • TickIntegrating GraphQL Mutations with Query Variables.
  • TickGraphQL Queries, Mutations, Subscriptions.
  • TickUsing Subscriptions with Apollo Client.
  • TickIntegrating Mutations to update, delete and bulk delete.
  • TickSetting up a GraphQL client with Apollo.
  • TickIntegrating GraphQL queries in the app.
  • TickManaging Local Cache after a Mutation.
  • TickOptimistic UI updates for responsive user experience.

GraphQL with React
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.

GraphQL with Vue
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.

GraphQL with NextJS
Apollo Client
GraphQL with NextJS

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

GraphQL with Typescript
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.

GraphQL with React Native
Apollo Client
GraphQL with React Native

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

GraphQL with Angular
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.

GraphQL with Flutter
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.

GraphQL with Android
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.

GraphQL with Elm
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.

GraphQL with Unity
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.

GraphQL with ReasonML
Apollo Client
GraphQL with ReasonML

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

GraphQL with iOS
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:
  • TickSetting up GraphQL API from scratch
  • TickWrite custom GraphQL server with Apollo and Node js
  • TickBest practices for using Hasura to build web applications
  • TickAuthorization and Authentication example using GraphQL
  • TickConvert a REST API to GraphQL API using Hasura Actions
  • TickLeverage database features
  • TickWrite GraphQL schema and types and map them to REST APIs.

Hasura Basics
Hasura Basics

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

Auth Patterns 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
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

GraphQL with NextJS
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.

RxDB Offline First Tutorial
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?
Arrow
Absolutely! All of our GraphQL Tutorials are free and open source.
Who can take these tutorials?
Arrow
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?
Arrow
All the tutorials will have the full source code available in the open-source hasura/learn-graphql repo.
GraphQL easy to learn?
Arrow
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?
Arrow
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?
Arrow
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?
Arrow
GraphQL is just a query language spec and there are implementations on both client and server.
What language is GraphQL written in?
Arrow
GraphQL is language agnostic. Reference implementations for the spec have been written in multiple languages, the most popular one being in javascript.

Recommended GraphQL Resources

GraphQL fundamentals are fairly easy to learn. Recommended resources to help guide you through your Hasura & Fullstack development journey.
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:
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.
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.
Our courses have been taken by world-class organizations
Harvard
Microsoft
Amazon
Yahoo
Autodesk
Salesforce
Google
BBC

We’d love to connect with you at one of our many global events.

Hasura Con 2021Hasura Con 2021Community call
hand
Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Stay in the know
Sign up for full access to our product and community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule.
✌️