组件化开发：GraphQL To 可复用React组件 — Numio

为 Document 面板中的每个操作生成带类型的数据获取代码：React Apollo hooks（默认）、Apollo Angular 服务、Stencil Apollo 组件或 urql hooks，同时生成 TypeScript 的 schema 类型和操作类型。

根据刚写好的查询，直接为 Apollo Client React 应用得到现成的 useXQuery 和 useXLazyQuery hooks。

GraphQL Schema

Document

适用场景

根据刚写好的查询，直接为 Apollo Client React 应用得到现成的 useXQuery 和 useXLazyQuery hooks。
在选定客户端之前，对比同一操作写成 Apollo Angular 可注入服务和 urql hook 分别是什么样子。

使用方法

将 schema 粘贴到 GraphQL Schema 编辑器，将具名的 query、mutation 或 subscription 粘贴到 Document 编辑器。
在输出下拉菜单中选择目标：TypeScript React Apollo、TypeScript Apollo Angular、TypeScript Stencil Apollo 或 TypeScript urql。
将生成的 document 常量（例如 GetUserDocument）以及 hooks、服务或组件复制到项目中。

GraphQL schema + document

# GraphQL Schema editor
type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  name: String
  tags: [String!]!
}

# Document editor
query GetUser($id: ID!) {
  user(id: $id) { id name }
}

TypeScript 组件与 hooks

import { gql } from "@apollo/client"
import * as Apollo from "@apollo/client"
…
export const GetUserDocument = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
`
…
export function useGetUserQuery(
  baseOptions: Apollo.QueryHookOptions<GetUserQuery, GetUserQueryVariables>,
) {
  const options = { ...defaultOptions, ...baseOptions }
  return Apollo.useQuery<GetUserQuery, GetUserQueryVariables>(
    GetUserDocument,
    options,
  )
}
…

功能与限制

每个选项都会先运行 @graphql-codegen/typescript 和 typescript-operations，因此输出中也包含完整的 schema 类型和操作类型（上例中已省略）。

React Apollo 从 @apollo/client 导入 gql 和 hooks；urql 和 Stencil 从 graphql-tag 导入 gql；Apollo Angular 生成 GetUserGQL 这样的 @Injectable 类。

Document 编辑器中没有有效操作时，不会生成 hooks 或组件；与 schema 不匹配的 document 会被跳过，并输出一条警告注释。生成在浏览器的 Web Worker 中运行。

FAQ

为什么 useGetUserQuery 的 baseOptions 是必填的？

该查询有一个非空变量（$id: ID!），因此生成的 hook 要求传入包含 variables 的选项。没有必填变量的查询，其 baseOptions 参数是可选的。

React Apollo 输出是否包含 lazy query hooks？

包含。每个查询都会生成 useXQuery 和 useXLazyQuery，以及 GetUserQueryHookResult、GetUserQueryResult 等结果类型别名。mutation 会生成 useXMutation hook。

可以修改 withHooks 或导入来源等插件选项吗？

不可以。页面以默认配置运行各插件，只提供输出目标下拉菜单。

规范与参考资料

GraphQL Code Generator: typescript-react-apollo