如何组合两个 Redux Firebase Cloud Firestore 查询？

Posted 2023-02-19

【中文标题】如何组合两个 Redux Firebase Cloud Firestore 查询？

【英文标题】：How to combine two Redux Firebase Cloud Firestore queries?

【发布时间】：2021-04-28 10:34:45

【问题描述】：

我有两个从我的 Firebase Firestore 中提取帖子的 redux 查询。第一个成功显示了我关注的人的所有帖子：

export function fetchUsersFollowingPosts(uid) 
    return ((dispatch, getState) => 
        firebase.firestore()
            .collection("posts")
            .doc(uid)
            .collection("userPosts")
            .orderBy("creation", "asc")
            .get()
            .then((snapshot) => 
                const uid = snapshot.query.EP.path.segments[1];
                const user = getState().usersState.users.find(el => el.uid === uid);


                let posts = snapshot.docs.map(doc => 
                    const data = doc.data();
                    const id = doc.id;
                    return  id, ...data, user 
                )

                for (let i = 0; i < posts.length; i++) 
                    dispatch(fetchUsersFollowingLikes(uid, posts[i].id))
                
                dispatch( type: USERS_POSTS_STATE_CHANGE, posts, uid )

            )
    )

第二个显示我自己的所有帖子。

export function fetchUserPosts() 
    return ((dispatch) => 
        firebase.firestore()
            .collection("posts")
            .doc(firebase.auth().currentUser.uid)
            .collection("userPosts")
            .orderBy("creation", "desc")
            .get()
            .then((snapshot) => 
                let posts = snapshot.docs.map(doc => 
                    const data = doc.data();
                    const id = doc.id;
                    return  id, ...data 
                )
                dispatch( type: USER_POSTS_STATE_CHANGE, posts )
            )
    )

这是我目前从我关注的人中列出用户的地方。但是如何将它们结合起来，以便在一个 FlatList 中同时显示我的帖子和我关注的人的帖子？

function Feed(props) 
    useStatusBar('dark-content');
    const [posts, setPosts] = useState([]);
    const [refreshing, setRefreshing] = useState(false)

    useEffect(() => 
        if (props.usersFollowingLoaded == props.following.length && props.following.length !== 0) 
            props.feed.sort(function (x, y) 
                return y.creation.toDate() - x.creation.toDate();
            )

            setPosts(props.feed);
            setRefreshing(false)
        

    , [props.usersFollowingLoaded, props.feed])

    
    return (
        <View style=styles.background>
             posts.length > 0 ?
            <View style=styles.containerGallery>
                <FlatList
                    refreshControl=
                        <RefreshControl
                            refreshing=refreshing
                            tintColor="white"
                            onRefresh=() => 
                                setRefreshing(true);
                                props.reload()
                            
                        />
                    
                    showsVerticalScrollIndicator=false
                    numColumns=1
                    horizontal=false
                    data=posts
                    renderItem=( item ) => (
                        <View style=styles.containerImage>
                            <Card title=item.title onPress=() => props.navigation.navigate(routes.GOOD_STUFF_DETAIL,  item: item, postId: item.id, uid: item.user.uid, user: item.user,) showLike=true author="Recommended by " + item.user.name likeItem=item likeCount=item.likesCount icon=categories.categories[item.categoryID].icon timeStamp=timeDifference(new Date(), item.creation.toDate())/>
                        </View>
                    )
                />
                
            </View>
            : <NothingHere title="Follow friends" text="To see their Good Stuff here" icon="search" color="white"/> 
        </View>

    )

const mapStateToProps = (store) => (
    currentUser: store.userState.currentUser,
    following: store.userState.following,
    feed: store.usersState.feed,
    usersFollowingLoaded: store.usersState.usersFollowingLoaded,
)

const mapDispatchProps = (dispatch) => bindActionCreators( reload , dispatch);

export default connect(mapStateToProps, mapDispatchProps)(Feed);

下面是我的数据结构：

感谢阅读！

【问题讨论】：

您能解释一下likes 子集合的结构和/或添加fetchUsersFollowingLikes 函数的代码吗？我还想了解您为什么要完全加入查询。

感谢@Happy-Monad 的提问。我添加了 likes 子集合的图像 - 它们只是用户 ID 的列表。我想将查询合并在一起，以在一个列表中显示我关注的人的帖子以及我自己的帖子。

【参考方案1】：

根据您的数据，并且知道 Firestore 上的查询有多么有限，您需要在客户端上进行合并。

我要做的是将列表保留在 redux 上并在 reducer 上处理合并。您只需要监听这两个操作，然后将它们合并为您的应用程序中的一个数组。

如果您想避免用户看到部分数据（例如，您显示自己的帖子，然后再次刷新只是添加您的关注者帖子，因此 UI 会发生变化），您可能希望在加载时保留两个标志（布尔值）如果两个列表都没有加载，数据并显示一个微调器。

除非你想重构你的代码，否则很多合并发生在客户端。

另外，侧节点，我不会像你在第一个循环中那样在 for 循环中调度某些东西，因为如果这触发了 firestore 请求，那么它可能会很快变得昂贵。

【参考方案2】：

也许我误解了数据库结构，但 AFAIK 似乎不可能将这两个查询结合起来。从我看到的数据库结构中，您想要检索您（userA）给“赞”的用户B 的帖子。为了获得该信息，您扫描路径posts/userUID/userPosts/docId/likes。鉴于查询扫描不同的集合范围，我看不到混合它们的方法。

另外，为了论证，我们假设您已经有一个包含您关注的人的用户 UID 的列表。然后，更接近所需行为的 Firestore 查询功能是 Collection Group queries。记住数据库的结构：

posts
  uid1
    userPosts
      doc1
      doc2
  uid2
    userPosts
      docX
      docY

本质上，集合组查询是一种同时查询所有userPosts 集合的方法。如果每个文档都将作者 ID 作为字段，您将能够执行以下操作：

db.collectionGroup("userPosts").where("uid", "in", ListOfFollowedUsers)

这并不能完全解决问题，因为in 运算符子句被限制为 10 个值，因此您最多可以为 10 个关注的用户应用它。

总的来说，我建议将查询分开并将它们合并到应用程序代码中。

【讨论】：

感谢您提供如此周到和深思熟虑的答案。听起来我需要将它们合并到应用程序代码中。我在下面包含了应用程序代码。对此的任何帮助将不胜感激！

@TomWicks 从代码中我相信feed 是用户关注的帖子列表。如果您的帖子有另一个列表，那么：从商店导入列表，连接它们，按日期对它们进行排序，就是这样。