firebase / firebase/firebase-js-sdk

FR: Add 'path' as rxFire Firestore mapped field for collectionData and docData

Open
#3,706 0 comments 0 reactions 1 assignee Claimed by @jamesdaniels View on GitHub
api: firestore feature request RxFire
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.