提问人:Galen Howlett 提问时间:10/28/2023 更新时间:10/28/2023 访问量:21
在 Apollo-Angular GraphQL 客户端中使用分页和 FetchMore
Using Pagination and FetchMore with Apollo-Angular GraphQL Client
问:
我正在尝试使用偏移限制模型在无限滚动中获取更多数据。现在,我的初始查询包含重复数据,而 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,
},
});
}
答:
0赞
Galen Howlett
10/28/2023
#1
哈哈,看起来我只需要在 offsetLimitPagination 配置中定义我的其他关键参数,因为我也在使用 search 和 orderBy 参数。从字面上看,文档中的下一节......
fields: {
myFriends: offsetLimitPagination(['search', 'orderBy']),
}
评论