在使用 GraphQL (以下简称 gql)的前端项目中,往往需要等待后台同学定义好 Schema 并架设好 Playground 以后才能进行联调。如果后台同学阻塞了,前端只能被动等待。如果对于 gql 项目来说也能够和 REST 一样有一套 mock 方案就好了。经过一系列实践,我选择了 mocker-api 加 Apollo 的方案来实现。
mocker-api 是一个基于 node 实现的接口 mock 工具(前身是webpack-api-mocker,依赖于 webpack-dev-server,现在可独立运行)。由于我们的项目大都和 webpack 结合,所以这里仅简单介绍其与 webpack 结合的用法。
在 webpack 的 devServer 配置项中,引入以下内容:
devServer: {
before (app) {
require('mocker-api')(app, resolve('./mock/index.js'))
}
}
这样便完成了 webpack 和 mocker-api 的结合。接下来我们要到 /mock/index.js 里面写逻辑:
// /mock/index.js
module.exports = {
'POST /api': (req, res) => {
return res.send('Hello world')
}
}
此时开启 webpack-dev-server,在页面中使用 POST 方式请求 /api,即可得到内容为 Hello world 的响应。
Apollo 是一套完整的 GraphQL 实现方案,支持多种语言的服务端和客户端,在这里我们主要使用 apollo-server 来搭建前端的 gql mock 服务。
在 /mock 目录下新建 /gql 目录,再往里面分别建立 /resolvers 目录,types 目录和 index.js 入口文件。下面我们以一个”查询书籍信息“的例子来讲述这个 gql mock 服务是怎么做的。
在 /types 目录下新建 Books.js:
const { gql } = require('apollo-server')
module.exports = gql`
"""
书籍
"""
type Book {
id: ID!
"标题"
title: String
"作者"
author: String
}
type Query {
books: [Book]
}
type Mutation {
addBook(title: String, author: String): [Book]
}
`
接下来,在 /resolvers 目录底下新建 Books.js:
const books = [
{
id: parseInt(Math.random() * 10000),
title: 'Harry Potter and the Chamber of Secrets',
author: 'J.K. Rowling'
},
{
id: parseInt(Math.random() * 10000),
title: 'Jurassic Park',
author: 'Michael Crichton'
}
]
module.exports = {
query: {
books: () => books,
},
mutation: {
addBook: (root, book) => {
book.id = parseInt(Math.random() * 10000)
books.push(book)
return books
}
}
}
最后在入口文件 index.js 里分别引入上面两个文件:
const { ApolloServer } = require('apollo-server')
const typeDefs = [
require('./types/Books')
]
const resolvers = {
Query: {
...require('./resolvers/Books').query
},
Mutation: {
...require('./resolvers/Books').mutation
}
}
const server = new ApolloServer({ typeDefs, resolvers })
server.listen().then(({ url }) => {
console.log(`Apollo server ready at ${url}`);
})
运行 node ./mock/gql/index.js,即可在 localhost:4000 打开 Playground 进行调试了。
在实际的业务中,gql 接口往往被封装成形如 /api/gql 的形式,和其他的 rest 接口一起供客户端调用。为了让 /api/gql接口能够被转发到 localhost:4000 的 Playground,我们可以利用 mocker-api 进行转发。 改写 /mock/index.js,为其增加一个 /api/gql 的地址:
const axios = require('axios')
module.exports = {
'POST /api': (req, res) => {
return res.send('Hello world')
},
'POST /api/gql': async (req, res) => {
const reqBody = req.body
const { data: result } = await axios({
url: 'http://localhost:4000',
method: 'POST',
data: reqBody
}).catch(e => e)
return res.send({
data: result.data
})
}
}
这里我使用了 axios 往 apollo-server 发起请求。 此时在 webpack-dev-server 所启动的页面中往 /api/gql 发起一个 gql 请求,即可验证接口:
fetch('/api/gql', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ query: 'query GetBooks { books { title }}' })
})
.then(res => res.json())
.then(result => console.log(result))
由于 mocker-api 支持 hot reload,所以当我们什么时候不再需要 mock 数据时,直接在 /mock/index.js 中把 'POST /api/gql' 这一段注释掉即可,无需重启 dev server。
至此,GraphQL 项目中的前端 mock 方案大功告成。
Facebook 在2015年开源的 GraphQL,全部的 Graphql 查询都会通过 schema 来进行解析,Graphql 用一种强类型的观念来强制我们设计每个数据,也许会有些前端的同学接受不了,并且 Graphql 这种还支持嵌套查询,只需要 fields 属性中有这个对象就行了
在这篇文章中,我们将分享 Netflix 在这些应用程序的前端架构中引入 GraphQL 所积累的经验。在内部,我们把用于管理广告创建和组装的主要应用程序叫作 Monet。它用于增强广告的创建以及自动管理外部广告平台上的营销广告活动。
本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。使用 GraphQL API 的目的是什么?什么是GraphQL API?什么是GraphQL查询?GraphQL的好处是什么?GraphQL是否优于REST?为什么我们使用Node.js?
官方文档定义:一种用于API的查询语言, Graph + Query,有以下特点:请求你所要的数据不多不少;获取多个资源只用一个请求;描述所有可能的类型系统
新建一个空项目,执行以下语句来安装graphql,创建以下代码,保存为server.js。实现一个简单的post服务,并根据body中的query查询graphql,返回相应数据。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!