Skip to content
Linbudu's Blog

【outdated】GraphQL 技术备忘

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, 用于快速搭建鉴权层.

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