React-query plugin: generate query response types

Is your feature request related to a problem? Please describe.

In my 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.

Describe the solution you’d like

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.

Describe alternatives you’ve considered

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).

[ristomatti]

@charlypoly Uh sorry! I just found the email notification when going through my flagged emails. I can confirm the output looks exactly what I was after when setting inlineFragmentTypes: 'combine'. 👍

I had forgotten this completely and we haven’t yet experimented with it more than I just tried running it now. With it the fragment types are indeed used as return values. Awesome!

[charlypoly]

@ristomatti We’re still looking for some solutions… Using fragments isn’t a bad idea but still doesn’t fully achieve what we’re looking for 🤔

For your given use-case, we would recommend using Fragments that would express your data requirements. We’ve taken notes of your request for future roadmaps.

Thank you!