如何使用 rxfire 和 rxjs（或查询）加入两个 Firestore 查询答案

【问题标题】：How can I join two Firestore queries using rxfire and rxjs (OR query)如何使用 rxfire 和 rxjs（或查询）加入两个 Firestore 查询
【发布时间】：2018-11-16 00:50:06
【问题描述】：

目标很简单：使用 rxjs、rxfire 和 rnfirebase react 原生库加入两个 firestore 查询。

我已经阅读了多个关于加入查询的教程1、2，但它们都因不同的错误而失败。

//Simple test for collectionData
import { collectionData } from 'rxfire/firestore';

this.myQuery = this.props.docRef.collection(`messages`).where('read', 'array-contains', this.props.me.uid)
collectionData(this.myQuery, 'id').subscribe(docs => console.log(docs))
//Fails with error: this._next is not a function.

或者，

this.publicQuery = this.props.docRef.collection('messages').where('public', '==', true) 
this.myQuery = this.props.docRef.collection(`messages`).where('read', 'array-contains', this.props.me.uid)
const myQuery$ = new Rx.Subject();
const publicQuery$ = new Rx.Subject();
this.myQuery.onSnapshot((querySnapshot) => {
    myQuery$.next(querySnapshot.docs.map(d => d.data()  ));
});
this.publicQuery.onSnapshot((querySnapshot) => {
    publicQuery$.next(querySnapshot.docs.map(d => d.data()  ));
});
const orQuery$ = combineLatest(this.myQuery, this.publicQuery).switchMap((docs) => {
    var [one, two] = docs;
    var combined = one.concat(two);
    return Rx.Observable.of(combined);
})
orQuery$.subscribe((result) => {
    console.log('>>>> ', result)
})
//TypeError: undefined is not a function (near ...switchMap)

如何成功加入两个 Firestore 查询 (OR)？

【问题讨论】：

你使用的是什么版本的 RxJS？你在使用 rxjs-compat 吗？

标签： firebase rxjs google-cloud-firestore rxfire

【解决方案1】：

您已经非常接近解决方案了。让我们逐步解决问题。

首先，创建Subject 并不是为了从onSnapshot 转换您的结果。而不是这个：

this.myQuery.onSnapshot((querySnapshot) => {
    myQuery$.next(querySnapshot.docs.map(d => d.data()))
});

我们可以使用“管道转换运算符”实现相同的目的：

const myQuery$ = this.myQuery.onSnapshot.pipe(
    map(querySnapshot => querySnapshot.docs.map(d => d.data()))
);

其他查询也是如此：

const publicQuery$ = this.publicQuery.onSnapshot.pipe(
    map(querySnapshot => querySnapshot.docs.map(d => d.data())
);

其次，加入这两个查询，combineLatest 确实是正确的创建函数。

但是，您的错误可能是由于您使用了较新的 RxJS 版本，它不再支持“流利”运算符 (officially called "patch operators")。从 RxJS 6 开始，它们已被“管道操作符”取代。例如，myObs$.map(...) 已变为 myObs$.pipe(map(...))。这些教程可能使用了旧版本的 RxJS，但仍然可以使用第一个版本。

此外，如果内部 Observable 只是一个 of 运算符，则不需要使用 switchMap。在这种情况下，使用 map 操作符就足够了，它的行为相同。

将新的 RxJS 6+ 语法与 map 一起使用，组合将如下所示：

const orQuery$ = combineLatest(myQuery$, publicQuery$).pipe(
    map(([one, two]) => one.concat(two))
)

你的其余代码应该是正确的。

旁注：请记住，您在 SQL 中的代码等效于 UNION（而不是 JOIN）。为了以编程方式JOIN，您需要将结果集 A 的每个对象与结果集 B 的每个对象组合起来，并为每对创建一个连接对象。无钥匙 OUTER JOIN 的此类功能如下所示（放置在您的 map 管道中）：

one.map(a => 
   two.map(b => Object.assign({}, a, b)))
.reduce((p, c) => p.concat(c), [])

如果您想拥有一个没有重复对象的UNION，请仅连接来自two 且在列表one 中没有匹配主键的那些项目。这将是您的映射函数：

one.concat(two.filter(twoItem => !one.some(oneItem => oneItem.id == twoItem.id)))

DEMO：可以在此处找到包含上述代码和模拟 FireStore 的完整、有效的演示：

https://stackblitz.com/edit/rxjs-mefynu?devtoolsheight=60

【讨论】：