skills.rest
oguzhan18
oguzhan18COMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-query

Manage Angular server state with TanStack Query signals, caching, mutations, and invalidation.

6|1|Updated Feb 18, 2026
Search Tags:#caching#tanstack#angular#signals#query#mutations#data-fetching
One-click install
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-query
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-query
Source: https://github.com/oguzhan18/angular-ecosystem-skills/tree/main/skills/angular-query
Command: npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-query

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a clear, signal-first approach for server-state management in Angular applications, removing boilerplate around data fetching, caching, and mutation coordination so components can declaratively consume asynchronous data.

Core Features & Use Cases

  • Signal-based Queries and Mutations: Use injectQuery and injectMutation to expose reactive signals for data, loading, and error states directly to component templates.
  • Caching, Invalidation & Optimistic Updates: Configure QueryClient for cache policies, invalidate queries on mutations, and implement optimistic updates for snappy UI.
  • DevTools and Service Configuration: Integrate Angular Query DevTools and provideTanStackQuery with a shared QueryClient in application providers for centralized behavior.
  • Use Case: Fetch a todos list with injectQuery, display loading/error states in a template, and use injectMutation to add a todo with optimistic update and cache invalidation.

Quick Start

Use the angular-query skill to configure provideTanStackQuery with a QueryClient and create an injectQuery that fetches '/api/todos' and exposes signal-based data to a component template.

Frequently Asked Questions about angular-query

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fetch and cache data in Angular using signals?▼

Configure provideTanStackQuery with a shared QueryClient in application providers to centralize caching behavior. Use injectMutation to perform mutations, then invalidate query keys to refresh cached signal data and implement optimistic UI updates.

What is the best way to handle server state management for Angular applications?▼

Use injectQuery and injectMutation to expose reactive signals for data, loading, and error states directly to component templates, removing manual subscription boilerplate for asynchronous data consumption.

Does TanStack Query work with Angular signals?▼

Yes, TanStack Query works with Angular signals by using injectQuery and injectMutation patterns to expose reactive signal-based data, loading, and error states directly to component templates without manual subscription management.

How do I invalidate cached query data after a mutation in Angular?▼

Invalidate cached query data after an injectMutation by managing query keys within a configured QueryClient, triggering cache invalidation to refresh signal-based data and coordinating optimistic updates for snappy UI.

How do I configure Angular Query DevTools for my application?▼

Integrate Angular Query DevTools alongside provideTanStackQuery with a shared QueryClient in application providers to monitor signal-based queries, mutations, cache invalidation, and centralized query behavior.

Can I return observables directly from queryFn functions in Angular?▼

Yes, queryFn functions can return promises or observables. Configure provideTanStackQuery with a QueryClient, implement queryFn functions to fetch data, and expose signal-based data directly to component templates.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-query

Manage server state and data fetching in React with TanStack Query v5.

Official
Intermediate
gileckgileck

react-hook-organization

Standardize React Query and Zustand hook organization in Next.js projects.

Community
Intermediate
bartolomeomuellerbartolomeomueller

tanstack-query

Manage client-side server state with automatic caching and background refetching.

Community
Advanced
bluehandsbluehands

angular-signals

Implement signal-based reactive state management in Angular applications.

Official
Intermediate