GraphQL with React and Hasura workshop

Independent consultant

Web / Mobile / VR / AR / IoT / AI

GDE, author, dev advocate

What is GraphQL


A query language for your API

What's wrong with REST

Restful API

The core idea in REST is to have a URL for every resource

RESTfull API problems

Description of resource is coupled to implementation



chaining requests to server to get needed data

So how does GraphQL solve it

Avoid over-fetching

Prevent multipe API calls

Lesser communication with API developers


How it looks like


type Post {

   title: String!

   content: String!

   user: User!


type Person {

    name: String!

    address: String

    posts: [Post!]!



GraphQL Resolvers

Let's talk about GraphQL query language

First assignment

  • Fetch last 5 todos
  • Find your own user id by name
  • Fetch user with specific id
  • Insert a new todo
  • Update todo

Tip: If you are not sure with how to write GraphQL syntax use Explorer feature

Get Started


Writing your own server

yarn add apollo-server graphql
const { ApolloServer, gql } = require('apollo-server')

const posts = [{
  id: 1,
  title: "Some title",
  description: "Description",
  userId: 1

const users = [{
  id: 1,
  name: "Vladimir Novick",
  email: ""

const typeDefs = gql`
  type Post {
    id: ID!
    title: String!
    description: String!
    user: User
  type User {
    id: ID!
    name: String!
    email: String
  type Query {
    posts: [Post]
    users: [User]
  type Mutation {
    addPost(post: PostInputType): Post
  input PostInputType {
    userId: ID!
    title: String!
    content: String!

const resolvers = {
  Query: {
    posts: () => => {
        const user = users.find(user => === post.userId)
        return {
          title: post.title,
          description: post.description,
    users: () => users
  Mutation: {
    addPost: (_, { post: {userId, title, content}}) => {
      const user = users.filter(user => === userId).reduce((acc, u) => u, {})
      const postToPublish = {
        id: posts.reverse()[0].id + 1,
        description: content,

      return postToPublish

const server = new ApolloServer({

server.listen().then(({ url }) => console.log(url));

What about the client?

yarn add @apollo/react-hooks

passing variables to mutation

passing different options such as refetchQueries etc


Step 2

What about Architecture

Microservices architecture Architecture

How do you start with backend?

  • Code your own
  • Use Hasura 
  • Use AWS AppSync

What is Hasura

open source and free engine that gives you auto-generates real-time GraphQL API on top of new or existing Postgres database


  • Can be deployed to any cloud or run locally
  • Compatible with all Authentication solutions
  • Can run on top of new or existing Postgres database
  • Supports Postgres addons (PostGIS, TimescaleDB)
  • Auto-generates GraphQL api
  • GraphQL queries are compiled to performant SQL statements using native Postgres features


  • Comes with hasura-cli which has awesome tools like migrations and more
  • Can work with custom SQL statements
  • Has configurable access controls for data
  • Can be connected to your own GraphQL server (does schema stitching)
  • Has eventing system which enables to trigger serverless functions

Let's see it in action

  • Go to

  • Click on Get started with Heroku

  • Click on

  • Enter your app name

  • Click on deploy button

  • Click on View app

  • Create posts table

  • create users table

  • connect posts and users using foreign key and relationships

  • Add a remote schema

  • Change your code sandbox from Excercise 2 to connect to your newly created blog api


Create custom business logic

Let's build todo app from scratch


Thank You


GraphQL workshop

By vladimirnovick

GraphQL workshop

  • 263

More from vladimirnovick