I was able to use relayStylePagination fairly easily for creating a paginated feed of Post objects for users on my app. However, I’d like to use that same field and pagination process but with a filter for a specific user when visiting their page. Showing only their posts instead of everyones.
The in-memory cache is merging these two responses together. When I visit a users page, the posts from the feed are what populate the initial list, when I scroll down, the fetchMore policy correctly retrieves the individual user’s posts. when I click back, the home feed has that specific users posts appended at the bottom of the list. when I continue to scroll down on the home page, it resumes to fetching posts from all users the way it should.
Is there a way to modify the request/cache/field Policy/or Type Policy of each of these queries so that they do not get merged together into one big list? I would rather have a “home feed” list, and a list for every user as I visit their page. If I have missed somewhere in the documentation that would better explain this use case that would be a huge help.
this is the basic query and fetchMore implementation on the default feed page, showing all user’s posts:
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,
},
});
this is the fetchMore implementation I have on the users page:
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;
},
});
Wasn't able to find with search but stack overflow recommended this similar post and it contained the answer. It solved the problem: Apollo 3 pagination with Field Policies