How to graphql-codegen handle schema with string templates in typescript/javascript exports

Question

I am using graphql-codegen to generate the typescript type files for given schema.

All good except if there is string template in the exported scheme, it will complain the sytax and seems it will not compile it. Check the following files for more details.

The types.js is below:

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
#   }
`;

And the config yml file is:

schema: 
  - types.js

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

When run yarn graphql:codegen, it complains the below:

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)

Looks like graphql-codegen didn't like template string like: ${Colors.join('\n')}.

Also please have a look about the repo containing all the above files.

Anyone can help to fix? Thanks.

score 0 · Answer 1 · answered Mar 22 '20 at 21:00

It's not handling it, mostly because of the complexity of loading code files and interpolate it. But, the way to workaround is:

Create a single schema.js file.
Import all typedefs with string interpolation from your source files, and use buildSchema (from graphql) or makeExecutableSchema (from graphql-tools) to build a GraphQLSchema object instance.
Export your GraphQLSchema as default export, or as identifier named schema.
Provide that file into codegen (by doing schema: ./schema.js - using a single code file causes the codegen to look for ast code, and then try to do require to it.

If you are using TypeScript, you should also add require extension to the codegen (see https://graphql-code-generator.com/docs/getting-started/require-field#typescript-support)

How to graphql-codegen handle schema with string templates in typescript/javascript exports

1 Answers1