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