graphql config支持多个schema

前言

由于重构或者不同服务等各种需求，一个前端应用需要多个schema ，连接多个不同的graphql后端，下面是如何配置。

1. .graphqlconfig文件

这里是配置webstrom graphql 插件 文档地址： https://jimkyndemeyer.github.io/js-graphql-intellij-plugin/

{
  "projects": {
    "fe": {
      "schemaPath": "schema.graphql",
      "extensions": {
        "endpoints": {
          "Default GraphQL Endpoint": {
            "url": "...", // 这里是第一个graphql后端服务地址
            "introspect": true
          }
        }
      },
      "includes": [
        "src/app/graphql/{yara,snort}/*.graphql" // 这里是第一个graphql后端服务地址对应的graphql 文件目录
      ]
    },
    "antiy-feature-flow-fe-bff": {
      "schemaPath": "schema-bff.graphql",
      "extensions": {
        "endpoints": {
          "url": "....", // 这里是第二个graphql后端服务地址
          "introspect": true
        }
      },
      "includes": [
        "src/app/graphql/avlfd/*.graphql" // 这里是第二个graphql后端服务地址对应的graphql 文件目录
      ]
    }
  }
}

2. codegen.yaml 文件

这里是配置GraphQL Code Generator 地址： https://graphql-code-generator.com/docs/getting-started/index

generates:
  src/app/graphql/generated/graphql.ts: # 这里是第一个graphql后端服务地址对应的graphql，生成的代码目录
    schema: "./schema.graphql"  # 这里是第一个graphql后端服务地址对应schema文件
    documents: "src/**/{snort,yara}/*.graphql"
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"
#      - "typescript-graphql-files-modules"
#      - "typescript-document-nodes"
#      - "fragment-matcher"
  src/app/graphql/generated/graphql-bff.ts:  # 这里是第二个graphql后端服务地址对应的graphql，生成的代码目录
    schema: "./schema-bff.graphql"   # 这里是第二个graphql后端服务地址对应schema文件
    documents: "src/**/avlfd/*.graphql"
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"
  #      - "typescript-graphql-files-modules"
  #      - "typescript-document-nodes"
  #      - "fragment-matcher"

最后

最后生成的效果 代码目录如下