1

在我们的项目中，我们使用react-query插件生成我们的 TS 类型，这在生成所需的钩子（查询/突变）时非常方便。但是，我们发现apollo:codegen在生成类型方面做得更好。

例子

GraphQL 查询

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

带有 React Query 插件的 GraphQL Code Gen

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 代码生成

而apollo:codegen我们得到以下结果：

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[];
}

正如您从上面的示例中看到的那样，最后一个结果更清晰，更清晰，并且允许我们访问查询返回的类型（即：）UpdateUserProfile_merchantCenter_updateUserProfile_data，因为这是引用的，而不仅仅是像第一个react-query插件示例那样内联编码。

此外，另一个有趣的点是 codegen 正在生成所有可能的类型，而apollo:codegen只为声明的查询/突变生成类型。

我们尝试了多种配置选项，但都不尽如人意。我们想知道是否会有其他配置选项尽可能接近 apollo 生成的类型。

我们正在考虑放弃 react-query codegen 插件，只使用apollo:codegen. 这涉及大量重构和可能的一些手动工作，其中必须手动创建单个查询/突变（效率不高）。

4

0 回答 0