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:
Svelte Query | SWR (Website) | Apollo Client (Website) | RTK-Query (Website) | |
---|---|---|---|---|
Platform Requirements | Svelte | React | React, GraphQL | Redux |
Their Comparison | (none) | (none) | Comparison | |
Supported Query Syntax | Promise, REST, GraphQL | Promise, REST, GraphQL | GraphQL | Promise, REST, GraphQL |
Supported Frameworks | Svelte | React | React + Others | Any |
Supported Query Keys | JSON | JSON | GraphQL Query | JSON |
Query Key Change Detection | Deep Compare (Stable Serialization) | Referential Equality (===) | Deep Compare (Unstable Serialization) | Referential Equality (===) |
Query Data Memoization Level | Query + Structural Sharing | Query | Query + Entity + Structural Sharing | Query |
Bundle Size | + | |||
API Definition | On-Use, Declarative | On-Use | GraphQL Schema | Declarative |
Queries | ✅ | ✅ | ✅ | ✅ |
Caching | ✅ | ✅ | ✅ | ✅ |
Polling/Intervals | ✅ | ✅ | ✅ | ✅ |
Parallel Queries | ✅ | ✅ | ✅ | ✅ |
Dependent Queries | ✅ | ✅ | ✅ | ✅ |
Paginated Queries | ✅ | ✅ | ✅ | ✅ |
Infinite Queries | ✅ | ✅ | ✅ | 🛑 |
Bi-directional Infinite Queries | ✅ | 🔶 | 🔶 | 🛑 |
Infinite Query Refetching | ✅ | ✅ | 🛑 | 🛑 |
Lagged Query Data1 | ✅ | 🛑 | 🛑 | ✅ |
Selectors | ✅ | 🛑 | ✅ | ✅ |
Initial Data | ✅ | ✅ | ✅ | ✅ |
Scroll Recovery | ✅ | ✅ | ✅ | ✅ |
Cache Manipulation | ✅ | ✅ | ✅ | ✅ |
Outdated Query Dismissal | ✅ | ✅ | ✅ | ✅ |
Render Optimization2 | ✅ | 🛑 | 🛑 | ✅ |
Auto Garbage Collection | ✅ | 🛑 | 🛑 | ✅ |
Mutation Hooks | ✅ | 🟡 | ✅ | ✅ |
Offline Mutation Support | ✅ | 🛑 | 🟡 | 🛑 |
Prefetching APIs | ✅ | 🔶 | ✅ | ✅ |
Query Cancellation | ✅ | 🛑 | 🛑 | 🛑 |
Partial Query Matching3 | ✅ | 🛑 | 🛑 | ✅ |
Stale While Revalidate | ✅ | ✅ | 🛑 | ✅ |
Stale Time Configuration | ✅ | 🛑 | 🛑 | 🛑 |
Pre-usage Query/Mutation Configuration4 | ✅ | 🛑 | 🛑 | ✅ |
Window Focus Refetching | ✅ | ✅ | 🛑 | 🛑 |
Network Status Refetching | ✅ | ✅ | ✅ | 🛑 |
General Cache Dehydration/Rehydration | ✅ | 🛑 | ✅ | ✅ |
Offline Caching | ✅ (Experimental) | 🛑 | ✅ | 🔶 |
Abstracted/Agnostic Core | ✅ | 🛑 | ✅ | ✅ |
Automatic Refetch after Mutation5 | 🔶 | 🔶 | ✅ | ✅ |
Normalized Caching6 | 🛑 | 🛑 | ✅ | 🛑 |
1 Lagged Query Data - Svelte 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 - Svelte 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. Svelte 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
orerror
properties, you can reduce the number of renders even more by settingnotifyOnChangeProps
to['data', 'error']
.
3 Partial query matching - Because Svelte 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.
3 Pre-usage Query Configuration - This is simply a fancy name for being able to configure how queries and mutations will behave before they are used. For instance, a query can be fully configured with defaults beforehand and when the time comes to use it, only
useQuery(key)
is necessary, instead of being required to pass the fetcher and/or options with every usage. SWR does have a partial form of this feature by allowing you to pre-configure a default fetcher, but only as a global fetcher, not on a per-query basis and definitely not for mutations.
5 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.
6 Normalized Caching - Svelte Query and SWR do not currently support automatic-normalized caching which describes storing entities in a flat architecture to avoid some high-level data duplication.
The latest TanStack news, articles, and resources, sent to your inbox.