带插值的 graphql-codegen 动态字段

Question

带插值的 graphql-codegen 动态字段

in3*_*pi2 5 typescript graphql angular graphql-tag graphql-codegen

我正在使用graphql-codegen从 graphql 模式生成打字稿类型。我正在尝试创建一个带有动态字段的片段。

\n

模式.ts

\n

这是由生成的类型graphql-codegen。

\n

/** User Type */\nexport type UserType = {\n  __typename?: \'UserType\';\n  id: Scalars[\'ID\'];\n  avatar: Scalars[\'String\'];\n  email: Scalars[\'String\'];\n  name: Scalars[\'String\'];\n  showPostsInFeed: Scalars[\'Boolean\'];\n  username: Scalars[\'String\'];\n};\n

Run Code Online (Sandbox Code Playgroud)\n

用户模型.ts

\n

我在整个应用程序中使用这些接口来实现验证和一致性。

\n

export interface IUserBase {\n  id: string;\n  avatar: string;\n  name: string;\n  username: string;\n}\n\nexport interface IUserPost extends IUserBase {\n  showPostsInFeed: boolean;\n}\n\nexport interface IUserProfile extends IUserBase, IUserPost {\n  email: string;\n}\n\n

Run Code Online (Sandbox Code Playgroud)\n

显示.ts

\n

这是用于生成的文件。在这里，我想使用我的现有字段IUserPost和IUserProfile接口制作一个带有动态字段的片段，以便重用这些字段并避免在片段中一一重复它们。

\n

import gql from \'graphql-tag\';\nimport { keys } from \'ts-transformer-keys\';\n\nimport { IUserProfile, IUserPost } from \'../../user.model\';\n\nconst keysUserPofile = keys<IUserProfile>();  //Get all interface keys\nconst keysUserPost = keys<IUserPost>();  //Get all interface keys\n\n//Fragments\nexport const fragments = {\n  userProfile: gql`\n    fragment UserProfile on UserType {\n      ${keysUserPofile.join(\'\\n\')}    //Interpolation\n    }\n  `,\n  userPost: gql`\n    fragment UserPost on UserType {\n      ${keysUserPost.join(\'\\n\')}    //Interpolation\n    }\n  `\n};\n\n//Queries\nexport const userProfileQuery = gql`\n    query UserProfileQuery($id: String!) {\n      showUser(id: $id) {\n        ...UserProfile\n      }\n    }\n`;\n\nexport const userPostQuery = gql`\n    query UserPostQuery($id: String!) {\n      showUser(id: $id) {\n        ...UserPost\n      }\n    }\n`;\n

Run Code Online (Sandbox Code Playgroud)\n

当我尝试使用插值传递这些字段时，出现以下错误：

\n

$ npm run generate\n\n> gogofans-ui@0.0.0 generate C:\\Development\\GogoFans\\gogofans-ui\n> graphql-codegen --config codegen.yml\n\n  \xe2\x88\x9a Parse configuration\n  > Generate outputs\n    > Generate src/app/core/graphql/schema.ts\n      \xe2\x88\x9a Load GraphQL schemas\n      \xc3\x97 Load GraphQL documents\n        \xe2\x86\x92 Syntax Error: Expected Name, found "}".\n        Generate\n

Run Code Online (Sandbox Code Playgroud)\n

\n
发现 1 个错误
\n
\xc3\x97 C:/Development/GogoFans/gogofans-ui/src/app/users/graphql/fragments/show.ts
\nGraphQLError：语法错误：预期名称，找到“}”。
\n
at syntaxError (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\error\\syntaxError.js:15:10)
\nat Parser.expectToken (C:\\Development\\GogoFans\ \gogofans-ui\\node_modules\\graphql\\language\\parser.js:1423:40)
\nat Parser.parseName (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\ language\\parser.js:92:22)
\nat Parser.parseField (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:289:28)
\ nat Parser.parseSelection (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:278:81)
\nat Parser.many (C:\\Development\\ GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:1537:26)
\nat Parser.parseSelectionSet (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql \\language\\parser.js:265:24)
\nat Parser.parseFragmentDefinition (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:410:26 )
\nat Parser.parseDefinition (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:134:23)
\nat Parser.many (C:\\Development \\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:1537:26)
\nat Parser.parseDocument (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\ \graphql\\language\\parser.js:109:25)
\nat Object.parse (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:36 :17)
\nat Object.parseGraphQLSDL (C:\\Development\\GogoFans\\gogofans-ui\\node_modules@graphql-tools\\utils\\index.cjs.js:601:28)
\nat parseSDL (C: \\Development\\GogoFans\\gogofans-ui\\node_modules@graphql-tools\\code-file-loader\\index.cjs.js:239:18)
\nat CodeFileLoader.load (C:\\Development\\ GogoFans\\gogofans-ui\\node_modules@graphql-tools\\code-file-loader\\index.cjs.js:173:28)
\nat async loadFile (C:\\Development\\GogoFans\\gogofans-ui \\node_modules@graphql-tools\\load\\index.cjs.js:48:24)
\n
GraphQLError：语法错误：预期名称，找到“}”。
\n
at syntaxError (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\error\\syntaxError.js:15:10)
\nat Parser.expectToken (C:\\Development\\GogoFans\ \gogofans-ui\\node_modules\\graphql\\language\\parser.js:1423:40)
\nat Parser.parseName (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\ language\\parser.js:92:22)
\nat Parser.parseField (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:289:28)
\ nat Parser.parseSelection (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:278:81)
\nat Parser.many (C:\\Development\\ GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:1537:26)
\nat Parser.parseSelectionSet (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql \\language\\parser.js:265:24)
\nat Parser.parseFragmentDefinition (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:410:26 )
\nat Parser.parseDefinition (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:134:23)
\nat Parser.many (C:\\Development \\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:1537:26)
\nat Parser.parseDocument (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\ \graphql\\language\\parser.js:109:25)
\nat Object.parse (C:\\Development\\GogoFans\\gogofans-ui\\node_modules\\graphql\\language\\parser.js:36 :17)
\nat Object.parseGraphQLSDL (C:\\Development\\GogoFans\\gogofans-ui\\node_modules@graphql-tools\\utils\\index.cjs.js:601:28)
\nat parseSDL (C: \\Development\\GogoFans\\gogofans-ui\\node_modules@graphql-tools\\code-file-loader\\index.cjs.js:239:18)
\nat CodeFileLoader.load (C:\\Development\\ GogoFans\\gogofans-ui\\node_modules@graphql-tools\\code-file-loader\\index.cjs.js:173:28)
\nat async loadFile (C:\\Development\\GogoFans\\gogofans-ui \\node_modules@graphql-tools\\load\\index.cjs.js:48:24)
\n
出了些问题
\n
npm 错误！代码 ELIFECYCLE
\nnpm 错误！错误号 1
\nnpm 错误！gogofans-ui@0.0.0 生成：graphql-codegen --config codegen.yml
\nnpm 错误！退出状态 1
\nnpm 错误！
\npm 错误！gogofans-ui@0.0.0 生成脚本失败。
\npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。
\n
npm 错误！可以在以下位置找到此运行的完整日志：
\nnpm ERR！C:\\Users\\Fidel\\AppData\\Roaming\\npm-cache_logs\\2020-07-06T07_01_25_424Z-debug.log
\n

\n

Answer 1

Dot*_*mha 1

GraphQL codegen 使用代码 AST 来查找操作（使用 graphql-tag-pluck）。它不执行字符串插值，因为在某些情况下，它仅在应用程序运行时确定，或者它可能是 codegen 无法真正访问的内部变量。

为了运行字符串插值 - 我们需要编译并运行您的代码文件，而这不是 codegen 真正可以做的事情。

为什么需要进行字符串插值？您能解释一下您的用例吗？因为如果是为了分隔字段列表 - 那么请使用 GraphQL 片段。如果是为了动态更改字段集 - 使用内置@skip和@include指令。如果您仍然需要更多地控制 codegen 加载文档的方式，请使用自定义文档加载器：https://graphql-code-generator.com/docs/getting-started/documents-field#custom-document-loader

在我看来，使用文件进行 GraphQL 操作更简单，并让 codegen 使用、和插件.graphql生成随时可用的代码- 这样您就可以根据您的操作获得 Angular ，并且它是完全类型安全的，并且 GraphQL 操作已经在里面定义了。typescripttypescript-operationstypescript-apollo-angularService

我编辑了我的问题，但基本上我想使用插值从我的界面动态添加字段，这样可以避免字段重复。 (2认同)

归档时间：	5 年，7 月前
查看次数：	3340 次
最近记录：	4 年，5 月前