Angular10中GraphQL多POST请求被取消问题求助

问题根源 #

你在NgRx Effect中使用了switchMap操作符，这个操作符的特性是每当新的Observable触发时，会自动取消前一个未完成的Observable订阅。所以当你连续触发GET_EMPLOYEE_DATA动作时，前几次的API请求都会被强制取消，仅保留最后一次请求。

解决方案 #

将Effect中的switchMap替换为concatMap或mergeMap：

• concatMap：按请求触发顺序依次执行，前一个请求完成后再处理下一个，适合需要保证返回顺序的场景
• mergeMap：同时处理所有请求，不保证返回顺序，适合对顺序无要求的场景

修改后的Effect.ts代码 #

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

额外优化（可选） #

如果希望每次请求都强制走网络而非Apollo缓存，可以在watchQuery配置中添加fetchPolicy: 'network-only'：

// app.service.ts中修改getEmployeesData方法
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,
        fetchPolicy: 'network-only' // 强制发起网络请求
    }).valueChanges;
}

内容的提问来源于stack exchange，提问作者Gnik