Hasura GRAPHQL Server Integration Gatsby

The Hasura GRAPHQL Server community has developed GATSBY-POSTGRES-GRAPHQL plugins based on GATSBY-SOURCE-GRAPHQL,
Can quickly develop a rich website

Basic use

• Installing Hasura GRAPHQL Server

我使用的Heroku 已经部署好了https://rongfengliang.herokuapp.com/说明：后边可能会删了，测试的话，最好的自己搭建

• Add table structure and data (Hasura server)
  

Gastby Integration Testing

• Package.json

{  "name": "gatsby-postgres-graphql",  "description": "Gatsby simple source hasura graphql cms",  "license": "MIT",  "scripts": {    "develop": "gatsby develop",    "build": "gatsby build",    "serve": "gatsby serve"  },  "dependencies": {    "apollo-link-http": "^1.5.5",    "gatsby": "^2.0.9",    "gatsby-link": "^2.0.2",    "gatsby-source-graphql": "^2.0.2",    "react": "^16.5.2",    "react-dom": "^16.5.2"  }}

• Component authoring
  Components/authorlist

import React from "react"const AuthorList = ({ authors }) => (  <div>    {authors.map((a, i) => (      <div key={i}>        

• Working with Components
  Page/index.js

import React from "react"import AuthorList from "../components/AuthorList"const Index = ({ data }) => (  <div>    

• Gastby Configuration

const fetch = require(`node-fetch`)const { createHttpLink } = require(`apollo-link-http`)module.exports = {  plugins: [    {      resolve: ‘gatsby-source-graphql‘,      options: {        typeName: ‘HASURA‘,        fieldName: ‘hasura‘,        createLink: () =>          createHttpLink({            uri: `${ process.env.HASURA_GRAPHQL_URL }`,            headers: {},            fetch,          }),        refetchInterval: 10, // Refresh every 60 seconds for new data      },    },  ]};

Run && Test

• Run

HASURA_GRAPHQL_URL=https://rongfengliang.herokuapp.com/v1alpha1/graphql yarn develop

• Effect
  

Description

Hasura GRAPHQL server is becoming more and more powerful and very convenient.

Resources

Https://github.com/rongfengliang/gatsby-hasura-graphql
Https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/gatsby-postgres-graphql

Hasura GRAPHQL Server Integration Gatsby