Search code examples
angulartypescriptngrxngrx-storengrx-effects

ngrx effect - two http api in same effect


I have the below effect to update a part of an object using the update api (this api returns an id of the object), then i get the whole object using the findById api to which i pass the result of the api update as parameter, the problem is that the first time i do the update the findById api returns the the object without the update, knowing that the update is done

@Effect()
updateScopeCoverage$ = this.actions$.pipe(
    ofType<networksActions.PatchScopeCoverage>(networksActions.NetworkActionTypes.PATCH_SCOPE_COVERAGE),
    map(action => action.payload),
    exhaustMap(scopeCoverage => this.apiNetwork.update({ updateScopeCoverageRequest: scopeCoverage }).pipe(
        switchMap(id => this.apiNetwork.findById({ externalId: id }).pipe(
            map((network: Network) => new networksActions.PatchSuccess({
                id: network.externalId,
                changes: network
            })),
        )),
        catchError(err => {
            alert(err.message);
            return of(new networksActions.Failure({ concern: 'PATCH', error: err }));
        })
    ))
);


findById(args: { externalId: string }): Observable<models.Network> {
        const path = `/networks/v1.0/${args.externalId}`;
        return this.http.get<models.Network>(`${this.domain}${path}`);
}

Solution

  • If I understand right - the backend returns old data, is it correct? because the effect looks good. it sends an update request, waits for the response then sends findById, waits for it and dispatches the PatchSuccess action. The sequence is correct. I would console.log what backend returns and if it returns old data - it means there's cache or replication of the backend. For example try to put delay(1000) before switchMap(id => findById, if it works then 100% the issue with backend.