What is Angular Query?

This is Experimental Bite-Sized Category Test.

High Signal - Low Noise
Concise, impactful insights with minimal clutter.

What is Angular Query?

Short breakdown 👇

Angular Query is used for syncing server data with client applications.

Without any unneeded abstractions.

Ideal for

grids
tables
listings
etc...

We have 2 packages to look at

ngneat/query
tanstack/angular-query-experimental

ngneat is unofficial adapter

supporting RxJS & Signals by @ngneat_org
@NetanelBasal

TanStack one is official

developed by @Arnoud_dv @tan_stack
for now supports only Signals
RxJS support planned for the future

Both are using TanStack Query Core.

🟨 Core Concepts 🟨

1. Queries

Declaratively manage data fetching.
Letting Angular Query handle the timing and specifics of server communication.

2. Mutations

Handle data modification
Integrating queries for a consistent data management

🧹 Cache & Cleanup 🧹

1. Cache Management

Data maintenance and retrieval is handled by Query Client & Query Cache.

2. Query Keys

A system for identifying and managing data dependencies across components.

3. SWR

Ensures data freshness by smartly revalidating data behind the scenes without sacrificing performance.

💻 Significant DX improvements 💻

Reduced boilerplate Out of the box
Intelligent caching and data management strategies
Giant performance boost in writing async code
Pairs fantastic with component state management libraries

Basic usage with ngneat/query:

Service usage:


import { injectQuery } from '@ngneat/query';

@Injectable({ providedIn: 'root' })
export class TodosService {
  #http = inject(HttpClient);
  #query = injectQuery();

  getTodos() {
    return this.#query({
      queryKey: ['todos'] as const,
      queryFn: () => {
        return this.http.get(
          'https://jsonplaceholder.typicode.com/todos',
        );
      },
    });
  }
}

Component usage with Observables:


@Component({
  standalone: true,
  template: `
    @if (todos.result$ | async; as result) {
      @if (result.isLoading) {
           Loading
      }
      @if (result.isSuccess) {
         {{ result.data[0].title }}
      }
      @if (result.isError) {
          Error
      }
    }
  `,
})
export class TodosPageComponent {
  todos = inject(TodosService).getTodos();
}

Component usage with Signals:


@Component({
  standalone: true,
  template: `
    @if (todos().isLoading) {
        Loading
    }
    @if (todos().data; as data) {
        {{ data[0].title }}
    }
    @if (todos().isError) {
        Error
    }
  `,
})
export class TodosPageComponent {
  todos = inject(TodosService).getTodos().result;
}

Make sure to let me know if you would like to see more materials in this short form.

Comment or thumbs up/down on e-mail :)

ngneat/query:

TanStack Angular Query:

Tagged in:

Bite-Sized

Last Update: February 03, 2024

What is Angular Query?