我能够相当轻松地使用 relayStylePagination 为我的应用程序上的用户创建 Post 对象的分页提要。但是,我想使用相同的字段和分页过程,但在访问特定用户的页面时使用过滤器。只显示他们的帖子而不是所有人。
内存缓存将这两个响应合并在一起。当我访问用户页面时,来自提要的帖子会填充初始列表,当我向下滚动时,fetchMore 策略会正确检索单个用户的帖子。当我单击返回时,主页提要在列表底部附加了特定用户的帖子。当我继续在主页上向下滚动时,它会继续以应有的方式从所有用户那里获取帖子。
有没有办法修改每个查询的请求/缓存/字段策略/或类型策略,以便它们不会合并到一个大列表中?我宁愿有一个“主页”列表,并在我访问他们的页面时为每个用户提供一个列表。如果我错过了文档中可以更好地解释这个用例的地方,那将是一个巨大的帮助。
这是默认提要页面上的基本查询和 fetchMore 实现,显示所有用户的帖子:
query QueryHomeFeed($cursor: Cursor) {
allPosts(orderBy: ID_DESC, first: 10, after: $cursor) {
edges {
cursor
node {
...SimplePostInfo
}
}
pageInfo {
endCursor
hasNextPage
}
}
}
fetchMore({
variables: {
cursor: data.allPosts.pageInfo.endCursor,
},
});
这是我在用户页面上的 fetchMore 实现:
query QueryUsersPosts($cursor: Cursor, $id: BigInt!) {
allPosts(
orderBy: ID_DESC first: 10 after: $cursor filter: {
userId: {
equalTo: $id
}
}
) {
edges {
cursor
node {
...SimplePostInfo
}
}
pageInfo {
endCursor
hasNextPage
}
}
}
userPosts.fetchMore({
variables: {
cursor: userPosts.data.allPosts.pageInfo.endCursor,
id: id,
},
updateQuery: (previousResult, {
fetchMoreResult
}) => {
const newEdges = (fetchMoreResult as any).allPosts.edges;
const pageInfo = (fetchMoreResult as any).allPosts.pageInfo;
return newEdges.length ?
{
allPosts: {
__typename: (previousResult as any).allPosts.__typename,
edges: [...(previousResult as any).allPosts.edges, ...newEdges],
pageInfo,
},
} : previousResult;
},
});