1
1
# RxFire Firestore
2
2
3
- ## Document Observables
4
3
5
4
### ` doc() `
6
- The ` doc() ` function creates an observable that emits document changes.
5
+ The ` doc() ` function creates an observable that emits document changes. Returns snapshot of the data each time the document changes.
7
6
8
7
| | |
9
8
| -----------------| ------------------------------------------|
10
9
| ** function** | ` doc() ` |
11
- | ** params** | ` firestore.DocumentReference ` |
10
+ | ** params** | ` ref: firestore.DocumentReference` |
12
11
| ** import path** | ` rxfire/firestore ` |
13
12
| ** return** | ` Observable<firestore.DocumentSnapshot> ` |
14
13
@@ -17,24 +16,23 @@ The `doc()` function creates an observable that emits document changes.
17
16
import { doc } from ' rxfire/firestore' ;
18
17
import { firestore , initializeApp } from ' firebase' ;
19
18
import ' firebase/firestore' ;
20
- import { map } from ' rxjs/operators' ;
21
19
22
20
// Set up Firebase
23
21
const app = initializeApp ({ /* config */ });
24
22
const db = app .firestore ();
25
- const davidDoc = db .doc (' users/david' );
23
+ const davidDocRef = db .doc (' users/david' );
26
24
27
25
// Seed the firestore
28
- davidDoc .set ({ name: ' David' });
26
+ davidDocRef .set ({ name: ' David' });
29
27
30
- doc (davidDoc ).subscribe (snapshot => {
28
+ doc (davidDocRef ).subscribe (snapshot => {
31
29
console .log (snapshot .id );
32
30
console .log (snapshot .data ());
33
31
});
34
32
```
35
33
36
34
### ` docData() `
37
- The ` docData() ` function returns a stream of a document, mapped to its data payload and optionally the document ID.
35
+ The ` docData() ` function creates an observable that returns a stream of a document, mapped to its data field values and, optionally, the document ID.
38
36
39
37
| | |
40
38
| -----------------| ------------------------------------------|
@@ -65,12 +63,12 @@ docData(davidDocRef,'uid').subscribe(userData => {
65
63
## Collection Observables
66
64
67
65
### ` collection() `
68
- The ` collection() ` function creates an observable that emits collection changes .
66
+ The ` collection() ` function creates an observable that emits changes to the specified collection based on the input query. Any time updates are made, the function returns all documents in the collection that match the query .
69
67
70
68
| | |
71
69
| -----------------| ------------------------------------------|
72
70
| ** function** | ` collection() ` |
73
- | ** params** | ` firestore.CollectionReference ` | ` firestore.Query ` |
71
+ | ** params** | query: `firestore.CollectionReference | firestore.Query` |
74
72
| ** import path** | ` rxfire/firestore ` |
75
73
| ** return** | ` Observable<firestore.QueryDocumentSnapshot[]> ` |
76
74
@@ -79,28 +77,24 @@ The `collection()` function creates an observable that emits collection changes.
79
77
import { collection } from ' rxfire/firestore' ;
80
78
import { firestore , initializeApp } from ' firebase' ;
81
79
import ' firebase/firestore' ;
82
- import { map } from ' rxjs/operators' ;
83
80
84
81
// Set up Firebase
85
82
const app = initializeApp ({ /* config */ });
86
83
const db = app .firestore ();
87
- const davidDoc = db .doc (' users/david ' );
84
+ const collectionRef = db .collection (' users' );
88
85
89
- // Seed the firestore
90
- davidDoc .set ({ name: ' David' });
91
-
92
- collection (db .collection (' users' ))
86
+ collection (collectionRef )
93
87
.pipe (map (docs => docs .map (d => d .data ())))
94
88
.subscribe (users => { console .log (users ) });
95
89
```
96
90
97
91
### ` collectionData() `
98
- The ` collectionData() ` function creates an observable that emits a stream of collection documents payload with optional document ID.
92
+ The ` collectionData() ` function creates an observable that emits a stream of documents for the specified collection based on the input query. When updates are made, returns all documents (field values and optional document ID) in the collection that match the query .
99
93
100
94
| | |
101
95
| -----------------| ------------------------------------------|
102
- | ** function** | ` collection ()` |
103
- | ** params** | query: ` firestore.CollectionReference ` | ` firestore.Query ` , idField?: ` string ` |
96
+ | ** function** | ` collectionData ()` |
97
+ | ** params** | query: `firestore.CollectionReference | firestore.Query` <br> idField?: ` string` |
104
98
| ** import path** | ` rxfire/firestore ` |
105
99
| ** return** | ` Observable<T[]> ` |
106
100
@@ -113,22 +107,19 @@ import 'firebase/firestore';
113
107
// Set up Firebase
114
108
const app = initializeApp ({ /* config */ });
115
109
const db = app .firestore ();
116
- const davidDoc = db .doc (' users/david ' );
110
+ const collectionRef = db .collection (' users' );
117
111
118
- // Seed the firestore
119
- davidDoc .set ({ name: ' David' });
120
-
121
- collectionData (db .collection (' users' ), ' uid' )
112
+ collectionData (collectionRef , ' uid' )
122
113
.subscribe (users => { console .log (users ) });
123
114
```
124
115
125
116
### ` collectionChanges() `
126
- The ` collectionChanges() ` function creates an observable that emits the event changes on a collection. This is different than the collection function in that it does not contain the state of your application but only the individual changes. The optional ` events ` parameter will filter which child events populate the array.
117
+ The ` collectionChanges() ` function creates an observable that emits the changes on the specified collection based on the input query . This is different than the collection function in that it does not contain the state of your application but only the individual changes. The optional ` events ` parameter filters which the type of change populate the array. By default, all changes are emitted. Returns the affected documents and the type of change that occurred (added, modified, or removed) .
127
118
128
119
| | |
129
120
| -----------------| ------------------------------------------|
130
121
| ** function** | ` collectionChanges() ` |
131
- | ** params** | query: ` firestore.CollectionReference ` | ` firestore.Query ` , events?: ` firestore.DocumentChangeType[] ` |
122
+ | ** params** | query: `firestore.CollectionReference | firestore.Query` <br> events?: ` firestore.DocumentChangeType[ ] ` |
132
123
| ** import path** | ` rxfire/firestore ` |
133
124
| ** return** | ` Observable<firestore.DocumentChange[]> ` |
134
125
@@ -142,16 +133,14 @@ import { map } from 'rxjs/operators';
142
133
// Set up Firebase
143
134
const app = initializeApp ({ /* config */ });
144
135
const db = app .firestore ();
145
- const davidDoc = db .doc (' users/david' );
146
-
147
- // Seed the firestore
148
- davidDoc .set ({ name: ' David' });
136
+ const collectionRef = db .collection (' users' );
149
137
150
- collectionChanges (db .collection (' users' ))
151
- .subscribe (changes => { console .log (users ) });
138
+ // Listen to all events
139
+ collectionChanges (collectionRef )
140
+ .subscribe (changes => { console .log (changes ) });
152
141
153
142
// Listen to only 'added' events
154
- collectionChanges (db . collection ( ' users ' ) , [' added' ])
143
+ collectionChanges (collectionRef , [' added' ])
155
144
.subscribe (addedEvents => { console .log (addedEvents ) });
156
145
```
157
146
@@ -161,7 +150,7 @@ The `sortedChanges()` function creates an observable that emits the reduced stat
161
150
| | |
162
151
| -----------------| ------------------------------------------|
163
152
| ** function** | ` sortedChanges() ` |
164
- | ** params** | query: ` firestore.CollectionReference ` | ` firestore.Query ` , events?: ` firestore.DocumentChangeType[] ` |
153
+ | ** params** | query: `firestore.CollectionReference | firestore.Query` <br> events?: ` firestore.DocumentChangeType[ ] ` |
165
154
| ** import path** | ` rxfire/firestore ` |
166
155
| ** return** | ` Observable<firestore.DocumentChange[]> ` |
167
156
@@ -175,26 +164,24 @@ import { map } from 'rxjs/operators';
175
164
// Set up Firebase
176
165
const app = initializeApp ({ /* config */ });
177
166
const db = app .firestore ();
178
- const davidDoc = db .doc (' users/david ' );
167
+ const collectionRef = db .collection (' users' );
179
168
180
- // Seed the firestore
181
- davidDoc .set ({ name: ' David' });
182
-
183
- sortedChanges (db .collection (' users' ))
184
- .subscribe (changes => { console .log (users ) });
169
+ // Listen to all events
170
+ sortedChanges (collectionRef )
171
+ .subscribe (changes => { console .log (changes ) });
185
172
186
173
// Listen to only 'added' events
187
- docChanges (db . collection ( ' users ' ) , [' added' ])
174
+ docChanges (collectionRef , [' added' ])
188
175
.subscribe (addedEvents => { console .log (addedEvents ) });
189
176
```
190
177
191
178
### ` auditTrail() `
192
- The ` auditTrail() ` function creates an observable that emits the entire state trail. This is useful for debugging or replaying the state of a list in your app . The optional ` events ` parameter will filter which child events populate the array.
179
+ The ` auditTrail() ` function creates an observable that emits the entire state trail on the specified collection based on the input query . This is useful for debugging or replaying the changes to the database . The optional ` events ` parameter filters which the type of change populate the array. By default, all changes are emitted .
193
180
194
181
| | |
195
182
| -----------------| ------------------------------------------------------|
196
183
| ** function** | ` auditTrail() ` |
197
- | ** params** | ref: ` firestore.Reference ` or ` firestore.Query ` , events?: ` firestore.DocumentChangeType[] ` |
184
+ | ** params** | ref: `firestore.Reference | firestore.Query` <br> events?: ` firestore.DocumentChangeType[ ] ` |
198
185
| ** import path** | ` rxfire/firestore ` |
199
186
| ** return** | ` Observable<firestore.DocumentChange[]> ` |
200
187
@@ -208,39 +195,40 @@ import { map } from 'rxjs/operators';
208
195
// Set up Firebase
209
196
const app = initializeApp ({ /* config */ });
210
197
const db = app .firestore ();
211
- const collection = db .collection (' users' );
212
-
213
- // Seed Firestore
214
- const davidDoc = collection .doc (' users/david' );
215
- davidDoc .set ({ name: ' David' });
198
+ const collectionRef = db .collection (' users' );
199
+ const davidDocRef = collectionRef .doc (' david' );
216
200
217
- auditTrail (collection ).pipe (
201
+ // Start the audit trail
202
+ auditTrail (collectionRef ).pipe (
218
203
map (change => {
219
204
return {
220
205
_key: change .snapshot .key ,
221
206
event: change .event ,
222
- ... change .snapshot .val ();
207
+ ... change .snapshot .val ()
223
208
};
224
209
})
225
210
).subscribe (stateTrail => {
226
211
console .log (stateTrail );
227
- /**
228
- first emission:
212
+ });
213
+
214
+ // Seed Firestore
215
+ davidDocRef .set ({ name: ' David' });
216
+
217
+ // Remove the document
218
+ davidDocRef .delete ();
219
+
220
+ /**
221
+ First emission:
229
222
[{ _key: '3qtWqaKga8jA; name: 'David', event: 'added' }]
230
223
231
- second emission:
224
+ When more events occur, the trail still contains the previous events.
225
+
226
+ Second emission:
232
227
[
233
228
{ _key: '3qtWqaKga8jA; name: 'David', event: 'added' },
234
229
{ _key: '3qtWqaKga8jA; name: 'David', event: 'removed' }
235
230
]
236
231
*/
237
- });
238
-
239
- // When more events occur the trail still contains the previous events
240
- // In this case we'll remove the only item
241
- davidDoc .delete ();
242
-
243
- // Now this will trigger the subscribe function above
244
232
```
245
233
246
234
## Event Observables
@@ -251,7 +239,7 @@ The `fromDocRef()` function creates an observable that emits document changes. T
251
239
| | |
252
240
| -----------------| ------------------------------------------|
253
241
| ** function** | ` fromDocRef() ` |
254
- | ** params** | ref: ` firestore.Reference ` |
242
+ | ** params** | ref: ` firestore.DocumentReference ` < br > options?: ` firestore.SnapshotListenOptions ` |
255
243
| ** import path** | ` rxfire/firestore ` |
256
244
| ** return** | ` Observable<firestore.DocumentSnapshot> ` |
257
245
@@ -265,21 +253,21 @@ import { map } from 'rxjs/operators';
265
253
// Set up Firebase
266
254
const app = initializeApp ({ /* config */ });
267
255
const db = app .firestore ();
268
- const davidDoc = db .doc (' users/david' );
256
+ const davidDocRef = db .doc (' users/david' );
269
257
270
258
// Seed Firestore
271
- davidDoc .set ({ name: ' David' });
259
+ davidDocRef .set ({ name: ' David' });
272
260
273
- fromDocRef (davidDoc ).subscribe (snap => { console .log (snap ); })
261
+ fromDocRef (davidDocRef ).subscribe (snap => { console .log (snap ); })
274
262
```
275
263
276
264
### ` fromCollectionRef() `
277
- The ` fromCollectionRef() ` function creates an observable that emits document changes. This is different than the ` collection() ` function in that it returns the full ` QuerySnapshot ` instead of plucking off the ` QueryDocumentSnapshot[] ` array .
265
+ The ` fromCollectionRef() ` function creates an observable that emits changes to the specified collection based on the input query and, optionally, the listen options . This is different than the ` collection() ` function in that it returns the full ` QuerySnapshot ` representing the results of the query .
278
266
279
267
| | |
280
268
| -----------------| ------------------------------------------|
281
269
| ** function** | ` fromCollectionRef() ` |
282
- | ** params** | ref: ` firestore.CollectionReference ` or ` firestore.Query ` |
270
+ | ** params** | ref: `firestore.Reference | firestore.Query ` <br> options?: ` firestore.SnapshotListenOptions ` |
283
271
| ** import path** | ` rxfire/firestore ` |
284
272
| ** return** | ` Observable<firestore.QuerySnapshot> ` |
285
273
@@ -293,11 +281,7 @@ import { map } from 'rxjs/operators';
293
281
// Set up Firebase
294
282
const app = initializeApp ({ /* config */ });
295
283
const db = app .firestore ();
296
- const collection = db .collection (' users' );
297
- const davidDoc = collection .doc (' david' );
298
-
299
- // Seed Firestore
300
- davidDoc .set ({ name: ' David' });
284
+ const collectionRef = db .collection (' users' );
301
285
302
- fromCollectionRef (collection ).subscribe (snap => { console .log (snap .docs ); })
286
+ fromCollectionRef (collectionRef ).subscribe (snap => { console .log (snap .docs ); })
303
287
```
0 commit comments