前言
由于重构或者不同服务等各种需求,一个前端应用需要多个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"
最后
最后生成的效果 代码目录如下