question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using graphql-tag inside an Angular Component throws duplicated fragment/query error

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
kamilkisielacommented, Dec 13, 2018

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

1reaction
kroedercommented, Dec 12, 2018

Works fine with 0.15.0-alpha.6d689c5d Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fragments - Apollo GraphQL Docs
A GraphQL fragment is a piece of logic that can be shared between multiple queries and mutations. Here's the declaration of a NameParts...
Read more >
Integrating GraphQL Code Generator in your frontend ...
In this article we'll try to explain and demonstrate common patterns for frontend development with GraphQL and GraphQL Code Generator.
Read more >
The query is always of type unknown when created with ...
I'm Charly, from The Guild, working on GraphQL Code Generator. The preset: 'client' does not require to include fragments documents in the ...
Read more >
GraphQL specification
Query variables can be used within fragments. Query variables have global scope with a given operation, so a variable used within a fragment...
Read more >
apollostack - Bountysource
Declare fragments both in the .graphql file (for the query) and in the components (for props validation and data filtering) which is the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found