ngrx component store effect not triggering after promise errors out

Question

My Implementation

Hi everyone, I am using ngrx component store for my supabase project, There is a delete method in supabase to delete a particular row, If that delete (which is a promise) a product that errors out, I am handling that exception in tapResponse.

readonly deleteProduct$ = this.effect(
    (
      productID$: Observable<string>
    ): Observable<PostgrestResponse<Product>> => {
      return productID$.pipe(
        switchMap((productID) =>
          this._supabaseService.delete<Product>(
            productsPath,
            'id',
            productID,
          )
        ),
        tapResponse(
          ({ data: products, error }) => {
            this.patchState({
              loading: false,
              error,
            });
            this.deleteProduct(products[0]?.id);
            this.toastSuccessMessage(error, 'Deleted Successfully!');
            this.handleError(error);
          },
          (error: Error) => {
            this.handleError(error);
          }
        ),
       catchError(() => EMPTY)
      );
    }
  );

The Problem

If my deleteProduct$ effect errors out, my subscription is closed, I don't know why, after that, If I do a deleteProduct$ effect again, it doesn't trigger

My guess

I think the error doesn't come through catchError, so my subscription is closed, but I don't know to solve this issue.

I hope I have made it clear, if not if I will try to make it clear.

I really appreciate any help you can provide.

Answer 1

You should catch errors not in the main stream but in the HTTP request one. Otherwise the main stream gets cancelled.

Here's a schematic example:

loadProduct$ = this.effect(productId =>
  productId.pipe(
    switchMap(productId =>
      // pipe is applied to the response
      this.httpService.get(productId).pipe(
        tapResponse(
          product => {
            this.patchState({ product });
          },
          error => {
            this.handleError(error);
          }
        )
      )
    )
  )
);

PS. This issue is common for NGRX Effects too.