Question

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

不建议使用fetchMore的updateQuery回调，并将其删除在下一个主要版本的Apollo Client中。

请使用适当的方法将updateQuery函数转换为字段策略读取和合并功能，或使用/调整辅助功能（例如 concatPagination，offsetLimitPagination或relayStylePagination） @ apollo / client / utilities。

实地政策体系比分地区体系更有效地处理分页手写的updateQuery函数，您只需要定义策略一次，而不是每次调用fetchMore。

所以我试图用一种新的Apollo方法实现分页

list.component.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.module

  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（）。有人可以给我提供使分页工作的正确方法吗？

角图ql阿波罗分页

0 个答案: