Apollo Client - 分离相同字段名称但具有不同过滤器的分页查询

Question

我能够相当轻松地使用 relayStylePagination 为我的应用程序上的用户创建 Post 对象的分页提要。但是，我想使用相同的字段和分页过程，但在访问他们的页面时为特定用户使用过滤器。只显示他们的帖子而不是所有人。

内存缓存正在将这两个响应合并在一起。当我访问用户页面时，提要中的帖子填充了初始列表，当我向下滚动时，fetchMore 策略正确地检索了单个用户的帖子。当我单击返回时，主页提要在列表底部附加了特定用户的帖子。当我继续在主页上向下滚动时，它会继续以应有的方式从所有用户那里获取帖子。

有没有办法修改每个查询的 request/cache/field Policy/or 类型策略，以便它们不会合并到一个大列表中？我宁愿有一个“主页”列表，以及一个在我访问他们的页面时针对每个用户的列表。如果我遗漏了文档中可以更好地解释这个用例的某个地方，那将是一个巨大的帮助。

这是默认提要页面上的基本查询和 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;
    },
});

Answer 1

无法通过搜索找到，但堆栈溢出推荐了这个类似的 post，它包含了答案。它解决了问题：

Apollo Client - 分离相同字段名称但具有不同过滤器的分页查询

Apollo Client - Separating paginated queries for same field name but with different filters

reactjs

typescript

apollo-client

react-apollo

react-apollo-hooks