WHAT - graphql 系列（二）- graphql-codegen

前言

graphql-codegen 是一个工具，用于生成 TypeScript 类型、查询和其他 GraphQL 相关代码。它可以大大简化 GraphQL 开发过程，提高开发效率和代码一致性。

以下是如何使用 graphql-codegen 来为你的项目生成 TypeScript 类型和其他代码的一些基本步骤和示例配置。

1. 安装 graphql-codegen

首先，你需要安装 graphql-codegen 及其相关依赖。你可以使用以下命令来安装：

npm install @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo graphql

或者使用 yarn：

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

2. 创建 codegen.yml 配置文件

在项目根目录下创建一个 codegen.yml 文件，配置你的生成选项。以下是一个示例配置：

schema:
  - 'https://your-graphql-endpoint.com/graphql' # GraphQL API schema endpoint
documents: './src/**/*.graphql' # Path to your GraphQL queries and mutations
generates:
  ./src/generated/graphql.ts: # Path to generate TypeScript types
    plugins:
      - 'typescript' # Generates TypeScript types
      - 'typescript-operations' # Generates TypeScript types for operations (queries, mutations)
      - 'typescript-react-apollo' # Generates React Apollo hooks

3. 添加 GraphQL 查询和突变文件

确保你的项目中有 .graphql 文件，这些文件包含了你的 GraphQL 查询和突变。例如，你可以在 src/queries 目录下创建 getUser.graphql 文件：

# src/queries/getUser.graphql
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

4. 运行 Codegen

在 package.json 文件中添加一个 codegen 脚本来运行 graphql-codegen：

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

然后，运行以下命令来生成代码：

npm run codegen

或者使用 yarn：

yarn codegen

5. 使用生成的代码

生成的 TypeScript 类型和 React Apollo hooks 会在 src/generated/graphql.ts 文件中。你可以在你的 React 组件中使用这些生成的 hooks。例如：

import React from 'react';
import { useGetUserQuery } from './generated/graphql';

const UserProfile: React.FC<{ userId: string }> = ({ userId }) => {
  const { data, loading, error } = useGetUserQuery({
    variables: { id: userId }
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data?.user.name}</h1>
      <p>{data?.user.email}</p>
    </div>
  );
};

export default UserProfile;

6. 配置其他选项

你可以根据需要配置 graphql-codegen 的其他选项，如自定义生成代码的格式、启用缓存等。详细的配置选项可以参考 GraphQL Code Generator 文档.

总结

graphql-codegen 可以极大地提高 GraphQL 项目的开发效率，通过自动生成类型和 hooks，帮助你减少重复代码和类型错误。你可以根据项目的实际需求和 GraphQL 服务的复杂性调整配置和生成的内容。