GraphQL Code Gen - React Query Referenced Types

Question

In our projects, we're generating our TS types using the react-query plugin which is super convenient when it comes to generating the required hooks (queries/mutations). However, we discovered that apollo:codegen is doing a much better job at generating the types.

Example

GraphQL Query

query UserProfile {
  merchantCenter {
    userProfile {
      data {
        email
        firstName
        id
        lastName
      }
    }
  }
}

GraphQL Code Gen with React Query plugin

export type UpdateUserProfileMutation = (
  { __typename?: 'Mutation' }
  & { merchantCenter?: Maybe<(
    { __typename?: 'MerchantCenterMutation' }
    & { updateUserProfile: (
      { __typename?: 'UpdateMerchantUserProfileResponse' }
      & Pick<UpdateMerchantUserProfileResponse, 'errors'>
      & { data?: Maybe<(
        { __typename?: 'MerchantUserProfile' }
        & Pick<MerchantUserProfile, 'email' | 'firstName' | 'id' | 'lastName'>
      )> }
    ) }
  )> }
);

Apollo GraphQL Code Gen

Whereas with apollo:codegen we're getting the following result:

export interface UpdateUserProfile_merchantCenter_updateUserProfile_data {
  __typename: "MerchantUserProfile";
  email: string;
  firstName: string;
  id: string;
  lastName: string;
}

export interface UpdateUserProfile_merchantCenter_updateUserProfile {
  __typename: "UpdateMerchantUserProfileResponse";
  data: UpdateUserProfile_merchantCenter_updateUserProfile_data | null;
  errors: UpdateMerchantUserProfileError[];
}

As you can see from the above example, the last result is much clearer, cleaner and allows us to access the returned type from the query (ie: UpdateUserProfile_merchantCenter_updateUserProfile_data) as this is referenced and not just coded inline like the 1st example with the react-query plugin.

Also, another interesting point is the codegen is generating all possible types whereas apollo:codegen is only generating the types for the declared queries/mutations.

We have tried multiple configuration options but all of them are unsatisfactory. We're wondering if there would be other config options to get as close as possible to the apollo generated types.

We're considering to move away from the react-query codegen plugin and just use apollo:codegen. This involves a lot of refactoring and potentially some manual work where individual queries/mutations have to be created manually (not very efficient).