React Native TypeScript项目中使用Apollo Client遇类型错误求助

方案一：用GraphQL Code Generator自动生成类型（推荐） #

这是官方推荐的静态类型方案，能自动为你的GraphQL操作生成强类型的TypedDocumentNode，彻底解决类型问题。

1. 安装代码生成依赖

npm install --save-dev @graphql-codegen/cli @graphql-codegen/client-preset

2. 初始化配置文件
   运行以下命令，按照提示完成初始化（选择client preset，指定API地址或本地schema文件）：

npx graphql-code-generator init

3. 配置codegen.ts（示例）
   确保配置文件正确指向你的GraphQL schema和包含查询/mutation的文件：

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

const config: CodegenConfig = {
  schema: 'https://your-graphql-api-endpoint', // 替换为你的API地址或本地schema路径
  documents: ['./src/**/*.{ts,tsx}'], // 扫描项目中所有包含GraphQL操作的文件
  generates: {
    './src/gql/': {
      preset: 'client',
      plugins: [],
    },
  },
};

export default config;

4. 生成类型文件
   package.json会自动添加codegen脚本，运行它：

npm run codegen

5. 使用生成的类型
   生成的文件中会包含与你的mutation对应的RegisterDocument，直接替换手动定义的registerMutation：

import { useMutation } from '@apollo/client';
import { RegisterDocument } from './src/gql/graphql';

// 组件内使用
const [register] = useMutation(RegisterDocument);

方案二：手动指定TypedDocumentNode类型（临时方案） #

如果暂时不想用代码生成工具，可以手动为gql返回值指定类型：

1. 定义变量和返回类型

// mutation接收的变量类型
type RegisterVariables = {
  email: string;
  password: string;
  companyName?: string;
};

// mutation返回的数据类型
type RegisterResponse = {
  register: {
    name: string;
    email: string;
    profileImage: string;
  };
};

2. 为gql结果指定TypedDocumentNode类型

import { gql, useMutation, TypedDocumentNode } from '@apollo/client';

export const registerMutation: TypedDocumentNode<RegisterResponse, RegisterVariables> = gql(`
  mutation Register($email: String!, $password: String!, $companyName: String) {
    register(data:{email: $email, password: $password, companyName: $companyName}){
      name
      email
      profileImage
    }
  }
`);

3. 正常使用useMutation

const [register] = useMutation(registerMutation);

问题原因 #

默认情况下，未配置类型生成的gql函数返回unknown类型，而useMutation要求传入的参数必须是DocumentNode或TypedDocumentNode类型，因此出现类型不兼容的报错。通过代码生成或手动指定类型，就能让TypeScript正确识别GraphQL操作的类型信息。

内容的提问来源于stack exchange，提问作者Márk Göbölös