Angular Resource Query

Lightweight async data fetching for Angular, built on top of the Resource API and @ngrx/signals.

Status: experimental — API may change.

Features

• Declarative data fetching via Angular's resource() API
• Shared in-memory cache backed by an NgRx Signal Store
• staleTime support to avoid redundant network requests
• Manual cache invalidation

Requirements

• Angular 19+
• @ngrx/signals 19+

Installation

npm install angular-resource-query

Setup

Add provideHttpClient() to your app config:

// app.config.ts
import { provideHttpClient } from "@angular/common/http";

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient()],
};

Usage

import { Component, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
import { queryResource } from 'angular-query';

interface Post {
  id: number;
  title: string;
}

@Component({ ... })
export class PostsComponent {
  private http = inject(HttpClient);
  private page = signal(1);

  posts = queryResource<Post[], number>({
    key: ['posts'],
    params: () => this.page(),
    loader: () => firstValueFrom(
      this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts')
    ),
    staleTime: 1000 * 60 // 1 minute
  });
}

@if (posts.isLoading()) {
<p>Loading...</p>
} @else if (posts.error()) {
<p>Error loading posts.</p>
} @else { @for (post of posts.value(); track post.id) {
<p>{{ post.title }}</p>
} }

<button (click)="posts.invalidate()">Invalidate cache</button>

API

queryResource<T, P>(options)

Creates a cached resource. Must be called in an injection context (class field or constructor).

| Option | Type | Description | | ----------- | ------------------ | --------------------------------------------------------------------------------- | | key | QueryKey | Cache key — array of primitives, e.g. ['posts', id] | | params | () => P | Reactive signal function — re-triggers the loader when it changes | | loader | () => Promise<T> | Async function that fetches the data | | staleTime | number (ms) | Duration before cached data is considered stale. If omitted, cache never expires. |

Returns a ResourceRef<T> extended with:

| Method | Description | | -------------- | -------------------------------------------------------------- | | invalidate() | Removes the entry from the cache and re-fetches on next access |

QueryKey

type QueryKey = (string | number | boolean | object)[];

Keys are serialized with JSON.stringify. Prefix-based invalidation is not yet supported.

License

MIT