diff --git a/README.md b/README.md
index 6a7ca83..c542c3f 100644
--- a/README.md
+++ b/README.md
@@ -16,10 +16,18 @@
## Table of Contents
+- [Table of Contents](#table-of-contents)
- [Installation](#installation)
+ - [Versions](#versions)
- [Basic Usage](#basic-usage)
+- [Usage with HttpClient or injectable service](#usage-with-httpclient-or-injectable-service)
- [Usage](#usage)
+ - [**Queries**](#queries)
+ - [**Lazy Queries**](#lazy-queries)
+ - [**Mutations**](#mutations)
+ - [**Code-splitted/Lazy feature/Lazy modules**](#code-splittedlazy-featurelazy-modules)
- [FAQ](#faq)
+- [Contributors ✨](#contributors-)
## Installation
@@ -65,12 +73,6 @@ You can follow the official [RTK Query guide with hooks](https://redux-toolkit.j
You can see the application of this repository for more examples.
-First, you need to install redux-toolkit:
-
-```bash
-npm install @reduxjs/toolkit
-```
-
We'll create a service definition that queries the publicly available
```ts
@@ -167,6 +169,41 @@ export class CounterManagerComponent {
+## Usage with HttpClient or injectable service
+
+You can use the `fetchBaseQuery` function to create a base query that uses the Angular `HttpClient` to make requests or any injectable service. Example:
+
+```ts
+
+const httpClientBaseQuery = fetchBaseQuery((http = inject(HttpClient), enviroment = inject(ENVIRONMENT)) => {
+ return async (args, { signal }) => {
+ const {
+ url,
+ method = 'get',
+ body = undefined,
+ params = undefined,
+ } = typeof args === 'string' ? { url: args } : args;
+ const fullUrl = `${enviroment.baseAPI}${url}`;
+
+ const request$ = http.request(method, fullUrl, { body, params });
+ try {
+ const data = await lastValueFrom(request$);
+ return { data };
+ } catch (error) {
+ return { error: { status: (error as HttpErrorResponse).status, data: (error as HttpErrorResponse).message } };
+ }
+ };
+});
+
+export const api = createApi({
+ reducerPath: 'api',
+ baseQuery: httpClientBaseQuery,
+//...
+
+```
+
+
+
## Usage
### **Queries**
@@ -294,16 +331,6 @@ export const postsApi = createApi({
// ...
-export function providePostsQuery(): EnvironmentProviders {
- return provideState(postsApi.reducerPath, postsApi.reducer, {
- metaReducers: [postsApi.metareducer],
- });
-}
-
-//
-// OR
-// New Standalone Provider Api
-
import { provideStoreApi } from 'ngrx-rtk-query';
...
diff --git a/src/app/core/services/counter.ts b/src/app/core/services/counter.ts
index 650339b..c9cdee0 100644
--- a/src/app/core/services/counter.ts
+++ b/src/app/core/services/counter.ts
@@ -8,7 +8,7 @@ export interface CountResponse {
export const counterApi = createApi({
reducerPath: 'counterApi',
- // Example of overriding the default fetchBaseQuery with injectable
+ // Example of overriding the default fetchBaseQuery with injectable services
baseQuery: fetchBaseQuery((store = inject(Store)) => {
console.log('store', store);
return fetchBaseQuery({ baseUrl: '/' });