在 Apollo-Angular GraphQL 客户端中使用分页和 FetchMore

Using Pagination and FetchMore with Apollo-Angular GraphQL Client

提问人:Galen Howlett 提问时间:10/28/2023 更新时间:10/28/2023 访问量:21

问:

我正在尝试使用偏移限制模型在无限滚动中获取更多数据。现在,我的初始查询包含重复数据,而 refetch 调用只是发出相同的数据。我的服务器按预期响应所有实际请求。

有谁知道我应该如何在 apollo-angular 中使用 fetchMore 实现分页,或者为什么这种行为看起来如此不规则?

app.module.ts(应用模块.ts)

cache: new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        myFriends: offsetLimitPagination(),  // without this, the initial query fetches the right data but fetchMore() doesn't cause the observable to be hit
        // I have tried playing around with read() and merge() here unsuccessfully
      }
    }
  }
})

查询.ts

export const myFriendsQuery = gql`
query MyFriends($limit: Int, $offset: Int, $search: String, $orderBy: [Sort!]) {
  myFriends(limit: $limit, offset: $offset, search: $search, orderBy: $orderBy) {
    uid
    username
  }
}
`;

friend.service.ts(朋友.service.ts)

getFriends(limit?: number, offset?: number, search?: string, sort?: Sort[]) {
  return this.apollo.watchQuery<{ myFriends: User[] }>({
    query: myFriendsQuery,
    variables: {
      limit: limit,
      offset: offset,
      search: search,
      orderBy: sort,
    },
    fetchPolicy: 'network-only',
  });
}

朋友.component.ts

ngOnInit() {
  this.query = this.friendService.getFriends(10, 0, "", [{ firstName: 'ASC' }]);

  this.query.valueChanges.subscribe({
    next: value => {
      this.friends = value.data.myFriends; // this has an array length of 12 despite the network tab clearly showing a response of 10 length array
      
      // 2 of the response objects are duplicated, seemingly at random
      // if I remove the offsetLimitPagination() cache configuration, this behaves as expected

      // after fetchMore() is called, this method is called again with the exact same 12 data values
      // but the network tab clearly shows a graphql request firing that responds with the correct next data sequence
      // if offsetLimitPagination() is removed, this subscription will not be called
    }
  });
}

handleInfiniteScroll(event: Event) {
  this.offset += 10;
  this.query.fetchMore({
    variables: {
      limit: 10,
      offset: this.offset,
    },
  });
}
角度 图形QL apollo-client apollo-angular

评论


答:

0赞 Galen Howlett 10/28/2023 #1

哈哈,看起来我只需要在 offsetLimitPagination 配置中定义我的其他关键参数,因为我也在使用 search 和 orderBy 参数。从字面上看,文档中的下一节......

fields: {
  myFriends: offsetLimitPagination(['search', 'orderBy']),
}