Graphql-code-generator: Using graphql-tag inside an Angular Component throws duplicated fragment/query error

[kroeder]

Describe the bug
Here's a bug repository: https://github.com/kroeder/angular-gql-gen-bug-repro-repo

If you use gql`...` inside an angular component then gql-gen fails with the message

  > gql-gen

  √ Parse configuration
  > Generate outputs
  > Generate src/__generated/types.ts
  √ Load GraphQL schemas
  √ Load GraphQL documents
  × Generate
  → Found 2 errors in your documents


    We found 1 errors

    Failed to generate src/__generated/types.ts

    Found 2 errors.
    GraphQL Code Generator validated your GraphQL documents against the schema.
    Please fix following errors and run codegen again:

  ./src/app/app.component.ts:
    There can be only one fragment named "VoteFields".

  ./src/app/app.component.ts:
    There can be only one fragment named "VoteFields".

This does not work

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  thisFragmentDoesNotWork = gql`
    fragment VoteFields on Vote {
      vote_value
    }
  `;
}

This does work

const outsideFragmentWorks = gql`
  fragment VoteFields on Vote {
    vote_value
  }
`;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  thisFragmentWorks = outsideFragmentWorks;
  orThisOneAsWell = gql`
    ${outsideFragmentWorks}
  `;
}

To Reproduce
Steps to reproduce the behavior:

1. Checkout https://github.com/kroeder/angular-gql-gen-bug-repro-repo
2. npm i
3. npm run gql-gen
4. Play around with https://github.com/kroeder/angular-gql-gen-bug-repro-repo/blob/master/src/app/app.component.ts

Expected behavior
Should work. Altough I'm not sure if this is a gql-gen or graphql-tag issue

Schema/Documents
Already inside the repo

Environment:

• OS: Windows 10
• Codegen:

    "graphql-code-generator": "^0.14.5",
    "graphql-codegen-typescript-client": "^0.14.5",
    "graphql-codegen-typescript-common": "^0.14.5",

• Node:

$ node --version
v10.13.0

[kamilkisiela]

This one does and does not work at the same time :) Works at runtime but the codegen can't find it:

gql`
  ${outsideFragmentWorks}
`;

I'm sure it's not only angular specific, same error would occur with any framework, any source.

Could you check if you have VoteFields defined multiple times in your documents?

[kroeder]

Why can't gql-gen find them? We used apollo-codegen before and it was able to spot gql inside angular components

Also, no I don't have it defined multiple times. My reproduction repo is just a playground where I comment either the one outside or the one inside out 🙂

[kamilkisiela]

It's not that it can't find a document, it can't tell what is the content of it, for example:

const fragment = gql` fragment FooFr on Foo { id } `

const fr = gql`
  ${fragment}
`;

• Codegen searches for every gql literal tag
• finds fragment, adds it to the known fragments
• finds fr, can't tell how the document looks like

And it's okay because you already have FooFr defined.

The problem you see is that the codegen treats comments as a normal code so when you comment out one of your fragments, both are still loaded by the codegen. It's an issue caused by graphql-tag-pluck package.

We already fixed that https://github.com/dotansimha/graphql-code-generator/pull/1015, try to use 0.15.0-alpha.6d689c5d

[kroeder]

Works fine with 0.15.0-alpha.6d689c5d
Thanks!

[kamilkisiela]

@dotansimha I guess since v0.15.0 was released we can close this one