hasura graphql server 集成gatsby
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的更多相关文章
- hasura graphql server 集成gitlab
默认官方是提供了gitlab 集成的demo的,但是因为gitlab 一些版本的问题, 跑起来总有问题,所以查找相关资料测试了一个可以运行的版本 项目使用docker-compose 运行 参考 ht ...
- hasura graphql server event trigger 试用
hasura graphql server 是一个很不错的graphql 引擎,当前版本已经支持event triiger 了 使用此功能我们可以方便的集成webhook功能,实现灵活,稳定,快捷的消 ...
- hasura graphql server (haskell)构建
安装 &&运行pg(docker) version: '3.6' services: postgres: image: postgres environment: - "PO ...
- hasura graphql subscriptions 使用
subscriptions graphql 的一项实时数据推送的功能,还是很方便的,自己在直接使用subscriptions-transport-ws npm 包 的时候运行一直有错误(主要是依赖 ...
- 通过torodb && hasura graphql 让mongodb 快速支持graphql api
torodb 可以方便的将mongo 数据实时同步到pg,hasura graphql 可以方便的将pg 数据暴露为graphql api,集成在一起真的很方便 环境准备 docker-compose ...
- hasura graphql auth-webhook api 说明
hasura graphql 生产的使用是推荐使用webhook 进行角色访问控制的,官方同时提供了一个nodejs 的简单demo 代码 git clone https://github.com/h ...
- gqlgen golang graphql server 基本试用
gqlgen golang 的graphql server 具体代码参考https://github.com/rongfengliang/gqlgen-demo 特点 模型优先 类型安全 代码生成 安 ...
- Hasura GraphQL schema 生成是如何工作的
不像大部分的graphql 引擎,使用标准的graphql 规范的处理模型,Hasura graphql 不存在resolver 的概念(实际上是有的,只是转换为了sql语法) 以下是Hasura g ...
- ILOG JRules 和 WebSphere Process Server 集成概述
ILOG JRules 和 WebSphere Process Server 集成概述 简介 业务流程管理(Business Process Management,BPM)和业务规则管理系统(Busi ...
随机推荐
- Nastya Is Buying Lunch CodeForces - 1136D (排列)
大意: 给定n排列, m个pair, 每个pair(u,v), 若u,v相邻, 且u在v左侧, 则可以交换u和v, 求a[n]最多向左移动多少 经过观察可以发现, 尽量先用右侧的人与a[n]交换, 这 ...
- Oracle性能诊断艺术-相关脚本说明
第二章 bind_variables.sql 展示怎样绑定变量及何时绑定变量会导致游标共享 bind_variables_peeking.sql 展示绑定变量窥测的优缺点 selectivi ...
- forget word out a~2
1● an 不,非,无 2● amphi 两个,两种 3● ad 做,加强:
- BZOJ1670 [Usaco2006 Oct]Building the Moat护城河的挖掘
裸的凸包...(和旋转卡壳有什么关系吗...蒟蒻求教T T) 话说忘了怎么写了...(我以前都是先做上凸壳再做下凸壳的说) 于是看了下hzwer的写法,用了向量的点积,方便多了,于是果断学习(Orz) ...
- 蓝桥杯—ALGO-18 单词接龙(DFS)
问题描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母, 要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次) ,在两个单词相连时,其 ...
- bzoj2463
题解: 当n为奇数,输出Bob 否则输出Alice 代码: #include<bits/stdc++.h> using namespace std; int n; int main() { ...
- Python Django 前后端数据交互 之 前端向后端发送数据
Python Django 之 前端向后端发送数据
- Alphabet Cookies
Alphabet Cookies 题目描述 Kitty likes cookies very much, and especially the alphabet cookies. Now, she g ...
- 玩转X-CTR100 l STM32F4 l 电机正交编码器
我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ] 本文介绍X-CTR100控制器的电机正交编码器,X- ...
- jquery 实现内容的级联选取