0

我能够相当轻松地使用 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;
    },
});
4

1 回答 1

0

无法通过搜索找到,但堆栈溢出推荐了这个类似的帖子,它包含了答案。它解决了问题:Apollo 3 分页与 Field Policies

于 2021-08-10T02:00:08.363 回答