saulmoro / ngrx-rtk-query Goto Github PK

I'm happy to start on a PR for this :). I might need some help on some of the improvement implementations.

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
[ ] Support request
[x] Other... Please describe: Update rtk to leverage bug fixes and improvements

Current behavior

Currently depends on RTK 1.7.1 which has a bug with polling: reduxjs/redux-toolkit#1691.

Expected behavior

Depend on RTK 1.7.2

Minimal reproduction of the problem with instructions

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

Environment

Angular version: X.Y.Z


Browser:
N/A
 
For Tooling issues:
N/A

Others:
N/A

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
[ ] Support request
[ ] Other... Please describe:

Current behavior

New feature in RTK Query
rtk-incubator/rtk-query#197

Expected behavior

skip uninitialized status on init query to prevent 1 render

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

Be up to date with RTK Query

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
[ ] Support request
[ ] Other... Please describe:

Current behavior

Expected behavior

Move lib to @reduxjs/redux-toolkit: https://github.com/reduxjs/redux-toolkit

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

I'm submitting a Bug

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

Current behavior

As soon as I run ng serve a whole bunch of errors pop up:

Failed to compile.

node_modules/ngrx-rtk-query/lib/store-rtk-query.module.d.ts:10:21 - error TS2694: Namespace '"C:/Users/9707015080089/Workspace/UT_InstructionUI/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

10     static ɵmod: i0.ɵɵNgModuleDeclaration<StoreRtkQueryModule, never, never, never>;

I have tried numerous things including downgrading the version and installing it with both ng and npm but I have no idea how to solve this.

Expected behavior

To build without errors

Minimal reproduction of the problem with instructions

I am trying to run a default scenario:

RTK Query Api:

import { fetchBaseQuery } from '@reduxjs/toolkit/query';
import { createApi } from 'ngrx-rtk-query';


export const instructionsOrchestrationApi = createApi({
  reducerPath: 'instructionsOrchestrationsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://<myurl>.com/contract/' }),
  tagTypes: ['Options'],
  endpoints: (builder) => ({
    getOptions: builder.query<object[], string>({
      query: () => 'get_contract_options/123',
    })
  })
})

export const {
  useGetOptionsQuery
} = instructionsOrchestrationApi;

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { MetaReducer, StoreModule } from "@ngrx/store";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AdditionalContributionsModule } from "./additional-contributions/additional-contributions.module";
import { StoreDevtoolsModule } from "@ngrx/store-devtools";
import { debug } from "./middleware/session-logging.meta.reducer";
// import { StoreRtkQueryModule } from 'ngrx-rtk-query';
export const metaReducers: MetaReducer<any>[] = [debug];

@NgModule({
	declarations: [AppComponent],
	imports: [
		BrowserModule,
		AppRoutingModule,
		BrowserAnimationsModule,
		AdditionalContributionsModule,
		StoreModule.forRoot({}, { metaReducers }),
		StoreRtkQueryModule.forRoot({ setupListeners: true }),
		StoreDevtoolsModule.instrument({
			maxAge: 25, // Retains last 25 states
			logOnly: false, // Restrict extension to log-only mode
		}),
		StoreRtkQueryModule.forRoot(),
	],
	providers: [],
	bootstrap: [AppComponent],
})
export class AppModule {}

Environment

Angular version: 11.1.1


Browser:
- [x] 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
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 14.18.3  
- Platform: Windows  

Others:

package.json file:

{
  "name": "instructions-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.1.1",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "~11.1.1",
    "@angular/compiler": "~11.1.1",
    "@angular/core": "~11.1.1",
    "@angular/forms": "~11.1.1",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "~11.1.1",
    "@angular/platform-browser-dynamic": "~11.1.1",
    "@angular/router": "~11.1.1",
    "@ngrx/effects": "^13.1.0",
    "@ngrx/store": "^11.1.1",
    "@ngrx/store-devtools": "^11.1.1",
    "@reduxjs/toolkit": "^1.8.0",
    "bootstrap": "^4.6.1",
    "elements": "^0.1.2",
    "jquery": "^3.6.0",
    "ngrx-rtk-query": "^3.0.0",
    "popper.js": "^1.16.1",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-replay": "^1.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.2",
    "@angular/cli": "~11.1.2",
    "@angular/compiler-cli": "~11.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.2"
  }
}

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
[ ] Support request
[ ] Other... Please describe:

Current behavior

Need more examples

Expected behavior

Add Posts Examples from RTK Query docs

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.

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
[ ] Support request
[ ] Other... Please describe:

Hey nice library ☺️
Is there a way to use the OpenAPI generation?🤔

Greetings
Marco

Thank you for good library. I was looking redux-toolkit then google brought me here. :)
This is not an issue. Just question as topic.

I'm submitting a...

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

Current behavior

Expected behavior

Initiate() with forceRefetch should run again and not bring old values from the cache. As a workaround, instead of calling another endpoint with initiate, I had to reimplement the other endpoint to avoid initiate.

Minimal reproduction of the problem with instructions

1. Call another endpoint within an endpoint using forceRefetch to call again

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

The motivation is to call another endpoint, taking advantage of its entire construction, without having to rewrite it again.

Is this problem related to redux-toolkit or the ngrx-rtk-query lib? I have not validated pure RTK in another project.

Environment

Browser:
- [x] Chrome (desktop) 118.0.5993.89 (Versão oficial) 64 bits
 
For Tooling issues:
   "@angular-devkit/build-angular": "^16.2.4",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "^16.2.4",
    "@angular/compiler": "^16.2.7",
    "@angular/compiler-cli": "^16.2.7",
    "@angular/language-service": "^16.2.7",
    "@ngrx/router-store": "^16.3.0",
    "@ngrx/store": "^16.3.0",
    "@ngrx/store-devtools": "^16.3.0",
    "ngrx-rtk-query": "^16.2.0",
    "@reduxjs/toolkit": "^1.9.6",
    "typescript": "~5.0.2"

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

I'm submitting a...

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

Current behavior

When using fetch with the lazy query strategy, undefined is returned. If we use unwrap() from fetch, we will get an exception because fetch returns undefined when it should return a promise to be resolved.

useLazyGetHymnResumeQuery = useLazyGetHymnResumeQuery()

function buttonClick() {
   // Does nothing
    this.useLazyGetHymnResumeQuery.fetch('1')

  //1- A strategy to understand what's going on
   const value1 = await this.useLazyGetHymnResumeQuery.fetch('1')
  
  // Prints undefined, but it should print Promise()....
   console.log(value1)  

  // 2- Another strategy to understand what's going on
   const value2 = await this.useLazyGetHymnResumeQuery
 
 // Prints Correctly, proves that fetch exists and is a method
 // fetch: () => ...
 // lastArg$: ...
 // state$: ...
   console.log(value2)  
}

Expected behavior

In the previous topic I basically performed some testing strategies but, I believe that the fetch is not working properly, returning a promise.

useLazyGetHymnResumeQuery = useLazyGetHymnResumeQuery()

function buttonClick() {
   // Dispatch an action and return a promise with .unwrap()
    this.useLazyGetHymnResumeQuery.fetch('1')
}

Minimal reproduction of the problem with instructions

1. User clicks the button
2. The buttonClick() method is called
3. useLazyGetHymnResumeQuery.fetch('1') does nothing

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

I'm trying to implement a manual call through RTK, so I need to call when the user clicks on a button in the App. And the lazy query strategy is not working correctly, I believe it's a problem with the fetch that doesn't return a promise and doesn't dispatch an action. The most interesting thing is that normal query (like use...Query) works without any problem.

Environment

Development, testing the tool

Angular version: ~13.2.2


Browser:
- [x] 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
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v16.14.2
- Platform:  Windows 

Others:
Sorry for the console tests, it was a way I had to test the tool with my app.

Which scope/s are relevant/related to the feature request?

ngrx-rtk-query

Information

Will there be an adjustment with Angular 18?

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

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

When upgrading to ngrx v16 (https://ngrx.io/guide/migration/v16), one of its requirements is typescript 5.x
However this package requires @reduxjs/toolkit ~1.9.5 which is incompatible with typescript 5.x
Do you have suggestions to complete the upgrade?

[EDIT]
Downgrading @reduxjs/toolkit to 1.9.3 seems to solve the problem

Environment

Angular version: 16.1.6


 
For Tooling issues:
- Node version: 18  
- Platform:  Linux 

Others:

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
[ ] Support request
[ ] Other... Please describe:

Current behavior

Add support to Lazy Query from rtk-incubator/rtk-query#177

Expected behavior

Minimal reproduction of the problem with instructions

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

Be up to date

• Implementation
• Test cases, Documentation & Real world example
• Add example in Readme

Others: