【outdated】GraphQL 技术备忘

2021-04-22 — 1 min read

前言

这段时间一直在给 nx 写插件,感觉我老是定目标定的雄心勃勃,真正开始实现时却懒懒散散. 比如第一期项目规划了 11 个插件包,目前只有两个处在能用的状态,其他压根还没开始. 主要原因还是涉及的知识确实有点多,每个插件包的集成方式都不同 blabla...扯远了.

然后担心自己的看家本领 GraphQL 哪天忘光了, 特意来整理一篇相关的技术备忘. 大部分是我曾经使用过的, 也有小部分一直感兴趣但是没开始学的.

技术栈

TypeGraphQL 这个没得说, 最爱!
Prisma, 其实不是 GraphQL 专属, 也可以用在 REST API, 但挺契合 GraphQL 的, 因为内置了 dataloader! 而且确实很好玩.
GraphQL-Code-Generator, 神器, 从 GraphQL Schema 生成 TS 类型定义/Apollo-Client 的 useQuery useMutation 函数等, 甚至可以生成 TypeGraphQL 的 Resolver 定义. 这些能力都得益于它的插件体系, 常用插件如
- @graphql-codegen/typescript 生成基础的 TS 类型定义, 这一插件是其他 TS 类型插件的基础, 如@graphql-codegen/typescript-operations @graphql-codegen/typescript-resolvers. 同时, 这一插件的类型将是在客户端/服务端通用的.
  通用意味着它不会导入 node 相关的模块, 如 TypeGraphQL 插件会导入 TypeGraphQL, 而 TypeGraphQL 只能在 node 环境下使用.
- @graphql-codegen/typescript-operations 供客户端使用, 这个插件通过 GraphQL Schema 及 Operations 生成与 Operations 对应的类型, 需要和 TS 插件一同使用.
- @graphql-codegen/typescript-resolvers 生成 GraphQL Resolver 的类型定义, 包括 parent/args/inputs/return/context 等. 注意, 是从 Schema 生成 Resolver 类型定义, 然后引入供真实的 resolver 使用, 来确保全链路的类型安全. 这个插件还可以很灵活的引入你的 DB Model,Context Type 等.
```
1schema: schema.graphql
2generates:
3  ./resolvers-types.ts:
4    config:
5      contextType: models#MyContextType
6      mappers:
7        User: ./models#UserModel
8        Profile: ./models#UserProfile
9    plugins:
10      - typescript
11      - typescript-resolvers
```
  实例文章
- @graphql-codegen/typed-document-node, 为DocumentNode 生成类型定义. DocumentNode的概念之前只简单接触过, 举例来说 graphql-tag 的gql方法就能够把查询语句转为DocumentNode类型.
  作者写了相关的发展历程:
  - 最开始, 需要自己手动把 query 语句中的字段及类型添加到client.query<{//...}>中
  - 有了 CodeGen 以后, 可以直接从生成的类型中引入 XXXQuery, XXXQueryVars, 然后传给client.query<XXXQuery, XXXQueryVars>, 看起来简单多了, 但是这样我们还是需要每次手动指定类型.
  - CodeGen 的 Apollo 插件来了, 现在生成的 useXXXQuery 已经附带了相关类型, 直接调用就好了.
  - 然后就到了TypedDocumentNode, 因为有时候我们确实不想再包一层 hooks 啊啥的, 现在我们只需要预编译DocumentNode, 然后加上 TS 类型就行了.
- @graphql-codegen/typescript-react-apollo 与 @graphql-codegen/typescript-apollo-client-helpers, 生成 ApolloClient 集成代码, 不做多介绍.
- @graphql-codegen/typescript-document-nodes, 从 GraphQL 文件生成 TS 文件, 基于 GraphQL-Tag.
- @graphql-codegen/typescript-type-graphql, 类似于基础 TS 插件, 但是会生成可供 TypeGraphQL 直接使用的类型定义, 比如 interface 会被生成为 class, 然后添加上@ObjectType 啊@Field 啊这种装饰器.
- @graphql-codegen/add 添加内容到生成文件中.
- @graphql-codegen/schema-ast 以 AST 的形式输出合并的 Schema
- @graphql-codegen/fragment-matcher, 这个一直没太搞懂, 见apollo 文档
- @graphql-codegen/introspection, 生成自省文件, 通常在 json 字段中.
- @graphql-codegen/time 添加生成时间
- @graphql-codegen/named-operations-object 输出所有你可用的 GraphQL Pperations 与 Fragments, 常用于refetch的类型验证.
GenQL, 类似 Prisma 的思路, 从一个 Schema 生成 client, 导入这个 client 就能获得全链路的类型安全. GenQL 还提供了链式操作/多 clients 等.
@2fd/graphqldoc, 从 GraphQL Schema 生成静态文档.
@saeris/apollo-server-vercel, 直接白嫖 Vercel Functions, 可以很容易的接入各种 GraphQL 工具.
GraphQL-Voyager, 从 GraphQL Schema 生成可视化的界面, 展示各个类型之间的联系等.
ApolloGraphQL, 略过.
Gqless, 号称不需要写查询的 GraphQL Client, 还没体验过
GraphQL-Crunch, 减少 GraphQL 响应的体积
Hasura Engine 与 PostGraphile, 简单介绍不完, 去官网看吧
GraphQL-Request, Prisma 团队的作品, 非常迷你的一个 GraphQL 请求库, 适用于双端.
GraphQL Tools, 提供了各种方法让你为所欲为..., 目前只用到 Directives 相关的方法.
GraphQL Shield, 用于快速搭建鉴权层.

暂时应该就这些了... 其他的想到再补充!