$ show TanStack/query
TanStack Query is a multi-framework, protocol-agnostic library for managing asynchronous server state in web applications. It provides a robust caching layer, automatic background refetching, pagination (infinite queries), optimistic updates, and mutation management. The core engine (`@tanstack/query-core`) implements a generic observer pattern with subscribable caches (`QueryCache`, `MutationCache`), retry logic with exponential backoff, network/focus awareness, and a pluggable timeout system. Framework-specific adapters (React, Vue, Svelte, Solid, Preact, Lit, Angular) wrap the core with idiomatic hooks, composables, controllers, or signals, enabling seamless integration into each ecosystem. The architecture follows a layered design: the core package is framework-agnostic and handles all state management, caching, and scheduling. Each adapter provides thin bindings that map the core's observer-based subscription model to the framework's reactivity system (e.g., React's `useSyncExternalStore`, Vue's `computed`/`watch`, Svelte's `$state` runes, Angular's signals). Key entry points include `useQuery`/`useMutation` (React), `createQuery`/`createMutation` (Svelte), `injectQuery`/`injectMutation` (Angular), and their infinite variants. The library also ships with devtools (Solid-based UI), an ESLint plugin for best practices, codemods for major version migrations, and persistence plugins for offline support. Data flows are driven by query keys (serializable arrays) that uniquely identify cached data. Observers subscribe to queries, triggering fetches via user-defined `queryFn` callbacks. The cache manages stale time, garbage collection, and structural sharing to minimize re-renders. Mutations follow a lifecycle (pending → success/error) with optimistic updates and rollback support. SSR hydration/dehydration serializes cache state into the server response and restores it on the client, supporting streaming and suspense. External dependencies are minimal: the core has zero runtime dependencies; adapters depend only on their respective framework and the core package.
The LLM identified 6 files worth highlighting for reuse:
Implements the `Mutation` class as a reducer-based state machine for managing mutation lifecycle (pending, success, error, pause, continue). Integrates with a `Retryer` for retry logic, network mode, and scope-based serialization. The pure reducer (`#dispatch`) makes state transitions predictable and testable. This pattern is reusable for any async operation that requires a finite state machine with retry and pause/resume capabilities.
Provides `dehydrate` and `hydrate` functions to serialize and restore the entire query/mutation cache for server-side rendering. Supports custom predicates, data transformers, error redaction, and pending promise handling. The pipeline is generic and can be adapted to serialize any cache-like state for transfer between server and client, with built-in safeguards against leaking sensitive error details.
Encapsulates retry logic with configurable delay, exponential backoff, cancellation, and pause/resume based on network state. The `Retryer` is decoupled from the mutation/query classes, making it a reusable primitive for any async operation that needs robust retry behavior. It also supports reusing an initial promise to avoid duplicate work.
Manages batched and scheduled notifications to observers and caches. Provides `setBatchNotifyFunction` for framework-specific batching (e.g., Solid's microtask scheduler) and `schedule` for deferred execution. This pattern is essential for any reactive system that needs to coalesce multiple state changes into a single notification cycle to avoid redundant renders.
A subscribable singleton that tracks online/offline status and notifies listeners on change. Uses `setEventListener` to allow custom environment setup (e.g., browser `online`/`offline` events, React Native's `NetInfo`). This pattern is reusable for any global state that needs to be observed across an application, such as network connectivity, focus state, or user presence.
Manages a picture-in-picture (PiP) popup window for the devtools panel. Handles window creation, lifecycle, style propagation, and localStorage persistence of window state. The provider/consumer pattern with `usePiPWindow` hook is a self-contained solution for any application that needs to open a secondary window with synchronized state and styling, such as debugging tools or multi-window dashboards.