Comparison

This comparison table strives to be as accurate and as unbiased as possible. If you use any of these libraries and feel the information could be improved, feel free to suggest changes (with notes or evidence of claims) using the "Edit this page on Github" link at the bottom of this page.

Feature/Capability Key:

  • ✅ 1st-class, built-in, and ready to use with no added configuration or code
  • 🟡 Supported, but as an unoffical 3rd party or community library/contribution
  • 🔶 Supported and documented, but requires extra user-code to implement
  • 🛑 Not officially supported or documented.
React QuerySWR (Website)Apollo Client (Website)
Supported ProtocolHTTPHTTPGraphQL
Supported Query SignaturesPromisePromiseGraphQL Query
Supported Query KeysJSONJSONGraphQL Query
Query Key Change DetectionDeep Compare (Serialization)Referential Equality (===)Deep Compare (Serialization)
Query Data Memoization LevelQuery + Structural SharingQueryQuery + Entity + Structural Sharing
Bundle Size
Queries
Caching
Devtools🟡
Polling/Intervals
Parallel Queries
Dependent Queries
Paginated Queries
Infinite Queries
Lagged / "Lazy" Queries1🛑🛑
Initial Data
Scroll Recovery
Cache Manipulation
Outdated Query Dismissal
Render Optimization2🛑🛑
Auto Garbage Collection🛑🛑
Mutation Hooks🟡
Prefetching APIs🔶
Query Cancellation🛑🛑
Partial Query Matching3🛑🛑
Stale While Revalidate🛑
Stale Time Configuration🛑🛑
Window Focus Refetching🛑
Network Status Refetching
Automatic Refetch after Mutation4🔶🔶
Cache Dehydration/Rehydration🛑
React Suspense (Experimental)🛑

Notes

1 Lagged / "Lazy" Queries - React Query provides a way to continue to see an existing query's data while the next query loads (similar to the same UX that suspense will soon provide natively). This is extremely important when writing 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 do not have this capability and render a hard loading state for the new query (unless it has been prefetched), while the new query loads.

2 Render Optimization - React Query has excellent rendering performance. It will only re-render your components when a query is updated. For example because it has new data, or to indicate it is fetching. React Query also batches updates together to make sure your application only re-renders once when multiple components are using the same query. If you are only interested in the data or error properties, you can reduce the number of renders even more by setting notifyOnStatusChange to false.

3 Partial query matching - Because React Query uses deterministic query key serialization, this allows you to manipulate variable groups of queries without having to know each individual query-key that you want to match, eg. you can refetch every query that starts with todos in its key, regardless of variables, or you can target specific queries with (or without) variables or nested properties, and even use a filter function to only match queries that pass your specific conditions.

4 Automatic Refetch after Mutation - For truly automatic refetching to happen after a mutation occurs, a schema is necessary (like the one graphQL provides) along with heuristics that help the library know how to identify individual entities and entities types in that schema.

Was this page helpful?

Subscribe to our newsletter

The latest TanStack news, articles, and resources, sent to your inbox.

    I won't send you spam.

    Unsubscribe at any time.

    © 2020 Tanner Linsley. All rights reserved.