TypeScript中Apollo useQuery的data为any引发ESLint错误的解决方法

要解决TypeScript环境下Apollo useQuery返回data为any类型的问题，有两种实用方案，按需选择：

方案一：手动定义查询类型 #

直接为useQuery指定泛型参数，明确查询返回的数据结构和变量类型：

1. 定义匹配查询的类型结构

// 根据你的实际返回字段补充完整结构
interface ProducerOrgSteward {
  id: string;
  name: string;
  // 其他返回字段...
}

interface ListProducerOrgStewardsData {
  listProducerOrgStewards: ProducerOrgSteward[];
}

// 定义查询变量的类型（$user为可选参数，所以加?）
interface ListProducerOrgStewardsVariables {
  user?: string;
}

2. 在useQuery中传入泛型参数

const { loading, data, error } = useQuery<
  ListProducerOrgStewardsData,
  ListProducerOrgStewardsVariables
>(listProducerOrgStewards, {
  fetchPolicy: 'cache-and-network',
});

此时TypeScript会正确推断data的类型，ESLint的any类型错误会自动消失。

方案二：用GraphQL Code Generator自动生成类型 #

对于大型项目，手动维护类型易出错，推荐用代码生成工具自动同步GraphQL Schema与TypeScript类型：

1. 安装依赖

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-apollo-client-helpers

2. 配置codegen.ts文件

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

const config: CodegenConfig = {
  schema: './path/to/your/schema.graphql', // 或你的GraphQL API地址
  documents: './src/**/*.graphql', // 匹配项目中所有GraphQL查询文件
  generates: {
    './src/generated/graphql.ts': {
      plugins: ['typescript', 'typescript-apollo-client-helpers']
    }
  }
};

export default config;

3. 添加生成脚本并执行
   在package.json中添加：

{
  "scripts": {
    "codegen": "graphql-codegen"
  }
}

运行npm run codegen，自动生成包含查询类型和封装hooks的文件。

4. 使用生成的hooks
   直接调用自动生成的查询钩子，无需手动指定类型：

import { useListProducerOrgStewardsQuery } from './src/generated/graphql';

const { loading, data, error } = useListProducerOrgStewardsQuery({
  fetchPolicy: 'cache-and-network',
});

这种方式能保证类型与GraphQL Schema完全同步，减少手动维护成本。

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