Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add http client base query example #60

Merged
merged 3 commits into from
Oct 25, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 43 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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**
Expand Down Expand Up @@ -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';

...
Expand Down
2 changes: 1 addition & 1 deletion src/app/core/services/counter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: '/' });
Expand Down