Merge pull request #60 from SaulMoro/next

docs: add http client base query example

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 {
 
 <br/>
 
+## 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,
+//...
+
+```
+
+<br/>
+
 ## 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';
 
 ...

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: '/' });