Cancel an HTTP request in NgRx effect - ngrx-effects

Question

I have create an NgRx effect that executes a query. It can take quite some time, so I want to be able to cancel the request. I have created the following actions:
export const executeQuery = createAction(QueryActions.QUERY_EXECUTE, props<{ endpoint: string, token: string, database: string, query: string }>());
export const cancelQuery = createAction(QueryActions.QUERY_CANCEL);
export const executeQuerySuccess = createAction(QueryActions.QUERY_EXECUTE_SUCCESS, props<{ endpoint: string, token: string, database: string, query: string, result: string }>());
export const executeQueryError = createAction(QueryActions.QUERY_EXECUTE_ERROR, props<{ message: string }>());
The effect looks like this:
#Injectable()
export class QueryEffects {
executeQuery$ = createEffect(() =>
this.actions$.pipe(
ofType(QueryActions.QUERY_EXECUTE),
switchMap(({ endpoint, token, database, query}) => {
return this.queryService.executeQuery(endpoint, token, database, query).pipe(
map(result => executeQuerySuccess({ endpoint, token, database, query, result })),
catchError(error => of(executeQueryError({ message: error })))
}),
takeUntil(this.actions$.pipe(ofType(QueryActions.QUERY_CANCEL)))));
constructor(private actions$: Actions, private queryService: QueryService) {
}
}
The effect is invoked from a component when the Execute button is clicked. This works great. When I click it again, then the previous execution is cancelled and another execution is started.
When I click the Cancel button, then it dispatches the QUERY_CANCEL action and the effect is terminated. But when I call Execute again, then no new query is executed anymore.
It seems that the takeUntil cancels the entire effect. When moving the takeUntil directly after the map, then it seems to work:
#Injectable()
export class QueryEffects {
executeQuery$ = createEffect(() =>
this.actions$.pipe(
ofType(QueryActions.QUERY_EXECUTE),
switchMap(({ endpoint, token, database, query}) => {
return this.queryService.executeQuery(endpoint, token, database, query).pipe(
map(result => executeQuerySuccess({ endpoint, token, database, query, result })),
takeUntil(this.actions$.pipe(ofType(QueryActions.QUERY_CANCEL))),
catchError(error => of(executeQueryError({ message: error })))
})));
constructor(private actions$: Actions, private queryService: QueryService) {
}
}
All examples seem to have the takeUntil much lower, so I don't really know why I need to do it like this. Is this the proper way to do this?