阿波罗客户端:具有@client查询字段的codegen类型记录
抱歉，如果这涉及到一点，但我真的试图结束最后一英里，能够使用阿波罗客户端的本地和服务器状态，自动打字到处。也就是说，我有一个这样的疑问：
query NavigationBarQuery($userId: Int, $portfolioCompanyId: Int!) {
user(id: $userId) {
id
firstName
lastName
company {
... on CompanyInterface {
companyType
}
}
}
}它由我的NavigationBar组件导入，如下所示：
import { NavigationBarQuery, NavigationBarQueryVariables } from '../../../graphql/generated/NavigationBarQuery';
import NAVIGATION_BAR_QUERY from '../../../graphql/NavigationBarQuery.graphql';
const NavigationBar = (vars: NavigationBarQueryVariables) => (
<Query query={NAVIGATION_BAR_QUERY} variables={vars}>
{({ loading, error, data, client }: QueryResult<INavigationBarClientQuery>) => {
// etc.生成是使用本地模式文件(从Graphene转储)执行的，如下所示：
apollo client:codegen --localSchemaFile ./build/schema.json --includes './src/graphql/**' --target typescript这很好，我得到了TypeScript类型和所有东西。
但是，我想包含一些本地州，并提供如下查询：
query NavigationBarQuery($userId: Int, $portfolioCompanyId: Int!) {
user(id: $userId) {
id
firstName
lastName
company {
... on CompanyInterface {
companyType
}
}
}
showNavbarUserInfo @client
}如果我绕过TypeScript，这个查询工作得很好，但是当我试图为它生成类型记录定义时，生成脚本会发出这个错误：
.../client/src/graphql/NavigationBarQuery.graphql: Cannot query field "showNavbarUserInfo" on type "Query".
{ ToolError: Validation of GraphQL query document failed
at Object.validateQueryDocument (/Users/gavin/.config/yarn/global/node_modules/apollo-language-server/lib/errors/validation.js:32:19)
at Object.generate [as default] (/Users/gavin/.config/yarn/global/node_modules/apollo/lib/generate.js:19:18)
at write (/Users/gavin/.config/yarn/global/node_modules/apollo/lib/commands/client/codegen.js:64:54)
at Task.task (/Users/gavin/.config/yarn/global/node_modules/apollo/lib/commands/client/codegen.js:83:46) name: 'ToolError' }如果有什么办法的话，解决办法是什么？像往常一样，寻找例子。
回答 3
Stack Overflow用户
发布于 2020-12-26 17:20:28
在这里提供一个更新的答案，因为@cnp的答案缺少示例，并且包含断开的链接。
我的示例使用了新的阿波罗CLI (https://github.com/apollographql/apollo-tooling)和npx，尽管它也可以在本地安装，无需npx命令即可使用。
您需要通过添加一个新的SDL文件来扩展只限于本地字段的架构。使用来自原始问题的示例查询，您将添加一个具有以下内容的文件(例如schema.graphql)：
extend type NavigationBar {
showNavbarUserInfo: Boolean!
}可选:如果您使用VS代码的阿波罗GraphQL扩展，现在是让它知道在哪里找到新的SDL文件的好时机，方法是在apollo.config.js中正确地将它添加到includes中
module.exports = {
client: {
includes: ['./schema.graphql'],
},
};现在，在查询中包含showNavbarUserInfo @client本地字段，然后运行代码gen命令以包含原始schema.json文件和新的schema.graphql文件：
npx apollo codegen:generate --localSchemaFile=schema.json,schema.graphql --target=typescript --includes=src/**/*.tsx --tagName=gql --addTypename --globalTypesFile=src/types/global-types.ts typesStack Overflow用户
发布于 2021-02-20 06:25:29
我刚经历过这件事，希望这能帮到别人。如果你的名字实际上是“某人”，而你恰好是在寻找这个信息，这完全是给你的！
我的设置：
我有两个模式文件。
- 从我的GraphQL服务器上拉下来的
- 本地架构文件，包含用于本地存储值的扩展属性。
依赖关系
@apollo/client": "^3.3.11"@apollo/react-hooks": "^4.0.0"
DevDependencies
@graphql-codegen/add": "^2.0.2"@graphql-codegen/cli": "^1.20.1"@graphql-codegen/typescript-apollo-client-helpers": "^1.1.2"@graphql-codegen/typescript-operations": "^1.17.14"@graphql-codegen/typescript-react-apollo": "^2.2.1"
- 为了更好地使用，我建议创建一个
codegen.yml文件(除非您已经看过很多黑客电影，并且认为使用控制台处理所有这些选项更酷。)或者如果你只想..。我不是在评判。)
#./codegen.yml
# See: https://graphql-code-generator.com/docs/getting-started/codegen-config
overwrite: true
schema:
- "https://my-dev-server.com/v1/graphql":
headers:
'Authorization': 'Bearer [TOKEN]'
generates:
graphql/generated/generated.ts:
# This is the defined client side schema file. It will first load the root schema defined above, and then load this (see: https://graphql-code-generator.com/docs/getting-started/schema-field#local-graphql-files)
schema: graphql/client-schema.graphql
# This is where the gql queries/subscripts/mutations reside
documents: "graphql/queries/**/*.ts"
plugins:
- add:
content: /* eslint-disable */
- typescript
- typescript-operations
- typescript-react-apollo
config:
withHooks: true- 设置本地架构文件。按您喜欢的方式调用它，只需确保您在
codegen.yml中正确设置了值。我打电话给我的client-schema.graphql，因为我很聪明.
#./client-schema.graphql
# see: https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/
directive @client on FIELD
type LocalStateType {
companyId: String
contactId: String
}
extend type Users {
localState: LocalStateType!
}- 一旦上面的内容到位，并且取决于您的IDE，intellisense应该开始收集更改。您需要对查询使用
@client指令；如下所示：
export const QUERY_USER_BY_ID = gql`
query getUserDetails($Id: uuid!) {
Users_by_pk(Id: $Id) {
EmailAddress
Id
localState @client {
companyId
contactId
}
}
}
`;- 运行命令生成货物：
npx graphql-codegen --config codegen.yml
键注
- 我注意到，如果您不正确地设置客户端(
client-schema.graphql)文件的路径，则不会显示错误。但是，如果没有在输出中看到引用@client数据的生成数据，您就会知道这是错误的。
参考文献：
Stack Overflow用户
发布于 2019-04-22 05:07:09
为了使其工作，您需要使用客户端本地状态类型定义一个.graphql SDL文件。然后，codegen特性将看到这个文件，并将其与您的主模式合并。有关更多信息，请参见https://github.com/apollographql/apollo-tooling/issues/949#issuecomment-459907307，下面是一个例子：https://github.com/apollographql/fullstack-tutorial/blob/master/final/client/src/resolvers.js#L4。注意extends Query的使用。
https://stackoverflow.com/questions/53839749
复制相似问题
腾讯云开发者
