摘要:前言两篇文章学完了基础篇原理篇,接下去便是实践的过程,这个实践我们使用了如下技术栈去实现一套任务管理系统,源码就不公开了等稳定后再发布。后续我所在的公司网关团队会持续实践,争取贡献出更多的解决方案。
前言两篇文章学完了GraphQL(基础篇, 原理篇),接下去便是实践的过程,这个实践我们使用了如下技术栈去实现一套任务管理系统,源码就不公开了, 等稳定后再发布。效果如下:
使用的技术栈有:
React16全特性
Antd构建UI界面
create-react-app搭建客户端基础
react-apollo完成客户端请求的封装和响应体的处理
bizcharts(g2)实现图表
apollo-boost(graphql)完成客户端数据请求
rxjs完成某部分响应式设计
全程使用ramda.js做函数式编程
Nest框架做服务器
数据库选择moogoose
passport搭配jsonwebtoken做用户认证管理
graphql-server(@nest/graphql)实现服务端graphql请求的处理
如下图:
分为两大部分:client和server,其中client的目录结构如下:
各个目录的解释在图中已经体现。
server端的目录结构如下:
各个目录的含义的解释在图中已经体现。
因为我们主要是讲graphql的应用,所以其余的细节忽略不说。至于Nest框架的使用,请参考文档Nest.js
GraphQL的实践实践GraphQL我们不会直接用graphql-js,而是使用功能更加丰富、社区支持更多apollo-graphql。其文档编写的也是很详尽,基本上所有的问题都可以在文档上找到答案。推荐新手可以先按照Get started来入手
客户端的实践因为我们使用了apollo-boost,所以在前端入口文件上,要拿这个包进行一些初始化,得到apolloClient的实例(无关的代码已经去掉):
import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider } from "react-apollo";
import ApolloClient from "apollo-boost"
... ...
const GW_BASE_URL = process.env.NODE_ENV === "production" ");"/graphql" : "http://127.0.0.1:8888/graphql"
const client = new ApolloClient({
uri: GW_BASE_URL,
// 需要设置这个,这样每次请求的时候认证信息才会带上
fetchOptions: {
credentials: "include",
},
// 缓存读取配置
clientState: {
typeDefs,
resolvers,
},
// 设置这个是为了配合jwt
request: async (operation) => {
// get the authentication token from local storage if it exists
const token = localStorage.getItem("token");
operation.setContext({
headers: {
authorization: token ");${token}` : "",
Origin: location.href,
},
});
},
// 设置全局错误处理信息,这样就不用每个请求都进行error处理
onError: (errObj) => {
if (errObj.graphQLErrors) {
const errorMsg = errObj.graphQLErrors[0].message;
if (errorMsg === "身份信息已过期,请重新登录") {
... ...
message.info(errorMsg, 3, () => location.hash = "#/user/login");
} else if (errorMsg && (errorMsg as any).statusCode === 403) {
message.error("权限不足,请不要重试");
} else {
message.error(errorMsg);
}
}
},
});
ReactDOM.render(
,
document.getElementById("root"),
);
页面级别的使用
每个页面都会新建三个文件:
graphql.ts index.scss index.tsx
其中graphql.ts定义了客户端的请求,比如:
import gql from "graphql-tag";
// 用来查询所有的用户
export const QUERY_USERS = gql`
query {
userList {
id
roles
team
mobile
staffCode
email
username
}
}
`;
而后在index.tsx文件中就可以使用这个查询语句,如下:
整个流程是很清晰的,因为使用了typescript,所以在客户端可以引用到服务端定义的返回类型,从而提高了代码编写的速度。
实践出来的问题和想法react-apollo目前发现了个bug,如果我返回的数据的层级太深,比如达到了4层以上,数据更新到缓存的时候便会出错。
关于graphql的本地状态的管理略微复杂,如果有个请求的结果从一开始就一直被所有的页面使用,一般一些公共的信息,比如用户名等,这种情况下想要直接拿到的话是不大可能的,需要绕一大圈去实现,有点蛋疼~
分页的功能分为游标式和skip式,很明显游标式并不适用于web端,虽然游标式对数据是非常友好的。在移动端用游标式更加适合。
本地状态管理是graphql的一个很厉害的功能,直接不需要任何数据管理框架,就可以实现数据的各种操作,这是一大亮点!
apollo-graphql也提供了开发者工具,可以在浏览器实时预览当前缓存的所有数据Developer tools
因为服务端使用了Nest.js,所以没有直接用apollo提供的服务器,而是用了Nest框架封装出来适用于Nest框架的graphql包graphql。该包还是提供了很多功能的。
在app.modules.ts中,我们要去初始化graphql模块(无关代码已忽略):
@Module({
imports: [
GraphQLModule.forRoot({
// 指定服务端schema存放的位置
typePaths: ["graphql/schema.graphql"],
// 配置了该选项,可以自动根据代码生成schema
autoSchemaFile: path.join(__dirname, "graphql/schema.graphql"),
buildSchemaOptions: {
},
// 可以自动生成types文件
// definitions: {
// path: path.join(__dirname, "types/graphql.ts"),
// },
debug: true,
playground: true,
context: ({ req }) => ({ req }), // 一定要这里设置req到上下文中,否则在guard中是拿不到这个req参数的
}),
],
controllers: [],
providers: []
})
每个业务目录都会存在这么些文件:
我们在dto目录下定义三种类型文件:xx.args.ts/xx.input.ts/xx.model.ts,分别定义下面三种情况
args对应请求不是Input类型的
input对应请求是Input类型的
model对应请求的响应体
而后在xx.resolver.ts中实现resolve函数,借助于修饰器,比如:
import { Query, Resolver, Args, Mutation } from "@nestjs/graphql"
@Resolver("User")
export class UserResolver {
@Query(returns => [UserItem])
... ...
async userList(): Promise{
return this.userService.getUserList();
}
}
UserItem在这里(user.model.ts)定义:
import { ObjectType, Field, ID, registerEnumType, Int } from "type-graphql"
... ...
@ObjectType()
export class UserItem {
@Field(type => ID, {nullable: true})
_id");true})
username");true})
email");
如此便完成了整个服务端数据流的过程。看着是不是很easy啊?
数据库的model和graphQL定义的model大致相同,二者如何更好地契合在一起?目前社区并没有给出对应的解决方案。
因为graphql只有一个endpoint,所以打印请求就不能像之前restful那样,需要一个与之对应的打印方案
如何结合swagger实现文档级别的呈现?亦或是不需要swagger,而是依靠schema去呈现文档给客户端,值的深入研究,并给出解决方案
graphql号称解决版本的兼容性问题是轻而易举的,目前在本项目中并没有体现到。
至此,三篇关于GraphQL的文章到此结束了,花了很多时间断断续续地学习,希望可以给大家呈现一份不一样地文章,供大家思考。后续我所在的公司网关团队会持续实践GraphQL,争取贡献出更多的解决方案。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/7846.html
摘要:分钟学是一个系列,简单暴力,包学包会。一旦组件挂载后,会自动进行数据请求,前提是客户端提供的和后端的相符。如果回调返回直接不作请求。在组件内进行分页请求之前提到了,这个装饰器为添加了对象,其中有个函数为。 21 分钟学 apollo-client 是一个系列,简单暴力,包学包会。 搭建 Apollo client 端,集成 redux使用 apollo-client 来获取数据修改本...
摘要:本文实例代码什么是是一种面向数据的查询风格。概述前端的开发随着框架全面普及,组件化开发也随之成为大势所趋,各个组件分别管理着各自的状态,组件化给前端仔带来便利的同时也带来了一些烦恼。 showImg(https://segmentfault.com/img/remote/1460000018479542?w=4928&h=3280); 本文首先介绍了 GraphQL,再通过 Mongo...
摘要:学习之道简体中文版通往实战大师之旅掌握最简单,且最实用的教程。前言学习之道这本书使用路线图中的精华部分用于传授,并将其融入一个独具吸引力的真实世界的具体代码实现。完美展现了的优雅。膜拜的学习之道是必读的一本书。 《React 学习之道》The Road to learn React (简体中文版) 通往 React 实战大师之旅:掌握 React 最简单,且最实用的教程。 showIm...
摘要:初始化项目使用初始化项目安装项目结构如下接口所有接口对封装接下来对进行封装,加上中间件实现类似于拦截器的效果。 Graphql尝鲜 在只学习graphql client端知识的过程中,我们常常需要一个graphql ide来提示graphql语法,以及实现graphql的server端来进行练手。graphql社区提供了graphiql让我们使用 graphiql (npm):一个交互...
摘要:区块链最早出现在比特币开元项目中。了不起的社会学实验比特币的诞生年化名中本聪的人发布比特币白皮书,并在年公开了实现代码比特币的意义和价值比特币首次真正从实践意义上实现了安全可靠的去中心化数字货币机制。 区块链最早出现在比特币开元项目中。比特币在诞生和发展过程中,借鉴了来自数字货币、密码学、博弈论、分布式系统、控制论等多个领域的技术成果,作为核心支撑结构的区块链技术大放异彩。 从实体货币...
阅读 1867·2021-10-09 09:44
阅读 3395·2021-09-28 09:35
阅读 1386·2021-09-01 10:31
阅读 1676·2019-08-30 15:55
阅读 2719·2019-08-30 15:54
阅读 941·2019-08-29 17:07
阅读 1388·2019-08-29 15:04
阅读 2013·2019-08-26 13:56