如何合并GraphQL Codegen输出文件并识别TS/TSX中的gql查询？

问题1：合并两个代码生成配置到同一个.ts文件 #

可以合并到同一个文件中，只需将两组插件和配置整合到同一个生成目标下。部分配置参数仅对应特定插件（比如rawRequest属于typescript-graphql-request，reactApolloVersion、withHooks属于typescript-react-apollo），这些参数可以共存不会冲突。

示例合并后的配置：

'http://localhost:8080/v1/graphql':
  headers:
    secret: "devsecret"
'http://localhost:3000/api/auth':
  headers:
    secret: "devsecret"
documents: './**/*.graphql'
overwrite: true
generates:
  generated/graphql-combined.ts:
    config:
      rawRequest: true
      reactApolloVersion: 3
      withHooks: true
      withComponent: false
      withHOC: false
      skipTypename: true
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-graphql-request'
      - 'typescript-react-apollo'
      - fragment-matcher:
          apolloClientVersion: 3
          module: es2015
          useExplicitTyping: false

合并后，该文件会同时包含graphql-request的SDK和react-apollo的hooks类型与实现。

问题2：扫描.ts/.tsx文件中的gql标签查询 #

你的documents路径配置有误（少了文件名前的星号），同时需要安装专用插件来提取.ts/.tsx中的gql模板字符串，具体步骤如下：

1. 安装提取插件：

npm install -D @graphql-codegen/graphql-tag-pluck
# 或使用 yarn：yarn add -D @graphql-codegen/graphql-tag-pluck

2. 修改配置文件中的documents路径，并添加可选的标签识别配置：

documents: 
  - './**/*.graphql'
  - './**/*.ts'
  - './**/*.tsx'
# 可选：指定gql标签的导入来源，确保工具能正确识别
pluckConfig:
  modules:
    - { name: '@apollo/client', identifier: 'gql' }
    - { name: 'graphql-tag', identifier: 'gql' }

调整后，代码生成工具就能正确扫描.ts/.tsx文件中用gql标签编写的查询和变更了。

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