Question 119977 in Firebase Question posted in
An extensive official documentation can be found here.

RXJS debounceTime() with angular firebase getDoc()

I’m trying to check the Firestore collections of id by using debounceTime() if IDs exist to avoid a high frequency of reads. But, it seems that the debounceTime() is not working as expected, as it reads almost instantly.

Here is the function calling checking for the id:

checkId(id: string) {
    debounceTime(3000);
    return getDoc(doc(this.firestore, 'users', id))
}

I definitely think I’m using debounce time wrongly here.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Not sure if this is the most functional to use with Firebase/Firestore technique.

    I've tried using @CCbet suggestion, return as Observable, but it still does not denounce.

    So, with @martin suggestion, I look into the rxjs.dev/guide/operators documentation and wrap the function in an rxjs Subject and call it.

    private subject: Subject<string> = new Subject();

this.subject.pipe(debounceTime(3000)).subscribe((searchTextValue) => {

   const docRef = doc(this.firestore, `usernames/${searchTextValue}`);
   const data = docData(docRef);
          if (data) {
            this.is_available = true;
          } else {
            this.is_available = false;
          }
    });

// calling next to it
this.subject.next(sanitized_username);

    This seems to work. Let me know if there is a caveat.


  2. 0

    debounceTime is an operator, so you’ll have to use it in a pipe so that it applies on the data stream that you want to.
    getDoc returns a Promise so you could convert it to an Observable first and the simply apply the debounceTime operator.

    checkId(id: string): Observable<any> {
    //using from to convert Promise to an Obsser
    return from(getDoc(doc(this.firestore, 'users', id))); 
}

randomFunction(): void {
  this.checkId(123)
      .pipe( debounceTime(3000);) //using pipe to apply debounceTime
      .subscribe(response => { console.log(response)  // fetching the response here
      });
}
    Login or Signup to reply.
  3. 0

    @HassanMoin‘s solution is almost right, but there’s a huge issue on it : calling the function randomFunction will return a new instance of the observable, creating a new subscription.

    Try making a variable for it, for instance :

    idControl = new FormControl('');
user$ = this.idControl.valueChanges.pipe(
  debounceTime(3000),
  switchMap(id => this.checkId(id))
);

    This way you have a single subscrpition, that automatically gets cancelles when you change the ID.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search