Fetching that brilliant bit

Introducing @void-snippets/angular: Signal-Native CRUD for Angular 19+ | Shah Tirth

AngularTypescriptData FetchingOpen Source

July 5, 2026

Introducing @void-snippets/angular: Signal-Native CRUD for Angular 19+

Type-safe, batteries-included data fetching for Angular with MaybeSignal reactivity and full optimistic stack support.

Every Angular app rewrites the same data-fetching layer: fetch lists, track loading states, handle errors, invalidate caches, mutate with optimistic updates. The code isn't hard—it's just identical every time.

@void-snippets/angular extracts that boilerplate once, built ground-up for Angular 19+ and Signals. No async pipes. No subscription management. Just inject() and reactive Signals that automatically respond to your data.

The Problem We're Solving

Building a contacts CRUD feature typically looks like:

// The old way — lots of manual state
export class ContactsComponent {
  private apiService = inject(ContactsApiService);
  private queryClient = inject(QueryClient);

import { inject } from '@angular/core';
import { createResourceInject } from '@void-snippets/angular';
import { ContactsService } from './contacts.service';
import type { Contact } from './contacts.types';

export function useContactResource() {
  return createResourceInject('contacts', inject(ContactsService), {
    defaultParams: { page: 1, limit: 20 },
    optimistic: {
      update: (cache, { _id, payload }) =>
        cache.map(c => c._id === _id ? { ...c, ...payload } : c),
      remove: (cache, id) => cache.filter(c => c._id !== id),
    },
  });
}

// In your component:
export class ContactsComponent {
  private resource = useContactResource();
  
  // ✨ That's it. Everything you need:
  contacts = this.resource.injectList();
  mutations = this.resource.injectMutations();
}

// Static parameters — fetches once
const contacts = resource.injectList({ page: 1, limit: 20 });

// Reactive parameters — auto-refetches when signal changes
const params = signal({ page: 1, limit: 20 });
const contacts = resource.injectList(params);

// Update the signal, query fires automatically:
params.set({ page: 2, limit: 20 });
// contacts.list() updates with new data

Feature	Status
`injectList()` — paginated queries with 3 loading states	✅ Signal-based
`injectGet(id)` — single-item queries, auto-disable on empty ID	✅ Signal-based
`injectMutations()` — typed create/update/remove with Signal states	✅ Signal-based
`injectInfinite()` — infinite scroll with flattened `allItems`	✅ Signal-based
Optimistic updates with rollback	✅ WeakMap stack
Custom adapters	✅ Same API as React
Error handling and retry	✅ Via TanStack Query

// contacts.types.ts
import type { VSId } from '@void-snippets/core';

export namespace Contact {
  export type Id = VSId<string, 'Contact'>;
  
  export interface Base {
    _id: Id;
    name: string;
    email: string;
    phone: string;
  }
  
  export interface Detail extends Base {
    createdBy: { name: string };
    notes: string;
    createdAt: string;
  }
  
  export namespace Apis {
    export interface Create { name: string; email: string; phone: string; }
    export interface Update { name?: string; email?: string; phone?: string; }
  }
}

// contacts.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AngularResourceService } from '@void-snippets/angular';
import type { Contact } from './contacts.types';

@Injectable({ providedIn: 'root' })
export class ContactsService extends AngularResourceService<
  Contact.Id,
  Contact.Base,
  Contact.Detail,
  Contact.Apis.Create,
  Contact.Apis.Update
> {
  constructor() {
    super('/api/contacts');
  }
}

// contacts.resource.ts
import { inject } from '@angular/core';
import { createResourceInject } from '@void-snippets/angular';
import { ContactsService } from './contacts.service';
import type { Contact } from './contacts.types';

export function useContactResource() {
  return createResourceInject('contacts', inject(ContactsService), {
    defaultParams: { page: 1, limit: 20 },
    optimistic: {
      update: (cache, { _id, payload }) =>
        cache.map(c => c._id === _id ? { ...c, ...payload } : c),
      remove: (cache, id) => cache.filter(c => c._id !== id),
      create: (cache, { payload, tempId }) => [
        { ...payload, _id: tempId as Contact.Id },
        ...cache,
      ],
    },
  });
}

// contacts-list.component.ts
import { Component, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatTableModule } from '@angular/material/table';
import { useContactResource } from './contacts.resource';
import type { Contact } from './contacts.types';

@Component({
  selector: 'app-contacts-list',
  standalone: true,
  imports: [CommonModule, MatTableModule],
  template: `
    @if (contacts.isLoading()) {
      <div>Loading contacts...</div>
    } @else if (contacts.isError()) {
      <div>Error: {{ contacts.error()?.message }}</div>
      <button (click)="contacts.refetch()">Retry</button>
    } @else {
      <table mat-table [dataSource]="contacts.list()">
        <!-- columns and rows -->
      </table>
    }
  `,
})
export class ContactsListComponent {
  private resource = useContactResource();
  
  contacts = this.resource.injectList();
  mutations = this.resource.injectMutations();
  
  async removeContact(id: Contact.Id) {
    // Optimistic update happens instantly
    // Rollback on error is automatic
    await this.mutations.remove.mutateAsync(id);
  }
}

import { provideVoidAngular } from '@void-snippets/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch(), withInterceptors([authInterceptor])),
    provideVoidAngular({
      queryClientConfig: {
        defaultOptions: {
          queries: { staleTime: 30_000, retry: 1 },
          mutations: { retry: 0 },
        },
      },
    }),
  ],
};

Introducing @void-snippets/angular: Signal-Native CRUD for Angular 19+

The Problem We're Solving

Table of Contents

The void-snippets Way

The Angular Innovation: MaybeSignal

Full Feature Parity with React

Code Example: Complete Feature

Architecture: Angular-First, Core-Shared

Installation

What's Next

Try It Now

Read more

Why Retrieval Quality Beats Model Quality (And Nobody Believes It Until They See It)

Designing Tool Schemas That Don't Confuse the Model

Write the Test Before the Code: TDD in NestJS with Jest and In-Memory MongoDB