码迷,mamicode.com
首页 > 其他好文 > 详细

hasura graphql server 集成gatsby

时间:2018-09-30 10:13:16      阅读:367      评论:0      收藏:0      [点我收藏+]

标签:社区   source   react   hql   for   url   tree   pack   rap   

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

hasura graphql server 集成gatsby

标签:社区   source   react   hql   for   url   tree   pack   rap   

原文地址:https://www.cnblogs.com/rongfengliang/p/9728086.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!