Apollo 客户端 - 为相同的字段名称分离分页查询但使用不同的过滤器

Posted 2023-03-10

【中文标题】Apollo 客户端 - 为相同的字段名称分离分页查询但使用不同的过滤器

【英文标题】：Apollo Client - Separating paginated queries for same field name but with different filters

【发布时间】：2021-10-13 13:22:18

【问题描述】：

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

【问题讨论】：

已解决。经过一番挖掘，我发现了这个。 ***.com/questions/62742379/…

【参考方案1】：

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