Graphql-code-generator: Not loading TypeScript project / environment?

[jedmao]

Bug report

Had things working after #1917, but now it's broken again and I'm not sure when it broke. It was previously working with this config:

overwrite: true
schema: 'server/src/schemas/**/*.gql'
documents: 'src/**/*.{ts,tsx}'
generates:
  src/models/generated.tsx:
    - typescript
    - typescript-operations
  server/models.ts:
    - typescript
    - typescript-resolvers
pluckConfig:
  modules:
    - name: 'babel-plugin-relay/macro'
      identifier: 'graphql'

But now, I'm getting these errors:

 Found 2 errors

  ✖ src/models/generated.tsx
    Error: Unable to load schema from file "/Users/jemao/Documents/GitHub/foo/src/index.tsx" due to import error: Unexpected identifier

  ✖ server/models.ts
    Error: Unable to load schema from file "/Users/jemao/Documents/GitHub/foo/src/index.tsx" due to import error: Unexpected identifier

Troubleshooting

First, I tried narrowing down to just the component files:

documents:
  - 'src/components/**/*.{ts,tsx}'
  - '!src/components/**/*.test.{ts,tsx}'  # can I negate like this too?

Similar 2 errors, but now one of them is an unexpected token export, so I tried this from #1948:

require:
  - ts-node/register

Exact same errors, so I created a new tsconfig.json file called tsconfig.codegen.json that extended the first:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react" // was "preserve"
  }
}

Ran the above with the concluding suggestion from #1948 like so:

$ npx cross-env TS_NODE_PROJECT=tsconfig.codegen.json graphql-codegen -c codegen.yml

Now I'm getting somewhere, because the errors are related to tsconfig paths and not invalid tokens. Note that I still get those < token errors if I use "jsx": "preserve".

 Found 2 errors

  ✖ src/models/generated.tsx
    Error: Unable to load schema from file "/Users/jemao/Documents/GitHub/foo/src/components/Layout/Layout.tsx" due to import error: Cannot find module 'compo
nents/LocalesMenu'

  ✖ server/models.ts
    Error: Unable to load schema from file "/Users/jemao/Documents/GitHub/foo/src/components/App/App.tsx" due to import error: Cannot find module 'components/
Routes'

Read #1874 and tried npm install --save-dev tsconfig-paths and the following:

require:
  - ts-node/register
  - tsconfig-paths/register

Now I'm getting errors that clearly indicate that my src/react-app-env.d.ts file is not being loaded, which is pretty important, but I don't understand why this would be the case, as the entire src folder is included in my tsconfig.json.

Additionally, I have errors that I can't use the Linaria styled function at runtime.

Reproduction steps

npm install -g yo generator-tsx
mkdir foo && cd foo
yo tsx foo 1.2.3
# Select Linaria + Relay
npm run codegen
npm install --save-dev ts-node cross-env
# Modify codegen.yml as indicated in my troubleshooting steps
npx cross-env TS_NODE_PROJECT=tsconfig.codegen.json graphql-codegen -c codegen.yml

1. My GraphQL schema:

type Query {
    id: ID
    hello: String
}

1. My GraphQL operations:

query HomeQuery {
    hello
}

1. My codegen.yml config file:

overwrite: true
schema: server/src/schemas/**/*.gql
documents:
  - 'src/components/**/*.{ts,tsx}'
  - '!src/components/**/*.test.{ts,tsx}'
generates:
  src/models/generated.tsx:
    plugins:
      - typescript
      - typescript-operations
  server/models.ts:
    plugins:
      - typescript
      - typescript-resolvers
pluckConfig:
  modules:
    - name: 'babel-plugin-relay/macro'
      identifier: 'graphql'
require:
  - ts-node/register
  - tsconfig-paths/register

Expected behavior
No errors.

Environment:

• OS: macOS Mojave v10.14.6
• NodeJS: v10.16.2

    "@graphql-codegen/cli": "^1.6.0",
    "@graphql-codegen/introspection": "^1.6.0",
    "@graphql-codegen/typescript": "^1.6.0",
    "@graphql-codegen/typescript-graphql-files-modules": "^1.6.0",
    "@graphql-codegen/typescript-operations": "^1.6.0",
    "@graphql-codegen/typescript-resolvers": "^1.6.0",

[dotansimha]

Hi @jedmao ! Thank you for reporting this.

Maybe it's related to the fact that the codegen runs as Node library with CommonJS? Can you try to add the following?

    "module": "commonjs",
    "moduleResolution": "node",

Basically, with the latest version of the codegen, we no longer try to require in order to load operations, we do that only for the schema. So looking for documents should be done only as AST.

Any chance you can put this reproduction into a repo or a codesanbox env? it will make it easier to fix.

Thank you!

[jedmao]

I actually already have those configurations in my tsconfig.json.

Here's the repo: https://github.com/jedmao/codegen-iss2387

[dotansimha]

@jedmao seems like the codegen tries to load your operations as code files using require, and not only as code AST.
The noRequire should be set by default, and I think it's related to a change I did recently in graphql-toolkit. It will force the codegen to skip require for your documents, and just scan the code file as text/ast.

I fixed it in [email protected] and merged to this repo here: https://github.com/dotansimha/graphql-code-generator/pull/2389

An alpha version is available as 1.6.1-alpha-fb9f854a.2, can you please try it? it should work without the need to specify anything for codegen or typescript config, you also no longer need to add require fields because it traverse the AST tree instead of using require.
You just need to make sure you have typescript dependency because graphql-tag-pluck needs it in order to extract operations from .ts/.tsx files.

So your config file could looks like that:

schema: server/src/schemas/**/*.gql
documents:
  - 'src/components/**/*.{ts,tsx}'
  - '!(*.test.*)'
generates:
  src/models/generated.tsx:
    plugins:
      - typescript
      - typescript-operations
  server/models.ts:
    plugins:
      - typescript
      - typescript-resolvers
pluckConfig:
  modules:
    - name: 'babel-plugin-relay/macro'
      identifier: 'graphql'

And you should be able to run is just as graphql-codegen from your NPM scripts.

Sorry for the inconvenience, and thank you for your comprehensive research you did, it really helped us to fix that quickly. @jedmao

[jedmao]

Excellent! I will give this a try after lunch and report back.

Thanks for not ignoring my question about the negation too!

[dotansimha]

@jedmao sure. I tested it with your repo and it seems to work :)
Regarding the negation - your syntax was correct as well, both will work :)

[dotansimha]

Fixed in 1.6.1

[jedmao]

Works! 🎊