firebase - 如何使用 rxfire 和 rxjs(或查询)加入两个 Firestore 查询

Question

目标很简单:使用 rxjs 、 rxfire 和 rnfirebase react native 库连接两个 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)？

Answer 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 只是一个 switchMap 运算符，则不需要使用 of。在这种情况下，使用 map 运算符就足够了，它的行为相同。

使用新的 RxJS 6+ 语法和 map ，组合将如下所示:

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

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

旁注: 请记住，SQL 中的代码等价物是 UNION (不是 JOIN )。为了以编程方式 JOIN，您需要将结果集 A 的每个对象与结果集 B 的每个对象组合起来，并为每一对创建一个连接对象。无 key 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)))

演示: 可以在此处找到包含上述代码和模拟 FireStore 的完整演示:

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