我是靠谱客的博主 精明超短裙,最近开发中收集的这篇文章主要介绍Node使用Graphql,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

Node使用Graphql

我们在实际的开发过程中同城会出现这种情况,单个后台对应多个前端,而且前端需要的数据格式并不一样,这就需要后端进行判断或者使用中台进行数据处理

中台的搭建有两种方法

  • 使用axios.all方法获取数据进行处理。
exports.get = ({url, params={}}) => {
return axios({
url,
params
})
.then((result) => {
return result.data
})
}
exports.all = (promiseArr) => {
return axios.all(promiseArr)
.then(axios.spread((...resultList) => {
return resultList
}))
}
router.get('/all', async (req, res, next) => {
let java = await get({
url: 'http://localhost:9000/api/list'
})
let node = get({
url: 'http://localhost:4040/users'
})
let php = get({
url: 'https://ik9hkddr.qcloud.la/index.php/trade/get_list'
})
let nodeAndphp = await all([node, php])
res.json({
java,
nodeAndphp
})
})

此方法会返回一个新的数据类型格式,但只是对数据进行简单的拼接,笼统的返回,并不能进行太多的处理,所以引出第二种方法。

  • Graphql

我们这里主要分为两个方面,对于node比较流行的框架来说,其实网上对于express的搭建方法有很多,但是对于koa的就比较少了

  • express

  • koa2

express

npm install express express-graphql graphql
const express = require('express')
const graphqlHTTP = require('express-graphql')
const app = express()
// 配置路由
app.use('/graphql', graphqlHTTP(req => {
return {
schema: yourSchema,
graphiql: true // 是否开启可视化工具
//当然这里的参数肯定不止这两个
可以通过访问官网查询
}
}))
// 服务使用3000端口
app.listen(3000);

express-graphql传送门

Koa2

这里有两种方式去实现:

const Koa = require('koa')
const graphqlHTTP = require('koa-graphql');
const Router = require('koa-router');
const app = new Koa()
const router = new Router();
const schema = require('./schema')
router.all('/graphql', graphqlHTTP({
schema: schema,
graphiql: {
editorTheme: 'blackboard'
}
}));
app.use(router.routes()).use(router.allowedMethods());
app.listen(4000)
const Koa = require('koa');
const mount = require('koa-mount');
const graphqlHTTP = require('koa-graphql');
const schema = require('./schema')
const app = new Koa();
app.use(mount('/graphql', graphqlHTTP({
schema:schema,
graphiql: true
})));
app.listen(4000);

Schema

每一个GraphQL服务都会定义一套类型,来描述服务可能返回的所有数据。当执行一个查询时,服务会根据定义的Schema验证并执行查询。

//标量类型
GraphQLInt
GraphQLString
GraphQLBoolean
GraphQLID //其实这个我没懂他和int有什么区别。。
//我简单的理解为这些类似于js的基本类型

除此之外,schema还有 定义(Definitions) 常用的定义如下

  • GraphQLObjectType
var AddressType = new GraphQLObjectType({
name: 'Address',
fields: {
street: { type: GraphQLString },
number: { type: GraphQLInt },
formatted: {
type: GraphQLString,
resolve(obj) {
return obj.number + ' ' + obj.street
}
}
}
});
var PersonType = new GraphQLObjectType({
name: 'Person',
fields: () => ({
name: { type: GraphQLString },
bestFriend: { type: PersonType },
})
});
  • GraphQLInterfaceType

当一个字段可能返回多种不同类型时,可使用接口类型 GraphQLInterfaceType,来描述所有可能类型必须有的共同字段,也可指定 resolveType 函数来决定该字段实际被解析时为何种类型。

const AnimalType = new GraphQLInterfaceType({
name: 'Animal',
description: 'Animal接口',
fields: {
species: {
type: GraphQLString,
description: '动物物种',
}
},
})
const dogType = new GraphQLObjectType({
name: 'dog',
interfaces: [AnimalType],
description: 'dog数据',
fields: {
species: {
type: GraphQLString,
description: '动物物种'
},
name: {
type: GraphQLString,
description: '名称'
}
},
isTypeOf: (obj) => {
return obj.name
}
})
const fishType = new GraphQLObjectType({
name: 'fish',
interfaces: [AnimalType],
description: 'fish数据',
fields: {
species: {
type: GraphQLString,
description: '动物物种'
},
color: {
type: GraphQLString,
description: '颜色'
}
},
isTypeOf: (obj) => {
return obj.color
}
})
schema = new GraphQLSchema({
types: [AnimalType, dogType, fishType],
query:new GraphQLObjectType({
name:"schema",
fields:{
fetchInterfaceData:{
type: new GraphQLList(AnimalType),
description: 'interface类型数据例子',
resolve: (root, params, context) => {
return [
{
"species": "哈士奇",
"name": "旺财"
},
{
"species": "热带鱼",
"color": "红色"
}
]
},
}
}
}),
})
//查询:
query fetchInterfaceData {
fetchInterfaceData {
species
...on dog{
name
}
...on fish{
color
}
}
}
//输出
{
"data": {
"fetchInterfaceData": [
{
"species": "哈士奇",
"name": "旺财"
},
{
"species": "热带鱼",
"color": "红色"
}
]
}
}
  • GraphQLUnionType

当一个字段可以返回多种不同类型时,可使用联合类型 GraphQLUnionType 描述所有可能类型,也可指定 resolveType 函数来决定该字段实际被解析时为何种类型。

const {
GraphQLString,
GraphQLList,
GraphQLUnionType,
GraphQLObjectType
} = require('graphql')
const weixinType = new GraphQLObjectType({
name: 'weixinItem',
description: 'weixin数据',
fields: {
source: {
type: GraphQLString,
description: '来源'
},
title: {
type: GraphQLString,
description: '标题'
}
}
})
const weiboType = new GraphQLObjectType({
name: 'weiboItem',
description: 'weibo数据',
fields: {
source: {
type: GraphQLString,
description: '来源'
},
author: {
type: GraphQLString,
description: '作者'
}
}
})
const articleUnion = new GraphQLUnionType({
name: 'articleUnion',
description: '文章联合类型',
types: [weixinType, weiboType],
resolveType: (value) => {
switch (value.source) {
case 'weixin':
return weixinType
case 'weibo':
return weiboType
}
}
})
schema = new GraphQLSchema({
query:new GraphQLObjectType({
name:"schema",
fields:{
fetchUnionData:{
type: new GraphQLList(articleUnion),
description: 'union类型数据例子',
resolve: (root, params, context) => {
return [
{
"source": "weixin",
"title": "标题 1",
},
{
"source": "weibo",
"author": "作者 1"
}
]
}
}
}
}),
})
// 调用例子
query fetchUnionData {
fetchUnionData {
...on weiboItem {
source
author
}
...on weixinItem {
source
title
}
}
}
//结果
{
"data": {
"fetchUnionData": [
{
"source": "weixin",
"title": "标题 1"
},
{
"source": "weibo",
"author": "作者 1"
}
]
}
}
  • GraphQLEnumType

枚举类型 定义一些有效值的合集

const {
GraphQLString,
GraphQLEnumType
} = require('graphql')
const sourceEnumType = new GraphQLEnumType({
name: 'sourceEnum',
description: '文章来源枚举类型',
values: {
weixin: {
value: 'weixin',
description: '微信'
},
weibo: {
value: 'weibo',
description: '微博'
}
}
})
schema = new GraphQLSchema({
query:new GraphQLObjectType({
name:"schema",
fields:{
fetchEnumData:{
type: GraphQLString,
description: 'enum类型数据例子',
args: {
source: {
type: sourceEnumType,
description: '文章来源类型',
defaultValue: 'weixin'
}
},
resolve: (root, params, context) => {
let { source } = params
return source
}
}
}
}),
})
// 调用例子
query fetchEnumData {
fetchEnumData(
source: weixin
)
}
//输出
{
"data": {
"fetchUnionData": [
{
"source": "weixin",
"title": "标题 1"
},
{
"source": "weibo",
"author": "作者 1"
}
]
}
}
  • GraphQLInputObjectType

GraphQL 中的输入对象类型,表示一系列结构化的输入参数。作用于args

const {
GraphQLInt,
GraphQLString,
GraphQLBoolean,
GraphQLNonNull,
GraphQLInputObjectType,
} = require('graphql')
const fileObject = new GraphQLInputObjectType({
name: 'fileObject',
description: "文件数据",
fields: () => ({
type: {
type: new GraphQLNonNull(GraphQLString),
description: '文件类型'
},
name: {
type: new GraphQLNonNull(GraphQLString),
description: '文件的原始文件名称'
},
size: {
type: new GraphQLNonNull(GraphQLInt),
description: '文件大小(bytes)'
},
path: {
type: new GraphQLNonNull(GraphQLString),
description: '文件上传后的路径'
},
}),
});
let schema = new GraphQLSchema({
query: new GraphQLObjectType({
name:'object',
fields: {
fetchInputObjectData:{
type: GraphQLBoolean,
description: 'inputObject类型数据例子',
args: {
file: {
type: fileObject,
description: 'object类型参数'
}
},
resolve: (root, params, context) => {
return true
}
}
}
})
})
//输入
query fetchInputObjectData {
fetchInputObjectData(
file: {
type: "hello.jpg",
name: "hello",
size: 1024,
path: "/img/hello.jpg"
}
)
}
//输出
{
"data": {
"fetchInputObjectData": true
}
}
  • GraphQLList

数组类型趴

let Movie = new GraphQLObjectType({
name:'Movie',
description:'电影信息',
fields:{
id:{
type:GraphQLInt
},
title:{
type:GraphQLString
},
genres:{
type:GraphQLString
},
rating:{
type:GraphQLFloat
},
}
})
let schema = new GraphQLSchema({
query: new GraphQLObjectType({
name:'object',
fields: {
movies:{
type:new GraphQLList(Movie),
resolve(parentValue, args, request){
return [
{
"id": 1,
"title": "欧洲攻略",
"genres": "喜剧,动作,爱情",
"rating": 3.8,
"theater": 1
},
{
"id": 2,
"title": "精灵旅社3:疯狂假期",
"genres": "喜剧,动画,奇幻",
"rating": 7.2,
"theater": 2
},
]
}
},
},
}),
//查询
query Movie {
movies{
id
title
genres
rating
}
}
//数据
{
"data": {
"movies": [
{
"id": 1,
"title": "欧洲攻略",
"genres": "喜剧,动作,爱情",
"rating": 3.8
},
{
"id": 2,
"title": "精灵旅社3:疯狂假期",
"genres": "喜剧,动画,奇幻",
"rating": 7.2
},
]
}
}
  • GraphQLNonNull

字段不能为空

let schema = new GraphQLSchema({
types: [AnimalType, dogType, fishType],
query: new GraphQLObjectType({
name:'object',
fields: {
hello: {
type: new GraphQLNonNull(GraphQLString),
args: {
name: {
// 这里定义参数,包括参数类型和默认值
type: GraphQLString,
defaultValue: 'Brian'
}
},
resolve(parentValue, args, request) { // 这里演示如何获取参数,以及处理
return 'hello world ' + args.name + '!';
}
},
},
}),
})
//查询
query hello{
hello
}
//数据
{
"data": {
"hello": "hello world Brian!"
}
}

最后

以上就是精明超短裙为你收集整理的Node使用Graphql的全部内容,希望文章能够帮你解决Node使用Graphql所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(35)

评论列表共有 0 条评论

立即
投稿
返回
顶部