Separating paginated queries for same field name but with different filters

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 lists 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.

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;
    },
});

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.

1 Like

Need an answer for this too

After posting to Stack Overflow, the algorithm recommended me this, which contains the answer. reactjs - Apollo 3 pagination with Field Policies - Stack Overflow

This was exactly what I needed. Thanks @prestonbrown-me !!