hasura graphql server 集成gatsby

Posted 2021-01-09 rongfengliang

hasura graphql server 社区基于gatsby-source-graphql 开发了gatsby-postgres-graphql 插件，
可以快速的开发丰富的网站

基本使用

• 安装hasura graphql server

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

• 添加表结构以及数据（hasura server）
  

gastby 集成测试

• 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"
  }
}

• 组件编写
  components/AuthorList

import React from "react"
const AuthorList = ({ authors }) => (
  <div>
    {authors.map((a, i) => (
      <div key={i}>
        <h2>{a.name}</h2>
        <p>{a.id}</p>
      </div>
    ))}
  </div>
)
export default AuthorList;

• 使用组件
  page/index.js

import React from "react"
import AuthorList from "../components/AuthorList"

const Index = ({ data }) => (
  <div>
    <h1>My Authors </h1>
    <AuthorList authors={data.hasura.author} />
  </div>
)

export default Index;

export const query = graphql`
  query AuthorQuery {
    hasura {
      author {
        id
        name
      }
    }
  }
`

• gastby 配置

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
      },
    },
  ]
};

运行&&测试

• 运行

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

• 效果
  

说明

hasura graphql server 是越来越强大了，很方便。

参考资料

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