前言
由于重构或者不同服务等各种需求，一个前端应用需要多个schema ，连接多个不同的graphql后端，下面是如何配置。
1. .graphqlconfig文件
这里是配置webstrom graphql 插件 文档地址： https://jimkyndemeyer.github.io/js-graphql-intellij-plugin/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | { "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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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" |
最后
最后生成的效果 代码目录如下
