client-preset is generating wrong type definition for operations that use fragments

[giancarlosisasi]

Which packages are impacted by your issue?

• @graphql-codegen/client-preset

Describe the bug

Hi there, I'm trying to migrate from apollo-client to graphql-code-generator and we found this "bug"

When using the following graphql operations:

#import "@my-org/web/dist/Graphql/Fragments/userFragment.graphql"
query MeAuthContextAuthQuery {
  me {
    ...UserFragment
  }
}

# content of @my-org/web/dist/Graphql/Fragments/userFragment.graphql"
fragment UserFragment on MeNode {
  id
  originalId
  email
  segmentation
  ...
}

After running the codegen, the me field type doesn't have all the Fragment fields.

The generated type is:

export type MeAuthContextAuthQuery = { __typename?: 'Query', me?: (
    { __typename?: 'MeNode' }
    & { ' $fragmentRefs'?: { 'UserFragmentFragment': UserFragmentFragment } }
  ) | null };

Which makes the following code fails:

const {data} = useQuery(MeAuthContextAuthDocument)
const email = data?.me?.email; // => email doesn't exists in me object :(

Your Example Website or App

https://codesandbox.io/s/awesome-lucy-ck9kwo?file=/test.tsx

Steps to Reproduce the Bug or Issue

I have added a minimal reproduction case using codesanbox.

1. Go to https://codesandbox.io/s/awesome-lucy-ck9kwo?file=/test.tsx
2. Open the test.tsx file
3. A typescript error is shown because email doesn't exists in user type 😢

Expected behavior

The type generated when using a fragment should contain all the fields defined in the fragment.

Screenshots or Videos

No response

Platform

• OS: macOS
• NodeJS: 14.18
• graphql version: 15.5
• @graphql-codegen/* version(s):

"@graphql-codegen/cli": "2.13.12",
"@graphql-codegen/client-preset": "1.1.4",
"@graphql-typed-document-node/core": "3.1.1",

Codegen Config File

This is the real config that we are using in our project. For simplicity, the codesanbox contains a minimal config.

const config: CodegenConfig = {
  overwrite: true,
  ignoreNoDocuments: true,
  generates: {
    'packages/auth/src/gql-auth/': {
      schema: GRAPH_ENDPOINT_AUTH,
      documents: 'packages/auth/src/**/*.auth.graphql',
      preset: 'client',
      plugins: [],
    },
    'packages/auth/src/gql/': {
      schema: GRAPH_ENDPOINT,
      documents: [
        'packages/auth/src/**/*.graphql',
        'packages/auth/node_modules/@my-org/web/dist/**/*.graphql',
        '!packages/auth/node_modules/@my-org/web/dist/**/*.*.graphql',
        '!packages/auth/src/**/*.auth.graphql',
      ],
      preset: 'client',
      plugins: [],
    },
  },
};

Additional context

No response

[saihaj]

It’s because with client preset it is doing fragment masking. https://the-guild.dev/graphql/codegen/plugins/presets/gql-tag-operations-preset#fragment-masking

[giancarlosisasi]

@saihaj do u know how to disable that? I can't find the docs related to the client preset😢

[jantimon]

It's already visible in the source:

graphql-code-generator/packages/presets/client/src/index.ts

Lines 24 to 36 in 4e3cfdc

	* ```tsx
	* const config = {
	* schema: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
	* documents: ['src/**\/*.tsx', '!src\/gql/**\/*'],
	* generates: {
	* './src/gql/': {
	* preset: 'client',
	* presetConfig: {
	* fragmentMasking: false,
	* }
	* },
	* },
	* };

[giancarlosisasi]

thanks @jantimon !