• Stars
    star
    123
  • Rank 284,584 (Top 6 %)
  • Language
    JavaScript
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A sample Next.js app using Zeit's SWR React Hooks to make GraphQL Queries/Mutations/Subscriptions

swr-graphql

The Idea behind the Example

This is a sample app demonstrating usage of useSWR, mutate and trigger of SWR library with a Hasura GraphQL API. The app uses native websockets for implementing GraphQL subscriptions on the client.

  • Hasura GraphQL APIs for instant GraphQL backend.
  • Integrate simple GraphQL queries.
  • Optimistic UI with GraphQL mutations.
  • GraphQL Subscriptions using native websockets.

Deploy Hasura to get a GraphQL API

  1. Click on the following button to deploy GraphQL engine on Hasura Cloud including Postgres add-on or using an existing Postgres database:

    Deploy to Hasura Cloud

  2. Open the Hasura console

    Click on the button "Launch console" to open the Hasura console.

  3. Create table users

    Head to the Data tab and create a new table called users with columns: id (text), name (text), created_at (timestamp now()).

  4. Try out a GraphQL Query

    query {
        users {
            id
            name
            created_at
        }
    }

One-Click Deploy

Deploy your own SWR project with ZEIT Now.

Deploy with ZEIT Now

How to Use

Install it and run:

yarn
yarn dev
# or
npm install
npm run dev

Deploy it to the cloud with now (download)

now

More Repositories

1

node-docker

Guide for Writing Dockerfiles for Node.js Applications
JavaScript
91
star
2

python-docker

Guide for Writing Dockerfiles for Python Web Applications
Python
54
star
3

next-auth-hasura-example

JavaScript
45
star
4

react-admin-hasura-demo

A quick sample app to demonstrate usage of react-admin with hasura data provider.
JavaScript
16
star
5

dynamic-jamstack-gatsby-hasura

A demo of adding dynamic content to pre-built markup.
JavaScript
16
star
6

google-sheets-remote-schema

Google Sheets Rest API transformed into GraphQL to be added as a remote schema in Hasura
JavaScript
13
star
7

gatsby-markdown-hasura

Use Markdown files as CMS with Gatsby and integrate with Hasura GraphQL for comment system
CSS
9
star
8

calendar-app-scheduling-backend

PLpgSQL
8
star
9

react-admin-hasura-example

JavaScript
6
star
10

deno-graphql

TypeScript
3
star
11

mapbox-remote-schema

Mapbox Rest API transformed into GraphQL to be added as a remote schema in Hasura
JavaScript
3
star
12

dotfiles

Mac config files - .bash_profile, .tmux.conf, .vimrc
Shell
3
star
13

okta-remote-schema

Okta Rest API transformed into GraphQL to be added as a remote schema in Hasura
JavaScript
3
star
14

hasura-aws-serverless

Learn how to make use of different AWS Services with Hasura Cloud and GraphQL
3
star
15

openapi-swagger-remote-schema

OpenAPI/Swagger Spec transformed into GraphQL to be added as a remote schema in Hasura
JavaScript
2
star
16

contentful-remote-schema

Contentful GraphQL API as a Remote Schema in Hasura
2
star
17

mapbox-hasura-demo

A demo react app showcasing the integration of Mapbox with Hasura GraphQL
JavaScript
2
star
18

aftership-remote-schema

Aftership Rest API transformed into GraphQL to be added as a remote schema in Hasura
JavaScript
2
star
19

graphql-mesh

Creating a Data Graph with GraphQL Mesh and Hasura Remote Joins
1
star
20

faunadb-graphql-api

1
star
21

gatsby-func-hasura

JavaScript
1
star
22

dotnet-graphql-postgresql

TSQL
1
star
23

authorizer

Dockerfile
1
star
24

data-api-show-demo

1
star
25

graphql-custom-resolver-example

Custom Resolver / Schema Stitching Example with Hasura GraphQL.
JavaScript
1
star
26

test-hasura-github-integration

1
star
27

google-places-remote-schema

Google Places Rest API transformed into GraphQL to be added as a remote schema in Hasura
JavaScript
1
star
28

webinar-cloud-to-local

PLpgSQL
1
star