Support Request: Need Recommendation for DI

[dapperdandev]

I'm submitting a...

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

Current behavior

Currently, there is no clear way to inject services/tokens for use with rtk-query.

Expected behavior

I would like to inject HttpClient for use as a custom query function. The sample code below intends to use fetchFn, but that may not be the actual solution. The only problem I'm trying to solve is providing HttpClient, then using that for network requests.

Minimal reproduction of the problem with instructions

// features.api.ts
import { createApi } from 'ngrx-rtk-query';
import { configureBaseQuery } from '@app/shared/data-access/+store';

export const featuresApiKey = 'featuresCache';
const cacheTags = {
    enabledFeatures: 'enabledFeatures'
};

export const featuresApi = createApi({
    reducerPath: featuresApiKey,
    tagTypes: Object.values(cacheTags),
    baseQuery: configureBaseQuery('/api'),
    endpoints: (build) => ({
        getEnabledFeatures: build.query<Array<string>, string>({
            query: (organizationId) => ({
                url: `/organizations/${organizationId}/features`
            })
        })
    })
});

export const { useGetEnabledFeaturesQuery } = featuresApi;

// configure-base-query.ts
export const configureBaseQuery = (endpointUrl: string, maxRetries: number = 0): BaseQueryFn => {
    return retry(
        fetchBaseQuery({
            // fetchFn: httpClient, 
            baseUrl: `${endpointUrl}`,
            prepareHeaders: (headers: Headers, api) => {...}
        }),
        { maxRetries }
    );
};

What is the motivation / use case for changing the behavior?

We sometimes use angular services rather than rtk-query for network requests. We want our HttpInterceptors to work for both rtk-query and angular services.

Environment

Angular version: 12.2.0


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [x] Edge version 95.0.1020.30

[SaulMoro]

Remember that baseQuery is designed to return promises: https://redux-toolkit.js.org/rtk-query/api/createApi#basequery

Thanks to using RTK Query, I have been able to remove the need for HttpClient (since you can use RTK Query functions as an interceptor if necessary). But if you need to use it, you can try something like the following:

1. In app.component or APP_INITIALIZER

import { Injector, NgModule } from '@angular/core';

export let AppInjector: Injector;
    
export class AppModule {
      constructor(private injector: Injector) {
         AppInjector = this.injector;
      }
}

You can export the AppInjector variable from another source

2. In customBaseQuery / queryFn file

import {AppInjector} from '../app.module';

const httpClient = AppInjector.get(HttpClient); // or AppInjector.get(MyService);

Later in baseQuery, you must act according to the method (Get, Post, ...). You can look at the axios example: https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery

If you make it work, can you share it? I can create a httpClientBaseQuery utility for the library

[dapperdandev]

@SaulMoro Thanks for the response. I haven't had a chance to circle back to this yet. We've decided to move forward by putting interceptor logic somewhere that both angular interceptors and rtk middlewares can use.

I like the injector idea, but we have to jump through a few hoops to ensure we don't end up with circular dependencies. Especially with Nx. I'm still interested in giving that a shot though.