Graphql-code-generator: Possible fragment bug introduced in v1.13.0

[tuurbo]

Describe the bug
As of v1.13.0 i'm getting GraphQL error: Unknown fragment "Me". Looks like if a fragment has the same name as a query the fragment is not included in the operation. If I rename Me to MeFoo it will add MeFoo to the operation.

To Reproduce
Steps to reproduce the behavior:

1. My GraphQL schema:

fragment Staff on Staff {
    id
    username
    name
}

fragment Me on Staff {
    settings
    permissions
}

query Me {
    staff {
        ...Staff
        ...Me
    }
}

1. My GraphQL operations:

query Me {
    staff {
        ...Staff
        ...Me
        __typename
    }
}

fragment Staff on Staff {
    id
    username
    name
    __typename
}

#
# <------ Missing 'Me' fragment.
# 

1. My codegen.yml config file:

overwrite: true
schema:
  - "http://localhost.loc/graphql":
documents: "./src/app/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"

Expected behavior

Environment:

• OS: Windows 10
• @graphql-codegen/1.13.0:
• NodeJS: v13.10.1

Additional context

[xiaoyu-tamu]

I have the same problem

[dotansimha]

@xiaoyu-tamu @tuurbo thank you for reporting this.
Can you please share a reproduction in codesandbox / repo? I tried to add a failing tests, but couldn't reproduce the error you mentioned.

[rynti]

I have the same issue, although I'm using typescript-react-apollo instead of typescript-apollo-angular.

After updating the graphql-codegen packages to 1.13.0, it looked like this in my diffs:

 export const ExampleDocument = gql`
 query example {
   example {
     ...someFragment
   }
 }
-${someFragmentDoc}
 `;

(The fragment document is not included in the string anymore)

And it seems that when the client now performs this query, it uses the fragment inside the query with the spread operator, but doesn't send the fragment definition with it.

[JClackett]

Same here, @rynti's explanation matches what i am getting too

Error:

'GraphQLError: Unknown fragment "Me".',
  '    at Object.FragmentSpread (/<path>/node_modules/graphql/validation/rules/KnownFragmentNames.js:29:29)',

[JClackett]

Sounds strange, but for me it seems to be only happening on the MeFragment, all other queries are fine??

this is the diff after generating when on v1.13.0 ...

     ...Me
   }
 }
-    ${MeFragmentDoc}`;
+    `;

[rynti]

I found out how to reproduce this: The bug occurs when the fragment has the same name as the query.

I set up a project on codesandbox.io: https://codesandbox.io/s/objective-chandrasekhar-l9nso

I wasn't able to make the graphql generator work in the sandbox, so you have to download the project as a ZIP and run npm install & npm start yourself.

Here are the steps to reproduce the bug:

1. Download the sandbox as a ZIP from https://codesandbox.io/s/objective-chandrasekhar-l9nso (File -> Export to ZIP)
2. Run npm install (This installs graphql-codegen 1.13.0)
3. Run npm start (This generates the graphql TS file for the schema)
4. Check out the out/generated-graphql.ts file and you will notice that the notWorkingExample fragment is missing in the NotWorkingExampleDocument, however the workingExample fragment is included in the WorkingExampleDocument.
5. Inside the package.json, change the graphql-codegen dependency versions to 1.12.2
6. Run npm install again (This installs graphql-codegen 1.12.2)
7. Run npm start again (Again, this generates the TS file for the schema)
8. Notice how the generated-graphql.ts file now has the notWorkingExample fragment included in the NotWorkingExampleDocument.

[dotansimha]

@rynti we have a ready-to-use codesandbox template for the codegen, it could be found here: https://codesandbox.io/s/github/dotansimha/graphql-code-generator-issue-sandbox-template (and it's also part of the issue template)

I think I managed to find and fix the issue, see: https://github.com/dotansimha/graphql-code-generator/pull/3621

@tuurbo @rynti @xiaoyu-tamu can you please try the alpha version 1.13.1-alpha-6bbc3dae.9?

[rynti]

Can confirm that the issue doesn't occur anymore with version 1.13.1-alpha-6bbc3dae.9, thank you for the quick fix! 🎉👍

[tuurbo]

@dotansimha alpha version works for me. Thanks!

[dotansimha]

Fixed in v1.13.1 🎉

[Waitak]

Unfortunately, this is still happening in 1.13.1. Could we reopen this issue, please? Happy to provide details if it would be useful.

[jcardali]

I initially only bumped typescript-operations and the fix did not work. I subsequently bumped typescript-react-apollo as well, which did work.

[dotansimha]

@Waitak @jcardali You should bump all codegen packages together. They are linked together.
If it's still not working for you, please share a reproduction in a new issue.