如何获取GraphQL查询结果对象的TypeScript类型，无需手动定义

要实现无需手动定义类型或使用any就能获取GraphQL查询对应的TypeScript类型，最常用的方案是使用GraphQL Code Generator，它能根据你的查询和GraphQL Schema自动生成类型定义。以下是具体步骤：

1. 安装必要依赖 #

通过npm或yarn安装代码生成器及相关插件：

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations
# 或使用yarn
yarn add --dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations

2. 配置代码生成器 #

在项目根目录创建codegen.ts配置文件，指定Schema来源、查询文件路径和类型输出位置：

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  // 替换为你的GraphQL Schema地址（远程端点或本地schema文件路径）
  schema: 'https://rickandmortyapi.com/graphql',
  // 匹配项目中所有包含gql查询的文件
  documents: ['./src/**/*.ts', './src/**/*.tsx'],
  generates: {
    // 指定类型文件输出路径
    './src/generated/graphql.ts': {
      plugins: ['typescript', 'typescript-operations'],
    },
  },
};

export default config;

3. 添加生成脚本并执行 #

在package.json的scripts中添加一条命令：

{
  "scripts": {
    "codegen": "graphql-codegen --config codegen.ts"
  }
}

然后运行命令生成类型文件：

npm run codegen
# 或
yarn codegen

4. 为查询命名并使用自动生成的类型 #

首先给你的查询添加一个明确的名称（方便生成对应的类型名）：

const GET_CHARACTERS = gql`
    query GetCharacters {
        characters{
                results{
                id
                name
                image
                gender
            }
        }
    }
`

生成完成后，你可以直接导入生成的类型（比如GetCharactersQuery），在使用useQuery时指定类型：

import { useQuery } from '@apollo/client';
import { GET_CHARACTERS } from './your-query-file';
import { GetCharactersQuery } from './generated/graphql';

const CharactersList = () => {
  const { data, loading, error } = useQuery<GetCharactersQuery>(GET_CHARACTERS);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error.message}</div>;

  // 此时data会自动拥有完整的类型提示，无需手动定义
  return (
    <div>
      {data?.characters?.results?.map(character => (
        <div key={character.id}>
          <img src={character.image} alt={character.name} />
          <h3>{character.name}</h3>
          <p>性别：{character.gender}</p>
        </div>
      ))}
    </div>
  );
};

每次修改查询或Schema后，重新运行npm run codegen就能自动更新类型定义，确保类型与查询、Schema始终同步。

内容的提问来源于stack exchange，提问作者Krutik Aghera