JavaScript：GraphQL Config（配置工具）

graphql-github-io-zh-Hans生态项目与库

GraphQL Config 简介

GraphQL Config 是一个为所有 GraphQL 工具提供统一配置方案的开源项目。它解决了 GraphQL 生态中不同工具（如代码生成器、Linter、编辑器插件等）各自维护独立配置文件的问题，让开发者只需维护一份配置，即可被大多数主流 GraphQL 工具、编辑器及 IDE 共享使用。

核心特性

一份配置，多处使用：统一管理 schema 路径、文档路径、扩展配置等，避免在多个工具间重复配置。
主流工具兼容：已被 GraphQL Code Generator、ESLint 插件、VSCode 插件、GraphiQL 等大量生态工具原生支持。
多格式支持：支持 .graphqlrc（YAML/JSON）、graphql.config.js、graphql.config.ts 以及 package.json 中的 graphql 字段等多种配置写法。
可扩展性强：通过 extensions 字段，可以为特定工具或自定义场景注入额外配置。

安装与使用

安装

bash 复制代码

npm install graphql-config

基础配置示例

在项目根目录创建 .graphqlrc 文件：

yaml 复制代码

# .graphqlrc
schema: "schema/**/*.graphql"
documents: "src/**/*.graphql"
extensions:
  codegen:
    generates:
      ./generated.ts:
        plugins:
          - typescript

或使用 JavaScript 配置文件：

js 复制代码

// graphql.config.js
module.exports = {
  schema: "schema/**/*.graphql",
  documents: "src/**/*.graphql",
  extensions: {
    codegen: {
      generates: {
        "./generated.ts": {
          plugins: ["typescript"],
        },
      },
    },
  },
};

编程方式加载配置

ts 复制代码

import { loadConfig } from "graphql-config";

const config = await loadConfig({
  rootDir: process.cwd(),
});

const schema = await config.getSchema();

配置字段说明

字段	说明
`schema`	指向 GraphQL Schema 的路径或端点，支持通配符与多值。
`documents`	指向包含 GraphQL 查询、变更等操作的文档路径。
`include`	额外需要加载的配置文件路径。
`exclude`	需要忽略的文件路径。
`extensions`	供各类工具读取的自定义扩展配置，键名通常为工具名称。

生态集成

GraphQL Config 已被以下主流工具与平台原生支持：

GraphQL Code Generator：自动读取配置生成代码。
VSCode 扩展（GraphQL.vscode-graphql）：提供自动补全、校验、跳转定义等功能。
ESLint 插件（@graphql-eslint/eslint-plugin）：根据配置自动匹配 schema 和 documents。
GraphQL Playground / GraphiQL：加载配置以提供上下文感知的提示。
Prettier 插件：格式化 GraphQL 代码时自动定位 schema。