Skip to main content
provideStoreApi sets up RTK Query to work with NgRx Store. It registers the API reducer with the store, initializes the hooks system, and optionally configures automatic refetching listeners.

​
Usage

​
Basic Setup

import { ApplicationConfig } from '@angular/core';
import { provideStore } from '@ngrx/store';
import { provideStoreApi } from 'ngrx-rtk-query';
import { postsApi } from './posts/api';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(),
    provideStoreApi(postsApi),
  ],
};

​
With Redux DevTools

import { provideStore } from '@ngrx/store';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { provideStoreApi } from 'ngrx-rtk-query';
import { postsApi } from './posts/api';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(),
    provideStoreDevtools({
      name: 'RTK Query App',
      logOnly: !isDevMode(),
    }),
    provideStoreApi(postsApi),
  ],
};

​
Multiple APIs

import { provideStoreApi } from 'ngrx-rtk-query';
import { postsApi } from './posts/api';
import { usersApi } from './users/api';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(),
    provideStoreApi(postsApi),
    provideStoreApi(usersApi),
  ],
};

​
Function Signature

function provideStoreApi(
  api: Api<any, Record<string, any>, string, string, any>,
  config?: StoreQueryConfig
): EnvironmentProviders

​
Parameters

​
api
Api
required
The RTK Query API instance created with createApi. This defines your endpoints, base query, and cache behavior.
​
config
StoreQueryConfig
Optional configuration object.

​
Returns

EnvironmentProviders - Angular environment providers that can be used in ApplicationConfig or route providers.

​
How It Works

  1. Store Integration: Registers the API’s reducer with NgRx Store under api.reducerPath (defaults to 'api')
  2. Hook System: Creates Angular-compatible hooks (useXxxQuery, useMutation, etc.) that use signals and store selectors
  3. Listeners: Sets up automatic refetching on window focus and network reconnection (unless disabled)
  4. Dispatch Bridge: Connects RTK Query actions to NgRx Store’s dispatch mechanism

​
When to Use

Use provideStoreApi when:
  • Your application already uses NgRx Store
  • You want Redux DevTools integration for debugging
  • You need compatibility with other NgRx features (effects, router store, etc.)
  • You want a single state management solution across your app
Prerequisites: You must call provideStore() before provideStoreApi(). The NgRx Store must be available in the dependency injection tree.

​
Common Errors

​
”Provide the Store is necessary”

Error: Provide the Store is necessary to use the queries. Did you forget to provide the store?
Solution: Add provideStore() before provideStoreApi(): 
providers: [
  provideStore(), // Must come first
  provideStoreApi(postsApi),
]

​
“Middleware not added”

If queries aren’t working, ensure the API reducer is registered: 
// The reducer is automatically registered by provideStoreApi
// No manual provideState() call needed
providers: [
  provideStore(),
  provideStoreApi(postsApi), // Automatically calls provideState()
]

​
Comparison with provideNoopStoreApi

FeatureprovideStoreApiprovideNoopStoreApi
NgRx dependencyRequiredNone
Redux DevToolsSupportedNot available
State integrationFull NgRx StoreStandalone signal-based store
Bundle sizeLarger (includes NgRx)Smaller
Use caseApps with NgRxStandalone RTK Query

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us