Usage with Angular HttpClient?

[szyszak]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[X] Support request
[ ] Other... Please describe:

Current behavior

I've been trying to figure out how to use this library with Angular HttpClient, so I can use interceptors for error handling, JWT etc.

// angular-base-query.ts

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injector } from '@angular/core';
import type { BaseQueryFn } from '@reduxjs/toolkit/query';
import { lastValueFrom } from 'rxjs';

const injector = Injector.create({
  providers: [{ provide: HttpClient }],
});

const http = injector.get(HttpClient);

export const angularBaseQuery =
  (
    { baseUrl }: { baseUrl: string } = { baseUrl: '' }
  ): BaseQueryFn<
    {
      url: string;
      method?: string; 
      data?: any;
      params?: HttpParams; 
    },
    unknown,
    unknown
  > =>
  async ({ url, method = 'get', data, params }) => {
    const fullUrl = `${baseUrl}${url}`;

    const request$ = http.request(method, fullUrl, {
      body: data,
      params,
    });

    const result = await lastValueFrom(request$);

    return {
      data: result,
    };
  };

Rest of the code looks like in the examples you provide in the docs.

I know my example code is kinda messy, but the main problem is this error thrown during runtime:

core.mjs:8990 Uncaught NullInjectorError: R3InjectorError[HttpClient -> HttpHandler]:
NullInjectorError: No provider for HttpHandler!
at NullInjector.get (core.mjs:8990:27)
at R3Injector.get (core.mjs:9157:33)
at injectInjectorOnly (core.mjs:4778:33)
at Module.ɵɵinject (core.mjs:4782:12)
at Object.HttpClient_Factory [as factory] (http.mjs:1402:1)
at R3Injector.hydrate (core.mjs:9252:35)
at R3Injector.get (core.mjs:9146:33)
at 41 (angular-base-query.ts:13:23)
at webpack_require (bootstrap:19:1)
at 6546 (artic.api.ts:234:20)

From what I understand, my code runs before the HttpClientModule is properly instantiated, and therefore there is no HttpHandler in the injected HttpClient instance.

I'm quite new to Angular and after trying different approaches I couldn't find a workaround for this. Do you think there is a viable way to use ngrx-rtk-query with HttpClient?

I will try to make a minimal app in StackBlitz and add it later.

[szyszak]

I've managed to get it working with this StackOverflow answer:
https://stackoverflow.com/a/49508355

[faragos]

Can you share your complete setup in a repo? 🙂
Would be interested in it. 🥇

[szyszak]

@faragos here you go:
https://github.com/szyszak/rtk-query-http-client

It's pretty bare bones, but you should to be able to get started from here.

Please note that I've been using Angular 14 in this repo. ngrx-rtk-query doesn't officially support Angular 14, so you'll have to either force install it, or downgrade Angular version.