Skip to main content

​
Introduction to ngrx-rtk-query

ngrx-rtk-query is a plugin that brings the power of RTK Query (Redux Toolkit Query) to Angular applications with NgRx. It combines RTK Query’s auto-generated hooks with Angular’s Signals to deliver the same powerful data fetching and caching functionality as the official RTK Query guide with hooks.

​
What is ngrx-rtk-query?

ngrx-rtk-query bridges the gap between React’s RTK Query and Angular’s component model, providing:
  • Auto-generated hooks from API definitions (useXxxQuery, useLazyXxxQuery, useXxxMutation)
  • Signal-based reactivity for fine-grained change detection
  • Seamless integration with or without NgRx Store
  • TypeScript-first design with full type safety
  • Familiar API that follows RTK Query conventions

Installation

Get started with installation instructions and version compatibility

Quick Start

Build your first API integration in minutes

Queries

Learn how to fetch data with queries and lazy queries

Mutations

Discover how to modify data with mutations

​
Key Features

​
Signal-Based Reactivity

Leverage Angular Signals for optimal change detection and reactivity: 
export class PostsListComponent {
  postsQuery = useGetPostsQuery();
  
  // Fine-grained signal access
  isLoading = this.postsQuery.isLoading(); // Better change detection
  data = this.postsQuery.data();
}

​
Auto-Generated Hooks

Define your API once, and get fully-typed hooks automatically: 
export const postsApi = createApi({
  endpoints: (build) => ({
    getPosts: build.query<Post[], void>({ /* ... */ }),
    addPost: build.mutation<Post, Partial<Post>>({ /* ... */ }),
  }),
});

// Auto-generated hooks ready to use
export const { useGetPostsQuery, useAddPostMutation } = postsApi;

​
Flexible Store Integration

Works with or without NgRx Store: 
import { provideStore } from '@ngrx/store';
import { provideStoreApi } from 'ngrx-rtk-query';

providers: [
  provideStore(),
  provideStoreApi(postsApi),
]

​
Smart Caching & Invalidation

Built-in intelligent caching with tag-based invalidation: 
getPosts: build.query<Post[], void>({
  query: () => ({ url: '/posts' }),
  providesTags: [{ type: 'Posts', id: 'LIST' }],
}),
addPost: build.mutation<Post, Partial<Post>>({
  query: (body) => ({ url: '/posts', method: 'POST', body }),
  invalidatesTags: [{ type: 'Posts', id: 'LIST' }],
}),

​
Dynamic Query Arguments

Pass signals, functions, or static values as query arguments: 
// Signal input from router
id = input.required<number>();
postQuery = useGetPostQuery(this.id);

// Function for computed values
postQuery = useGetPostQuery(() => this.userId());

// Skip conditionally with skipToken
locationQuery = useGetLocationQuery(() => this.character()?.location ?? skipToken);

​
Infinite Queries

Built-in support for pagination and infinite scrolling: 
getPokemon: build.infiniteQuery<Pokemon[], string, number>({
  infiniteQueryOptions: {
    initialPageParam: 1,
    getNextPageParam: (lastPage, allPages, lastPageParam) => lastPageParam + 1,
  },
  query: ({ queryArg, pageParam }) => `/type/${queryArg}?page=${pageParam}`,
}),

​
TypeScript Excellence

Fully typed API with excellent IDE support and type inference: 
interface Post {
  id: number;
  name: string;
  fetched_at: string;
}

// Full type safety throughout
const postsQuery = useGetPostsQuery(); // Type: Signal<Post[]>
const addPost = useAddPostMutation(); // Accepts Partial<Post>

​
Why ngrx-rtk-query?

Proven Technology

Built on RTK Query, battle-tested by the Redux community

Angular Native

Designed specifically for Angular with Signals and dependency injection

Developer Experience

Auto-generated hooks, full TypeScript support, and minimal boilerplate

Performance

Optimized change detection with fine-grained signal updates

​
Ready to Get Started?

Install ngrx-rtk-query

Follow the installation guide to add ngrx-rtk-query to your Angular project
Version Alignment: Library versions align with Angular major versions (e.g., ngrx-rtk-query 21.x works with Angular 21.x)

Build docs developers (and LLMs) love

Get started for freeTalk to us