reactjstypescriptapollo-clientreact-apolloreact-apollo-hooks

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

Solution

  • 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