請問題

使用TypeScript编写GraphQL会使类型定义变得冗杂。

• graphqlのschemaで全て定義してるのに

使う側のTypescriptで再度同じ定義する必要がある（variablesだったり、戻り値のオブジェクト定義だったり）

尝试从终端的模式和实际使用的GraphQL查询中自动生成类型定义的方法是：将其自动转换为类型定义。

GraphQL代码生成

必要的东西 (bì de xi)

1. 模式

– GraphQL的端点（用于连接的apollo-client的URL）

– 使用GraphQL Introspection JSON的模式文件

– 模式文件中的任意一个

使用实际的GraphQL查询文件

参考链接：https://graphql-code-generator.com/docs/getting-started/documents-field
（通常使用const query = gql… 定义的内容需要写入文件）
即使不写入文件，也可以配置documents: src/**/*.{ts,tsx}以在代码中读取GraphQL查询。
实际上，将使用生成的useHook，这样我们就不需要在代码中编写查询，但我认为最终还是需要将查询写入单独的文件中…

query UserInfo{
  name
  age
}

如何开始

按照文件的指示试了一下，但实际上有些地方出现了错误，所以我根据以下的理解试了试。

首先需要安装所需的软件包。

$ yarn add graphql
$ yarn add -D @graphql-codegen/cli

在此之后，可以使用以下命令自动生成codegen.yml，但是由于自动生成的内容实际上不能正常运行，因此请跳过（当前版本为v1.0.7）。

$ graphql-codegen init # やらない

自己创建codegen.yml。

overwrite: true # 出力するファイルを毎度上書きする
schema: "http://localhost:3000/graphql" # 自分のendpoint
documents: "**/*.graphql" # クエリファイル 拡張子は変えても良い
generates:
  src/generated/graphql.ts: # 出力するファイル名 
                            # 出力先、ファイル名は任意だが、拡張子はtsまたはtsx
    plugins: # 必要となるプラグイン
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      # 下の3つはtypescript-react-apolloのオプション
      withHOC: false # HOCは要らないので
      withComponent: false # falseなので出力ファイル拡張子が.tsでもいい。
                           # このオプションを設定しないとデフォルトtrueなので、.tsx拡張子にしろとエラーが出る
      withHooks: true # 上のdocumentsの設定があればこれでhookが自動生成される

以下是参考材料：

• https://graphql-code-generator.com/docs/getting-started/codegen-config

https://graphql-code-generator.com/docs/getting-started/schema-field

URL
GraphQL Introspection JSON https://graphql.org/learn/introspection/

graphql schema ファイル https://graphql.org/learn/schema/

https://graphql-code-generator.com/docs/getting-started/documents-field
https://graphql-code-generator.com/docs/plugins/typescript
https://graphql-code-generator.com/docs/plugins/typescript-operations
https://graphql-code-generator.com/docs/plugins/typescript-react-apollo

由于这些插件列表中提到的软件包尚未安装，所以需要进行安装。

yarn add -D @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo

将查询文件放置在 codegen.yml 文件中的 documents 路径中（请注意，如果没有此查询文件，则即使 withHooks:true 也不会输出 hook）。

query UserInfo{
  name
  age
}

为了使yarn generate更容易进行，最后添加脚本。

  "scripts": {
    "generate": "graphql-codegen --config codegen.yml"
  }

然后执行

yarn generate

这样一来，将生成一个`src/generated/graphql.ts`文件，
这样就不再需要在TypeScript的代码中定义类型了（只需要导入即可）。
此外，还会根据在`documents`中编写的每个查询生成相应的`useHook`，
因此，可以轻松地使用graphql，如下所示。

例子的运用

import { useGeneratedQuery } from "./src/generated/graphql"

...
...

export default () => {
  const query = useGeneratedQuery()

  if(query.loading){
    return 
  }

  return (
    <div>{query.data.name}</div>
  )
}

默认情况下，我们使用react-apollo-hooks来处理该hook（hooksImportFrom （字符串，默认值：react-apollo-hooks））。因此，在实际使用时需要注意。

$ yarn add react-apollo-hooks

需要