firebase / firebase/firebase-js-sdk
FR: Add 'path' as rxFire Firestore mapped field for collectionData and docData
- Dominant language
- TypeScript
- Stars
- 5.1k
- Forks
- 1k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 37
Description
### [REQUIRED] Describe your environment
* Operating System version: irrelevant
* Browser version: irrelevant
* Firebase SDK version: rxFire v 3.13.5
* Firebase Product: firestore, rxFire
### [REQUIRED] Describe the problem
There is currently no way of adding the full document path to the observable stream of a collectionData() call. Same goes for docData(). It is especially a problem with CollectionGroup queries where just the document ID does not fully identify the document.
To fix this, add the following option to ```collectionData```(citiesRef, 'id')
```collectionData(queryRef, 'optional name of id param', 'optional name of path param')```
```collectionData(queryRef, { id: 'optional name of id param', path: 'optional name of path param')```
#### Problem example:
This is taken from your own example. But, I've modified it so that Firestore and Storage has the following structure:
/countries/{name of country}/cities/{name of city}.png (storage)
/countries/{name of country}/cities/{name of city} (firestore)
```javascript
import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/storage';
import { collectionData } from 'rxfire/firestore';
import { getDownloadURL } from 'rxfire/storage';
import { switchMap } from 'rxjs/operators';
const app = firebase.initializeApp({ /* config */ });
const citiesRef = app.firestore().collectionGroup('cities'); // NOTE THE USE OF COLLECTIONGROUP
citiesRef.where('state', '==', 'CO');
collectionData(citiesRef, 'id')
.pipe(
switchMap(cities => {
return combineLatest(...cities.map(c => {
const ref = storage.ref(`/countries/${c.XXX}/cities/${c.id}.png`); // NO WAY OF ADDRESSING THE CITY STORAGE OBJECT!!!!
return getDownloadURL(ref).pipe(map(imageURL => ({ imageURL, ...c })));
}));
})
)
.subscribe(cities => {
cities.forEach(c => console.log(c.imageURL));
});
```
Here is how the above could look if we had the ability of having the full path included in the data:
```javascript
import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/storage';
import { collectionData } from 'rxfire/firestore';
import { getDownloadURL } from 'rxfire/storage';
import { switchMap } from 'rxjs/operators';
const app = firebase.initializeApp({ /* config */ });
const citiesRef = app.firestore().collectionGroup('cities'); // NOTE THE USE OF COLLECTIONGROUP
citiesRef.where('state', '==', 'CO');
collectionData(citiesRef, {path: 'path'}) // NOTE THE USE OF PROPOSED PATH MAPPING SYNTAX
.pipe(
switchMap(cities => {
return combineLatest(...cities.map(c => {
const ref = storage.ref(c.path + '.png'); // NOTE THE SIMPLIFIED ADDRESSING OF THE STORAGE OBJECT
return getDownloadURL(ref).pipe(map(imageURL => ({ imageURL, ...c })));
}));
})
)
.subscribe(cities => {
cities.forEach(c => console.log(c.imageURL));
});
```
Contributor guide
Assessment
This issue has not been assessed yet.