I can't query subcollections

[lyamone]

Hi guys,

First of all, I would like to thank you because the library is great but I am struggling to query a subcollection.

I have the following service which extends the Ngxs Firestore Class and where I set the path to the parent collection:

import { Injectable } from '@angular/core'; import { Course } from '@course/course.model'; import { NgxsFirestore } from '@ngxs-labs/firestore-plugin'; @Injectable() export class CourseService extends NgxsFirestore<Course> { protected path = 'course'; } The problem comes when I want to query all the documents within a Subscribers subcollection. The path looks like this: course/courseId/subscriptions

I tried to change the path with a dynamic one without luck.

In the Angular Fire documentation is possible to query subcollection because we can get the reference:

constructor(private afs: AngularFirestore) { this.userDoc = afs.doc<Item>('user/david'); this.tasks = this.userDoc.collection<Task>('tasks').valueChanges(); }

Is there a way that I am missing to get subcollections? or It's a feature not supported yet in the library?

Thanks!!

[joaqcid]

hi @lyamone

you can use the firestore dependency from the super class NgxsFirestore, to build a query to your subcollection, you will lose the id mappings and such tho

export class MyFirestore extends NgxsFirestore<Race> {
  subCollection$(){
    return this.firestore.collection('path/to/subcollection')
  }
}

we'll put this in our backlog since seems to be a pretty useful functionality to have

[joaqcid]

another way to do this is to create a Firestore Service for the subcollection

@Injectable({
  providedIn: 'root'
})
export class SubCollectionFirestore extends NgxsFirestore<Race> {
  private _raceId = '';
  protected get path() {
    return `races/${this.raceId}/classifications`;
  }
  public setRaceId(raceId) {
    this._raceId = raceId;
  }
  protected get raceId() {
    return this._raceId;
  }
}

[lyamone]

Hi @joaqcid,

First of all thanks for taking the time to answer.

I come out with a mixed solution between the two approaches.

I have created a subcollection method and a getter for the path. The only problem with this solution is that TS is complaining about the return type because I am not returning the collection but the subcollection. I am using the ts-ignore for now to bypass the error.

@Injectable()

export class CourseService extends NgxsFirestore<Course>  {

  public _path = 'course';

  public setPath(path:string) {
    this._path = path;
  }

  protected get path() {
    return this._path;
  }

  subscribers$(courseId: string){
    this.setPath(`course/${courseId}/subscribers`);
    return this.collectionOnce$();
  }
})

[JGSolutions]

How would you connect to actually pull data. for ex

        this.ngxsFirestoreConnect.connect(CollectionActions.FetchCollections, {
            to: (action) => this.colFS.doc$(action.uid),
            trackBy: (action) => action.uid
        });

[JGSolutions]

@joaqcid So this is the firestore service. Not sure what you call this:

export class CollectionFirestore extends NgxsFirestore<ICollection> {
  private _uid = '';

  protected get path() {
    return `collections/${this.uid}/collections`;
  }

  public setUid(uid: string) {
    this._uid = uid;
  }

  protected get uid() {
    return this._uid;
  }
}

this is my connection which I see the user id

        this.ngxsFirestoreConnect.connect(CollectionActions.FetchCollections, {
            to: (action) => {
                this.colFS.setUid(action.uid); // this.store.dispatch(new CollectionActions.FetchCollections(user.uid));
                return this.colFS.collection$()
            },
        });

I do get my data but is this correct?

[joaqcid]

hi @JGSolutions yes, that is one way of doing it.

The other option is https://github.com/ngxs-labs/firestore-plugin/issues/21#issuecomment-752088363