如何在 typescript/javascript 导出中使用字符串模板来处理 graphql-codegen 架构

Posted

技术标签:

【中文标题】如何在 typescript/javascript 导出中使用字符串模板来处理 graphql-codegen 架构【英文标题】:How to graphql-codegen handle schema with string templates in typescript/javascript exports 【发布时间】:2020-06-12 05:03:17 【问题描述】:

我正在使用graphql-codegen 为给定模式生成打字稿类型文件。

除了导出的方案中有字符串模板外,一切都很好,它会抱怨语法并且似乎不会编译它。查看以下文件了解更多详情。

types.js 如下:

const gql = require("graphql-tag");

const Colors = ["Red", "Yellow"];
export default gql`
  type Person 
    name: String
  
  enum Color 
      $Colors.join("\n")
  
# if we change the above enum to be the below, it will be good
#   enum Color 
#       Red
#       Yellow
#   
`;

配置 yml 文件为:

schema: 
  - types.js

generates:
  generated.ts:
    plugins:
        - typescript
        - typescript-resolvers

当运行yarn graphql:codegen时,它会报错:

Found 1 error

  ✖ generated.ts
    Failed to load schema from types.js:

        Syntax Error: Expected Name, found 
        GraphQLError: Syntax Error: Expected Name, found 
    at syntaxError (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/error/syntaxError.js:15:10)
    at Parser.expectToken (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:1404:40)
    at Parser.parseName (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:94:22)
    at Parser.parseEnumValueDefinition (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:1014:21)
    at Parser.optionalMany (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:1497:28)
    at Parser.parseEnumValuesDefinition (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:1002:17)
    at Parser.parseEnumTypeDefinition (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:986:23)
    at Parser.parseTypeSystemDefinition (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:705:23)
    at Parser.parseDefinition (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:146:23)
    at Parser.many (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:1518:26)
    at Parser.parseDocument (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:111:25)
    at Object.parse (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/graphql/language/parser.js:36:17)
    at Object.parseGraphQLSDL (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/@graphql-toolkit/common/index.cjs.js:572:28)
    at CodeFileLoader.load (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/@graphql-toolkit/code-file-loader/index.cjs.js:120:31)
    at async /Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/@graphql-toolkit/core/index.cjs.js:682:25
    at async Promise.all (index 0)

        GraphQL Code Generator supports:
          - ES Modules and CommonJS exports (export as default or named export "schema")
          - Introspection JSON File
          - URL of GraphQL endpoint
          - Multiple files with type definitions (glob expression)
          - String in config file

        Try to use one of above options and run codegen again.
    Error: Failed to load schema
        at loadSchema (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/@graphql-codegen/cli/bin.js:353:15)
    Error: Failed to load schema
        at loadSchema (/Users/rliu/study/reproduce-graphql-codegen-with-string-template-in-js-export/node_modules/@graphql-codegen/cli/bin.js:353:15)

看起来graphql-codegen 不喜欢模板字符串,例如:$Colors.join('\n')

另外请查看包含上述所有文件的repo。

谁能帮忙解决?谢谢。

【问题讨论】:

【参考方案1】:

它没有处理它,主要是因为加载代码文件和插入它的复杂性。 但是,解决方法是:

创建一个schema.js 文件。 从源文件中导入所有带有字符串插值的 typedef,并使用buildSchema(来自graphql)或makeExecutableSchema(来自graphql-tools)构建GraphQLSchema 对象实例。 将您的GraphQLSchema 导出为默认导出,或命名为schema 的标识符。 将该文件提供给 codegen(通过执行 schema: ./schema.js - 使用单个代码文件导致 codegen 查找 ast 代码,然后尝试对其执行 require

如果您使用的是 TypeScript,您还应该在代码生成中添加 require 扩展名(参见 https://graphql-code-generator.com/docs/getting-started/require-field#typescript-support)

【讨论】:

以上是关于如何在 typescript/javascript 导出中使用字符串模板来处理 graphql-codegen 架构的主要内容,如果未能解决你的问题,请参考以下文章

如何在TypeScript/JavaScript项目里引入MD5校验和

如何在 typescript/javascript 导出中使用字符串模板来处理 graphql-codegen 架构

TypeScript / JavaScript - 导入所有类型

TypeScript -- JavaScript的救赎

在构造函数之前调用 Typescript/javascript 方法

在 typescript/javascript 的 google.maps.Geocoder().geocode() 上使用全局变量