Why browser cancels HTTP POST requests when its not a duplicate request?

Question

I am working with Angular10. Calling GraphQL queries. When I call the same GraphQL query multiple times with different POST data all the API calls gets canceled except the last one.

But I want all the APIs needs to be called.

Having this Config in app.module.ts provider

     {
        provide: APOLLO_OPTIONS,
        useFactory: (httpLink: HttpLink) => {
            const http = httpLink.create({uri: '/graphql'});
            const errors = onError(({graphQLErrors, networkError}) => { return graphQLErrors; });
            const link = errors.concat(http);
            return {
                link,
                cache: new InMemoryCache(),
            };
        },
        deps: [HttpLink],
    }

app.service.ts

  public getEmployeesData(
    input: {projectId: number}
): Observable<ApolloQueryResult<{employee_query: any}>> {
    return this.apollo.watchQuery<{employee_query: any}>({
        query:gql` query employee_query(
    $projectId: INT!
) {
    employee_query(
        projectId: $projectId
    ) {
        firstname
        lastname
        empId
        disignation
        
    }
},
        variables: input,
    }).valueChanges;
}

My Effect.ts

@Effect()
    public getEmployee(): Observable<IAction<any | HttpErrorResponse>> {
        return this._actions$.pipe(
            ofType(EmployeeAction.GET_EMPLOYEE_DATA),
            switchMap((action: IAction<any>) => {
                return this.getEmployeesData(action.payload).pipe(map(
                        (
                            response: ApolloQueryResult<{
                                employee_query?: any;
                            }>,
                        ) => {
                            return EmployeeAction.getEmployeeResponse(
                                response.data.employee_query
                            );
                        },
                    ),
                );
            }),
        );
    }

How are you calling the `getEmployeesData` method? Can you add calling code for it? — Octavian Mărculescu, Oct 17 '22 at 07:05
Calling it from @Effect. Updated the question as you requested. Please check — Gnik, Oct 17 '22 at 07:11
Your problem happens because of `switchMap`. Try to use `mergeMap` instead. — Octavian Mărculescu, Oct 17 '22 at 07:16

score 2 · Accepted Answer · answered Oct 17 '22 at 07:20

The issue here happens because the use of switchMap. It is specifically designed to behave like you described:

When a new inner Observable is emitted, switchMap stops emitting items from the earlier-emitted inner Observable and begins emitting items from the new one. It continues to behave like this for subsequent inner Observables.

In your case, mergeMap would be better suited:

Returns an Observable that emits items based on applying a function that you supply to each item emitted by the source Observable, where that function returns an Observable, and then merging those resulting Observables and emitting the results of this merger.

Why browser cancels HTTP POST requests when its not a duplicate request?

1 Answers1