Realtime GraphQL and Serverless made easy for

+

Hasura

@VladimirNovick

Developer Advocate

Web / Mobile / VR / AR / IoT

vnovick.com

hasura.io

GDE, author, consultant

What is GraphQL

RESTfull API

The core idea is to have a URL for every resource

Description of resource is coupled to implementation

https://swapi.co/

Overfetching

Underfetching

chaining requests to server to get needed data

GraphQL

A query language for your API

GraphQL

How we can get started

https://hasura.io/vue-graphql

How to wrap REST API

  • Analyze API structure
  • Define your schema
  • Implement resolvers

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

Features

  • 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

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

How to get started?

  • Go to hasura.io

  • Click on Get started with Heroku

  • Click on

  • Enter your app name

Let's see it in action

Hasura Console overview

Hasura Console overview

  • GraphiQL - run your queries in in-browser IDE
  • Data - manage your data, access control, relations, permissions
  • Remote Schemas - stitch GraphQL schema of your custom GraphQL server
  • Event Triggers - connect your serverless functions

GraphiQL tab - use for development

  • Set endpoint headers
  • Execute queries and mutations
  • Analyse queries

Data tab - data management interface

  • View and insert data into db
  • create and modify tables
  • Create relationships
  • set permissions and access control
  • execute custom sql statements

Remote Schemas tab

stitch your custom GraphQL server schema

Event triggers

  • connect custom webhooks to database events to execute serverless functions
  • set retry logic
  • forward custom headers to webhook

 

Authentication

Run hasura locally on top of existing postgres

How to get started with GraphQL and Vue

{ Show me some code }!

Thank You

  

https://codesandbox.io/s/2wr5w2yoon

Realtime Chat

https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/realtime-chat-vue

GraphQL with Vue course

https://dev.to/hasurahq/vue-and-graphql-with-hasura-video-course-3mpp

Vue Resources

https://hasura.io/vue-graphql

https://www.youtube.com/c/vladimirnovickdev

@VladimirNovick