GraphQL

Tags
webserver
Created
May 25, 2021 7:40 AM

/ / Nest.js 的 x.controller.ts 相当于 resolvers,x.service.ts 相当于 services(可以共享),x.entity.ts 是数据库 Model

https://www.moesif.com/blog/api-guide/graphql-best-practices-resources-and-design-patterns/

作用:

  • 响应裁剪
  • 自动拼接 // 只需要实现字段的 resolver
  • 强类型,自文档 // schema

版本控制:提供新的 schame 类型

https://graphql.org/learn/best-practices/

graphql 对象 <-> graphql 自省表示 <-> qraphql 查询字符串转换:https://www.apollographql.com/blog/backend/schema-design/three-ways-to-represent-your-graphql-schema/

服务端 scheme 生成 d.ts / 待实现类:https://github.com/dotansimha/graphql-code-generator

自动生成 scheme:https://github.com/MichalLytek/type-graphql

客户端 gql 查询 + scheme 生成响应的 d.ts:https://github.com/apollographql/apollo-tooling#apollo-clientcodegen-output

https://www.apollographql.com/blog/tooling/apollo-codegen/typescript-graphql-code-generator-generate-graphql-types/

web 前端使用 gql 查询语言进行 POST 请求

web 服务器 graphQL 中间件解析请求,根据 scheme 定义,执行回调

https://graphql.org/graphql-js/

Query,Mutation:https://graphql.org/learn/queries/

https://graphql.org/learn/schema/ 定义输入(回调的参数)输出(回调中的返回值)类型

最后根据查询 gql (DocumentNode)裁剪响应给前端

前端:https://www.apollographql.com/docs/react/

// ApolloClient.query(gql) 类似 RESTful 请求 ,封装成方法,用 useEffect 调用,结果存全局数据管理器中

// 也可以直接使用 Hooks 来获取数据

Subscription 使用 websocket: https://www.5axxw.com/wiki/content/f19312

express-graphql + graphql-ws: https://shammelburg.medium.com/subscriptions-with-graphql-dfa8279af050

https://the-guild.dev/blog/subscriptions-and-live-queries-real-time-with-graphql

Debug GraphQL: https://altair.sirmuel.design/

SuperMade with Super