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.
SWR is a React Hooks library for data fetching that implements the stale-while-revalidate cache strategy. It provides a set of hooks (useSWR, useSWRInfinite, useSWRImmutable, useSWRSubscription, useSWRMutation) that enable efficient client-side data fetching with automatic caching, deduplication, revalidation on focus, interval polling, and optimistic updates. The library is designed as a standalone npm package with a modular internal architecture, featuring a middleware system for extensibility, a configurable cache provider, and built-in support for React Suspense and server-side rendering. It is widely used in production and actively maintained by Vercel.