Why look beyond React Query

React Query, part of TanStack Query, provides a robust solution for managing server state in React applications, abstracting away complex data fetching, caching, and synchronization logic. Its strengths lie in automatic revalidation, optimistic updates, and built-in tools for pagination and infinite scrolling, reducing boilerplate code and improving application responsiveness. However, developers may explore alternatives for several reasons.

One common reason is integration with specific data architectures. While React Query is flexible, projects heavily invested in GraphQL might find a dedicated GraphQL client like Apollo Client more aligned with their needs, offering features like normalized caching and GraphQL-specific tooling. Another factor is the existing state management solution within a project. For applications already using Redux, RTK Query offers a seamless extension, leveraging the Redux ecosystem and developer tools. Simplicity and bundle size can also be considerations; libraries like SWR provide a lightweight alternative focusing primarily on data fetching and caching with a minimal API surface. Finally, some teams might prefer a more manual approach to data fetching, using lower-level HTTP clients like Axios, to maintain explicit control over every aspect of data flow, especially for simpler use cases where the overhead of a dedicated state management library might not be justified.

Top alternatives ranked

  1. 1. SWR — A lightweight, performant data fetching library for React

    SWR, which stands for Stale-While-Revalidate, is a React Hooks library for data fetching. It is developed by Vercel and offers a lean API focused on performance and real-time user experience. SWR automatically revalidates data in the background, ensuring the UI always displays the most up-to-date information while providing instant feedback with cached data. It supports various data sources, including REST APIs, GraphQL, and more, and integrates seamlessly with React applications. SWR's configuration options allow for fine-grained control over caching behavior, error handling, and revalidation strategies. Its smaller bundle size and simpler API can be advantageous for projects prioritizing minimal dependencies and quick setup, especially when the advanced features of a more comprehensive state management library are not required. SWR also offers features like dependent fetching, preloading, and optimistic UI updates, similar to React Query, but with a different architectural approach.

  2. 2. Apollo Client — A comprehensive state management library for GraphQL

    Apollo Client is a complete state management library for JavaScript applications, designed primarily for use with GraphQL APIs. It allows developers to fetch, cache, and modify application data, seamlessly integrating with React through its set of React Hooks. Apollo Client offers a normalized cache that automatically updates the UI when data changes, reducing manual state management. It provides powerful features like optimistic UI updates, pagination, and offline support. For applications heavily reliant on GraphQL, Apollo Client provides a tightly integrated and opinionated solution that leverages the full power of GraphQL's type system. Its tooling, including browser extensions and dev tools, enhances the developer experience when working with complex data graphs. While it can also be used with REST APIs via extensions, its primary strength lies in its deep integration with GraphQL, making it a strong contender for projects building GraphQL-first backends.

  3. 3. RTK Query — A data fetching and caching tool built on Redux Toolkit

    RTK Query is an optional add-on to Redux Toolkit, offering a powerful toolset for simplifying data fetching, caching, and invalidation in Redux-powered applications. It is built on top of Redux Toolkit's core, meaning it leverages Redux's predictable state container and developer tools. RTK Query automatically generates Redux slices, reducers, and thunks for data fetching, significantly reducing the boilerplate associated with manual Redux data management. It provides features like automatic caching, background revalidation, optimistic updates, and automatic garbage collection of unused cache entries. For teams already using or planning to use Redux for global state management, RTK Query offers a cohesive and efficient solution for handling server state. Its tight integration with the Redux ecosystem ensures a consistent development experience and access to Redux DevTools for debugging and monitoring data flow within the application.

    • Best for: Projects already using Redux, applications requiring a robust and predictable state management solution for server data, and teams looking for a Redux-native data fetching library.
    • RTK Query profile on pkgsearch
    • RTK Query Official Documentation

  4. 4. Axios — A promise-based HTTP client for the browser and Node.js

    Axios is a popular, promise-based HTTP client that simplifies making HTTP requests from both browsers and Node.js environments. It provides a straightforward API for sending requests, handling responses, and managing errors. While not a state management library like React Query, Axios is often used as the underlying HTTP client for fetching data, which is then managed by other state solutions or local component state. Its features include request and response interception, automatic JSON data transformation, client-side protection against XSRF, and the ability to cancel requests. For simpler applications or scenarios where developers prefer to manage caching and synchronization manually, Axios offers a fundamental building block for data fetching without imposing specific state management patterns. It is highly flexible and can be integrated with various React state management approaches, from useState and useReducer to more comprehensive libraries.

  5. 5. Fetch API — Native browser API for making network requests

    The Fetch API provides a modern, powerful, and flexible interface for fetching resources across the network, offering a more robust and feature-rich replacement for XMLHttpRequest. It is a native browser API, meaning no external library is required to use it, contributing to a smaller bundle size for web applications. The Fetch API uses Promises, making it easier to work with asynchronous operations and chain requests. It supports various request types, headers, and body formats, and allows for streaming responses. While Fetch API provides the raw capability to make network requests, it does not include built-in features for caching, revalidation, or state management. Developers choosing Fetch API typically combine it with React's built-in state hooks (useState, useEffect) or a custom caching layer to manage network state. This approach offers maximum control over data fetching logic but requires more manual implementation for features that React Query provides out-of-the-box, such as automatic retries or optimistic updates.

    • Best for: Projects prioritizing zero external dependencies for HTTP requests, developers who prefer granular control over data fetching logic, and applications with straightforward data requirements.
    • Fetch API on MDN Web Docs

Side-by-side

Feature React Query SWR Apollo Client RTK Query Axios Fetch API
Primary Use Case Server state management, caching Data fetching, caching, revalidation GraphQL state management, caching Redux-based data fetching, caching HTTP client for requests Native HTTP requests
Caching & Revalidation ✅ Automatic, configurable ✅ Stale-While-Revalidate strategy ✅ Normalized cache, GraphQL-aware ✅ Automatic, Redux-integrated ❌ Manual implementation required ❌ Manual implementation required
Optimistic Updates ✅ Built-in support ✅ Built-in support ✅ Built-in support ✅ Built-in support ❌ Manual implementation required ❌ Manual implementation required
Background Refetching ✅ On window focus, network reconnect ✅ On window focus, network reconnect ✅ Configurable policies ✅ On window focus, network reconnect ❌ Manual implementation required ❌ Manual implementation required
Pagination/Infinite Scroll ✅ Dedicated hooks ✅ Supports custom logic ✅ Built-in support ✅ Built-in support ❌ Manual implementation required ❌ Manual implementation required
GraphQL Support Minimal, requires custom logic Supports with custom fetcher ✅ First-class support Supports with custom query functions Supports with custom fetcher Supports with custom fetcher
Redux Integration No direct integration No direct integration No direct integration ✅ Deeply integrated Can be used with Redux thunks Can be used with Redux thunks
Bundle Size Medium Small Large (with full features) Medium (adds to Redux Toolkit) Small None (native)
Learning Curve Moderate Low to Moderate Moderate to High Moderate (if familiar with Redux) Low Low

How to pick

Choosing the right data fetching and state management library depends on your project's specific needs, existing technology stack, and team's familiarity with different paradigms. Consider these factors when making your decision:

  • For GraphQL-centric applications: If your backend is built with GraphQL and you need advanced features like normalized caching, real-time subscriptions, and a rich ecosystem for GraphQL development, Apollo Client is often the most suitable choice. Its deep integration with GraphQL schemas and tooling provides a powerful and opinionated solution for managing complex graph data.
  • For Redux-powered projects: If your application already uses Redux for global state management or if your team is highly proficient with Redux, RTK Query offers a seamless and efficient way to handle server state. It extends the Redux ecosystem, reducing boilerplate and providing a consistent development experience within a Redux-based architecture.
  • For lightweight and performance-critical applications: If your primary concern is a minimal bundle size, quick setup, and efficient background revalidation without the overhead of a full state management solution, SWR is an excellent alternative. It provides a lean API and focuses on the Stale-While-Revalidate strategy to deliver a fast user experience.
  • For simple HTTP requests without complex state needs: If your application only requires basic HTTP requests and you prefer to manage caching and component state manually, Axios or the native Fetch API are good choices. These options provide fundamental data fetching capabilities without imposing a specific state management pattern, giving you maximum control over the implementation details. Use Axios for a feature-rich client with interceptors and automatic JSON parsing, or Fetch API for zero-dependency native browser functionality.
  • For projects prioritizing ease of use and rapid development: React Query excels in abstracting away much of the complexity of server state management, offering a highly declarative API. If you value automatic caching, revalidation, and optimistic updates out-of-the-box without deep integration into a specific state management framework like Redux or GraphQL, React Query remains a strong contender. However, if a lighter touch or a more specialized solution (like GraphQL-first) is desired, the alternatives provide compelling options.