graphql-code-generator stopped working with Gatsby

[smashercosmo]

Describe the bug
When I try to generate types from Gatsby schema, I get the following error

✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate ./src/types/generated/graphql.ts
      ✔ Load GraphQL schemas
      ✖ Load GraphQL documents
        → Identifier 'getIterator' has already been declared (3299:9)
        Generate


 Found 1 error

  ✖ ./src/types/generated/graphql.ts
    SyntaxError: Identifier 'getIterator' has already been declared (3299:9)
        at Object._raise (/Users/smashercosmo/Documents/projects/gatsby-site/node_modules/@babel/parser/lib/index.js:766:17)
        at Object.raiseWithData (/Users/smashercosmo/Documents/projects/gatsby-site/node_modules/@babel/parser/lib/index.js:
759:17)
        at Object.raise (/Users/smashercosmo/Documents/projects/gatsby-site/node_modules/@babel/parser/lib/index.js:753:17)
        at ScopeHandler.checkRedeclarationInScope (/Users/smashercosmo/Documents/projects/gatsby-site/node_modules/@babel/pa
rser/lib/index.js:4873:12)
        at ScopeHandler.declareName (/Users/smashercosmo/Documents/projects/gatsby-site/node_modules/@babel/parser/lib/index
.js:4839:12)

To Reproduce
Steps to reproduce the behavior:

1. Clone the repo https://github.com/smashercosmo/gatsby-graphql-code-generator-issue
2. Run npm start
3. In another terminal tab run npm run graphql2ts

Environment:

  System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Languages:
    Python: 2.7.11 - /Library/Frameworks/Python.framework/Versions/2.7/bin/python
  Browsers:
    Chrome: 86.0.4240.183
    Edge: 83.0.478.58
    Firefox: 78.0.1
    Safari: 13.1.1
  npmPackages:
    gatsby: 2.25.1
    @graphql-codegen/cli: 1.19.0
    @graphql-codegen/introspection: "1.18.0
    @graphql-codegen/typescript: "1.17.11
    @graphql-codegen/typescript-operations: 1.17.8

[femetrie]

A temporary fix is to explicitly specify the Gatsby folders that have types, like so:

      - node_modules/gatsby-transformer-sharp/!(node_modules)/**/*.js

[smashercosmo]

So basically all the transformers?

[smashercosmo]

Can confirm. Workaround works. Thx @femetrie

[dotansimha]

I'm closing for now.
Note that if you are using Gatsby, your schema and operations are spread across multiple packages, and codegen can't find those for your.
We always recommend to start with a narrow glob pattern, and extend it according to your needs. Using a broad pattern like ./node_modules/gatsby*/!(node_modules)/**/*.js will try to load a lot of files, and some might throw an error or create an incorrect schema.

[smashercosmo]

@dotansimha thx for explanation, but have to mention that official Gatsby recipe recommends using a broad pattern
https://graphql-code-generator.com/docs/integrations/gatsby/

[dotansimha]

Got it, thanks @smashercosmo , I'll add a comment there to clarify this.

[openscript]

Maybe it's also great to give some advices which plugins usually need to be declared.

[bsgreenb]

Hey, really feel this shouldn't be closed @dotansimha . My code previously worked and now is broken. Shouldn't you be leaving this open to come up with a more systematic Gatsby integration? If I'm not mistaken, Gatsby is one of the MAJOR frontend graphql implementations. This has already eaten up 2 days of coding time, I think I proly just need to find the duplicate getIterator thing myself, but there's really nothing helpful in the docs or on this thread currently. By closing the thread, you ensure that nothing else useful emerges. Hit you up on Discord, thx.

[bsgreenb]

Pretty sure getIterator is declared in core-js: https://github.com/zloirock/core-js/search?q=getIterator

I think this issue may stem from multiple core-js versions. E.g. here's what I get when I run yarn why core-js:
```± |bg-lerna-swag {39} U:3 ✗| → yarn why core-js
yarn why v1.22.10
[1/4] 🤔 Why do we have the module "core-js"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists

• "workspace-aggregator-b61eb43e-769d-41d2-9e2b-2a66664910a8" depends on it
• Hoisted from "_project_#glowy-ui#@storybook#addon-a11y#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-actions#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-backgrounds#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-controls#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-docs#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-links#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-storysource#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-toolbars#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-viewport#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addons#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#cli#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#react#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#source-loader#core-js"
• Hoisted from "_project_#glowy-ui#gatsby#core-js"
• Hoisted from "_project_#glowy-ui#react-stickynode#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-a11y#@storybook#api#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-a11y#@storybook#channels#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-a11y#@storybook#client-api#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-a11y#@storybook#client-logger#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#cli#@storybook#codemod#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-a11y#@storybook#components#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-a11y#@storybook#core-events#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-docs#@storybook#core#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-controls#@storybook#node-logger#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-docs#@storybook#postinstall#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-links#@storybook#router#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-a11y#@storybook#theming#core-js"
• Hoisted from "_project_#glowystuff-web#react-scripts#react-app-polyfill#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#cli#@storybook#semver#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-a11y#@storybook#client-api#@storybook#channel-postmessage#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-docs#@storybook#core#@storybook#ui#core-js"
• Hoisted from "_project_#glowy-ui#@storybook#addon-docs#@storybook#core#lazy-universal-dotenv#core-js"
  info Disk size without dependencies: "7.21MB"
  info Disk size with unique dependencies: "7.21MB"
  info Disk size with transitive dependencies: "7.21MB"
  info Number of shared dependencies: 0
  => Found "babel-runtime#[email protected]"
  info This module exists because "_project_#glowy-ui#react-scrollspy#babel-runtime" depends on it.
  info Disk size without dependencies: "7.68MB"
  info Disk size with unique dependencies: "7.68MB"
  info Disk size with transitive dependencies: "7.68MB"
  info Number of shared dependencies: 0
  => Found "fbjs#[email protected]"
  info This module exists because "_project_#glowy-schema#@graphql-codegen#import-types-preset#@graphql-codegen#visitor-plugin-common#@graphql-tools#relay-operation-optimizer#relay-compiler#fbjs" depends on it.
  info Disk size without dependencies: "7.68MB"
  info Disk size with unique dependencies: "7.68MB"
  info Disk size with transitive dependencies: "7.68MB"
  info Number of shared dependencies: 0```

[bsgreenb]

Update: think I've got it working with this in the codegen.yml:

documents:
  - ../glowystuff-web/src/**/*.{ts,tsx}
  - ../../node_modules/gatsby-source-contentful/!(node_modules)/**/*.js

I think the issue was gatsby-recipes -> corejs, not sure though. Just wanna second the suggestion that people put in specific things they need.. but that this is a kind of variable step as it stands. Wonder if there's an approach that could avoid these issues with the Gatsby integration for future folks? All good though

[openscript]

I think it's the right way to advice the user to pick the specific documents, but as I mentioned before it would be great to have a more detailed explanation how to choose these paths.

[dotansimha]

Got it, @openscript, TBH, I'm not sure.
It really depends on what extensions you are using for Gatsby.
I'm not highly familiar with that, so unfortunately I can't recommend on the right way of doing that.