Building realtime Vue apps with GraphQL using Hasura
+
Hasura
Developer Advocate
Web / Mobile / VR / AR / IoT
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
Overfetching
Underfetching
chaining requests to server to get needed data
GraphQL
A query language for your API
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
@VladimirNovick
Copy of Realtime GraphQL and Serverless made easy for Vue with Hasura
By Vladimir Novick
Copy of Realtime GraphQL and Serverless made easy for Vue with Hasura
Hasura is a free and open source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one. That talk will cover: Using GraphQL to make CRUD operations from a Vue application Setting up access controls to data Building realtime components in Vue using GraphQL Subscriptions Wrapping existing REST APIs with GraphQL servers that can be deployed on Serverless platforms, and then merging them into a single endpoint using Remote Schemas Triggering serverless functions on database events In short, we’ll go through how Vue developers can adopt realtime GraphQL and Serverless using Hasura.
