reactjs – Types conflict when using GraphQL Code generator (codegen)

given the following codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: 'https://mySchema',
  documents: 'src/**/*.ts',
  generates: {
    'src/apollo/gql/': {
      preset: 'client',
      plugins: []
    }
  }
};

export default config;

the types generated starting from my schema.json are in conflict.
I have a query with the following request:

...
account {
          id
          label
        }
...

and another query which requires more fields like this:

...
account {
          id
          label
          balance
          currencyCode
      }
...

the result is:

export type PfmBankAccount = {
  __typename?: 'PfmBankAccount';
  balance: Scalars['Float']['output'];
  currencyCode: Scalars['String']['output'];
  id: Scalars['Uuid']['output'];
  label: Scalars['String']['output'];
};

which has balance and currencyCode required

but in another typename I get the following structure

export type PfmTransactionListQuery = { __typename?: 'Query', pfmTransactionList: { __typename?: 'PfmTransactionList', transactions: Array<{ __typename?: 'PfmTransaction', id: any, madeOn: any, amount: number, currencyCode: string, description: string, category: { __typename?: 'PfmTransactionCategory', code: string, label: string, subcategories: Array<{ __typename?: 'PfmTransactionCategory', code: string, label: string }> }, account: { __typename?: 'PfmBankAccount', id: any, label: string }, merchant?: { __typename?: 'PfmMerchant', id: any, name: string, logo: string } | null, optimizations: Array<{ __typename?: 'PfmTransactionOptimization', title: string, subtitle: string, icon: string, action: PfmTransactionOptimizationAction, url: string }> }>, pageInfo: { __typename?: 'PageInfo', after?: string | null } } };

in the above type PfmTransactionListQuery, the two PfmBankAccount are incompatible. I’ve been trying using client directive @client in Account query which doesn’t required the other fields. Any other solution?

Read more here: Source link