#Angular/fire official up-to-date way to get observable collection

1 messages · Page 1 of 1 (latest)

wet shore
#

Hi, with having angular/fire 7.5 and Angular 15. This whole library is heavily outdated. However, it still feels more nicer to use than the original. The doc in this link is for example outdated. Does maybe someone know what the correct way is to make this work?

https://github.com/angular/angularfire/blob/master/docs/firestore.md#reading-data

https://github.com/angular/angularfire

GitHub
GitHub - angular/angularfire: The official Angular library for Fire...

The official Angular library for Firebase. Contribute to angular/angularfire development by creating an account on GitHub.

GitHub
angularfire/firestore.md at master · angular/angularfire

The official Angular library for Firebase. Contribute to angular/angularfire development by creating an account on GitHub.

junior condor
#

The documented way looks right. What's your concrete issue?

wet shore
#

Well, lets say i implement the way it is in the docs. I get this:

import { DocumentData } from "@angular/fire/firestore";

export interface Householdbook extends DocumentData {
    id: string;
    name: string;
    description: string;
}

export class HouseholdbooksOverviewPageComponent implements OnInit {
  currentUser$ = this.auth.user$;


  item$: Observable<Householdbook[]>;

  constructor(
    private auth: AuthService,
    private store: Firestore
  ) {}

  ngOnInit(): void {
    const itemCollection = collection(this.store, 'householdbooks');
    this.item$ = collectionData(itemCollection);
  }

However, i end up getting:

Type 'Observable<DocumentData[]>' is not assignable to type 'Observable<Householdbook[]>'.
  Type 'DocumentData[]' is not assignable to type 'Householdbook[]'.
    Type 'DocumentData' is missing the following properties from type 'Householdbook': id, name, description```
#

These 2 lines worked. I only could not put it in a variable..

 const householdbookRef = collection(this.store, 'householdbooks');
collectionData(this.householdbookRef).subscribe(val => console.log(val)); //werkt
junior condor
#

The code in the documentation is:

this.users$ = collectionData(userProfileCollection) as Observable<UserProfile[]>;

You don't have the as Observable<...> in your code.

#

And you don't need to (and shouldn't, IMHO) extend DocumentData.

wet shore
# 
export interface Householdbook {
    id: string;
    name: string;
    description: string;
}

export class HouseholdbooksOverviewPageComponent implements OnInit {
  householdbooks$ = Observable<Householdbook[]>;

  constructor(
    private auth: AuthService,
    private store: Firestore
  ) {}

  ngOnInit(): void {
    const householdbookRef = collection(this.store, 'householdbooks');
    this.householdbooks$ = collectionData(householdbookRef) as Observable<Householdbook[]>;
  }
}

Ends up in: Type 'Observable<Householdbook[]>' is missing the following properties from type '{ new (subscribe?: ((this: Observable<Householdbook[]>, subscriber: Subscriber<Householdbook[]>) => TeardownLogic) | undefined): Observable<...>; prototype: Observable<...>; create: (...args: any[]) => any; }': prototype, createts(2739)

Wouldnt i then need to do some lambda to fille the Householdbook object?

junior condor
#

It seems you're not using the correct version of RxJS. Use the latest one.

#

And I don't understand what you mean by your lambda question.

wet shore
wet shore
wet shore
#

i got it to work

# 
  currentUser$ = this.auth.user$;

  householdbooks$: Observable<Householdbook[]> = new Observable<Householdbook[]>();

  constructor(
    private auth: AuthService,
    private store: Firestore
  ) {}

  ngOnInit(): void {
    const householdbookRef = collection(this.store, 'householdbooks');
    this.householdbooks$ = collectionData(householdbookRef) as Observable<Householdbook[]>;
  }
}```
main prairie
#

Havent used it, but cant u use:

export class HouseholdbooksOverviewPageComponent implements OnInit {
  currentUser$ = this.auth.user$;

  householdbooks$ = collectionData<Householdbook>(collection(this.store, 'householdbooks'));

  constructor(
    private auth: AuthService,
    private store: Firestore
  ) {}
}
#

The new Observable<Householdbook[]>(); should definetly not be neccesary. And that way you can avoid the cast as well as potential undefined until ngOnInit ran.

main prairie
#

I'd say it should either pass the generic, or use as Observable<...> (or well, it should just use the generic)

#

The firestore md file does use the as Observable, I guess that's where the confusion is coming from

#

Uff, they don't realy give any attention to PRs like this it seems, I found someone doing a comparable, but different PR. 😦

wet shore
#

let me try your suggestion for a scond

wet shore
# main prairie Havent used it, but cant u use: ```ts export class HouseholdbooksOverviewPageCo... 
Argument of type 'CollectionReference<DocumentData>' is not assignable to parameter of type 'Query<Householdbook>'.
  Types of property 'converter' are incompatible.
    Type 'FirestoreDataConverter<DocumentData> | null' is not assignable to type 'FirestoreDataConverter<Householdbook> | null'.
      Type 'FirestoreDataConverter<DocumentData>' is not assignable to type 'FirestoreDataConverter<Householdbook>'.
        The types returned by 'fromFirestore(...)' are incompatible between these types.
          Type 'DocumentData' is not assignable to type 'Householdbook'
image.png
main prairie
#

Weird worked for me

wet shore
#

This is the way another dude has fixed the angular/firebase kanban tutorial:

const getObservable = (collection: CollectionReference<Task>) => {
  const subject = new BehaviorSubject<Task[]>([]);

  collectionData(collection, { idField: 'id' }).forEach((doc) => {
    subject.next(doc);
  });

  return subject;
};

todo = getObservable(
    collection(this.store, 'todo') as CollectionReference<Task>
  ) as Observable<Task[]>;
wet shore