GraphQL useLazyQuery typescript fetchPolicy 问题答案

【问题标题】：GraphQL useLazyQuery typescript fetchPolicy problemGraphQL useLazyQuery typescript fetchPolicy 问题
【发布时间】：2020-01-09 02:14:00
【问题描述】：

我正在使用 GraphQL 代码生成器来创建我的架构实体的打字稿类型。当我像下面这样使用 useQuery 时没有问题；

const { loading, error, data } = useQuery<
    FavoritesQuery,
    FavoritesQueryVariables
  >({
    fetchPolicy: 'no-cache',
  });

但是，当我尝试像下面这样的惰性查询时，打字稿编译器会受到影响；

const [loadFavorites, { called, loading, data }] = useLazyQuery<
    FavoritesQuery,
    FavoritesQueryVariables
  >(Queries.FAVORITES_QUERY, {
    fetchPolicy: 'no-cache',
  });

Intellisense 在键入时查找fetchPolicy 及其值列表。但是编译器会产生以下错误；

Argument of type '{ fetchPolicy: string; }' is not assignable to parameter of type 'LazyQueryHookOptions<{ __typename?: "MainQuery"; } & { favorites: ({ __typename?: "FavoriteGType"; } & Pick<FavoriteGType, "id" | "name" | "category" | "description" | "commandText" | "lastUpdatedDate"> & { ...; })[]; }, FavoritesQueryVariables>'.
  Object literal may only specify known properties, and 'fetchPolicy' does not exist in type 'LazyQueryHookOptions<{ __typename?: "MainQuery"; } & { favorites: ({ __typename?: "FavoriteGType"; } & Pick<FavoriteGType, "id" | "name" | "category" | "description" | "commandText" | "lastUpdatedDate"> & { ...; })[]; }, FavoritesQueryVariables>'.  TS2345

    89 |     FavoritesQueryVariables
    90 |   >(Queries.FAVORITES_QUERY, {
  > 91 |     fetchPolicy: 'no-cache',
       |     ^
    92 |   });

我应该如何在 useLazyQuery 中使用 fetchPolicy？

感谢和问候

【问题讨论】：

标签： typescript graphql

【解决方案1】：

React Apollo 3 使用 Typescript 的 Omit 功能，该功能是在 Typescript 3.5 中添加的。我感觉你在使用旧版本的 Typescript；如果您更新到 TS >= 3.5，这个问题应该会消失。

【讨论】：