Angular graphql Apollo 分页

Question

有人可以提供使用 Apollo Client 3.0 字段策略实现分页的示例吗？我一直在遵循文档中的示例来实现无限滚动，但在我的控制台中我收到以下警告：

fetchMore 的 updateQuery 回调已弃用，并将在 Apollo Client 的下一个主要版本中删除。

请将 updateQuery 函数转换为具有适当读取和合并函数的字段策略，或使用/改编 @apollo/client/utilities 中的辅助函数（例如 concatPagination、offsetLimitPagination 或 relayStylePagination）。

字段策略系统比手写的 updateQuery 函数更有效地处理分页，并且您只需要定义一次策略，而不是每次调用 fetchMore 时。

所以我尝试用新的 Apollo 方法来实现分页

列表组件.ts

// getOffers() 在 OnInit() 中运行

  getOffers(): void {
    this.searchService.search
      .pipe(
        tap(() => {
          this.spinnerService.showLoader();
        }),
        switchMap((term) => {
          this.lookupTerm = term;
          return this.offersGQL.watch({
            phrase: term,
            offset: this.pageOffset,
            limit: this.pageSize
          }, { fetchPolicy: 'network-only' })
            .valueChanges
            .pipe(
              retry(40),
              map((result) => result.data),
              tap(() => {
                this.spinnerService.hideLoader();
              })
            )
        }
        )
      )
      .subscribe((result) => {
        this.offers = result.offers.items;
      })
  }

// fetchMore()

  fetchMore() {
    this.offersGQL.watch({
      phrase: this.lookupTerm,
      offset: this.pageOffset,
      limit: this.pageSize
    },
      { fetchPolicy: 'network-only' }
    ).fetchMore({
      variables: {
        offset: this.offers.length,
      }
      // updateQuery: (prev, { fetchMoreResult }) => {
      //   console.log([...prev.offers.items, ...fetchMoreResult.offers.items]);

      //   if (!fetchMoreResult) { return prev; }
      //   return Object.assign({}, prev, {
      //     offers: [...prev.offers.items, ...fetchMoreResult.offers.items],
      //   });
      // }
    })

  }

// graphql.模块

  const cache = new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          // Keep searches separated by args.query (but not by any other
          // arguments, since the field policy will handle them).
          offers: offsetLimitPagination(),
        },
      },
    },
  });

现在，当我从 InMemoryCache 中删除带有 typePolicies 的部分时，我的优惠列表将被加载，但 fetchMore() 将不会返回任何内容。使用 typePolicies 既不会加载列表，也不会使用 fetchMore() 。有人可以向我提供使分页正常工作的正确方法吗？