comparison/features

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

React Query lagged query data capability

React Query provides a way to continue displaying an existing query's data while the next query loads, similar to the UX that Suspense will soon provide natively. This is important for pagination UIs or infinite loading UIs where you do not want to show a hard loading state whenever a new query is requested. Other libraries render a hard loading state for the new query unless it has been prefetched.

React Query partial query matching with deterministic serialization

React Query uses deterministic query key serialization, allowing manipulation of variable groups of queries without knowing each individual query-key. For example, you can refetch every query that starts with `todos` in its key regardless of variables, or target specific queries with or without variables, and use a filter function to match queries that pass specific conditions.

React Query pre-usage query configuration

React Query allows configuring how queries and mutations will behave before they are used. A query can be fully configured with defaults beforehand, and when the time comes to use it, only `useQuery({ queryKey })` is necessary, instead of requiring the fetcher and options with every usage. SWR has only partial support for this through a global default fetcher, not on a per-query basis and not for mutations.

React Query features comparison table

React Query capabilities summary: Queries (✅), Cache Persistence (✅), Devtools (✅), Polling/Intervals (✅), Parallel Queries (✅), Dependent Queries (✅), Paginated Queries (✅), Infinite Queries (✅), Bi-directional Infinite Queries (✅), Infinite Query Refetching (✅), Lagged Query Data (✅), Selectors (✅), Initial Data (✅), Scroll Recovery (✅), Cache Manipulation (✅), Outdated Query Dismissal (✅), Render Batching & Optimization (✅), Auto Garbage Collection (✅), Mutation Hooks (✅), Offline Mutation Support (✅), Prefetching APIs (✅), Query Cancellation (✅), Partial Query Matching (✅), Stale While Revalidate (✅), Stale Time Configuration (✅), Pre-usage Query/Mutation Configuration (✅), Window Focus Refetching (✅), Network Status Refetching (✅), General Cache Dehydration/Rehydration (✅), Offline Caching (✅), React Suspense (✅), Abstracted/Agnostic Core (✅), Automatic Refetch after Mutation (🔶 requires extra user-code), Normalized Caching (🛑 not supported).

React Query platform requirements and supported syntax

React Query requires React as its platform and supports Promise, REST, and GraphQL query syntax. Its API definitions can be located in components or external configuration.

React Query works with any asynchronous fetching client including GraphQL

React Query's fetching mechanisms are built on Promises, making it agnostic to the data fetching client. This means you can use React Query with GraphQL or any other asynchronous data fetching solution.

TanStack Query vs client state managers

TanStack Query is a server-state library responsible for managing asynchronous operations between server and client. Redux, MobX, Zustand, and other global state managers are client-state libraries. TanStack Query replaces the boilerplate code and wiring used to manage cache data in client-state, replacing it with a few lines of code.

When to keep using client state managers

After migrating async code to TanStack Query, the truly globally accessible client state left over is usually very small in most applications. However, applications with massive amounts of synchronous client-only state (like visual designers or music production applications) may still need a client state manager. TanStack Query is not a replacement for local/client state management, but can be used alongside most client state managers with zero issues.

Boilerplate eliminated by TanStack Query

When moving server-state management from a global state manager to TanStack Query, the following boilerplate can be removed: Connectors, Action Creators, Middlewares, Reducers, Loading/Error/Result states, and Contexts. With a few hook calls to useQuery and useMutation, these pieces become unnecessary.

Example global state reduction with TanStack Query

If global state initially contains server-state assets (projects, teams, tasks, users) along with client state (themeMode, sidebarStatus), migrating server state to TanStack Query reduces global state to only the client state (themeMode, sidebarStatus), significantly reducing the burden on the global state manager.

Give your agent this brain