diff --git a/docs/src/manifests/manifest.json b/docs/src/manifests/manifest.json
index fbd14fc31a..12c6bc8ce4 100644
--- a/docs/src/manifests/manifest.json
+++ b/docs/src/manifests/manifest.json
@@ -332,6 +332,16 @@
           "path": "/reference/QueryCache",
           "editUrl": "/reference/QueryCache.md"
         },
+        {
+          "title": "QueryObserver",
+          "path": "/reference/QueryObserver",
+          "editUrl": "/reference/QueryObserver.md"
+        },
+        {
+          "title": "QueriesObserver",
+          "path": "/reference/QueriesObserver",
+          "editUrl": "/reference/QueriesObserver.md"
+        },
         {
           "title": "QueryErrorResetBoundary",
           "path": "/reference/QueryErrorResetBoundary",
diff --git a/docs/src/pages/guides/default-query-function.md b/docs/src/pages/guides/default-query-function.md
index b23248eeb4..a001210b39 100644
--- a/docs/src/pages/guides/default-query-function.md
+++ b/docs/src/pages/guides/default-query-function.md
@@ -13,9 +13,9 @@ const defaultQueryFn = async key => {
 }
 
 // provide the default query function to your app with defaultOptions
-const cache = new QueryCache()
-const client = new QueryClient({
-  cache,
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({
+  queryCache,
   defaultOptions: {
     queries: {
       queryFn: defaultQueryFn,
@@ -25,7 +25,7 @@ const client = new QueryClient({
 
 function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <YourApp />
     </QueryClientProvider>
   )
diff --git a/docs/src/pages/guides/infinite-queries.md b/docs/src/pages/guides/infinite-queries.md
index a341341c81..254392bd48 100644
--- a/docs/src/pages/guides/infinite-queries.md
+++ b/docs/src/pages/guides/infinite-queries.md
@@ -88,7 +88,7 @@ function Projects() {
 
 ## What happens when an infinite query needs to be refetched?
 
-When an infinite query becomes `stale` and needs to be refetched, each group is fetched `sequentially`, starting from the first one. This ensures that even if the underlying data is mutated we're not using stale cursors and potentially getting duplicates or skipping records. If an infinite query's results are ever removed from the cache, the pagination restarts at the initial state with only the initial group being requested.
+When an infinite query becomes `stale` and needs to be refetched, each group is fetched `sequentially`, starting from the first one. This ensures that even if the underlying data is mutated we're not using stale cursors and potentially getting duplicates or skipping records. If an infinite query's results are ever removed from the queryCache, the pagination restarts at the initial state with only the initial group being requested.
 
 ## What if I need to pass custom information to my query function?
 
diff --git a/docs/src/pages/guides/initial-query-data.md b/docs/src/pages/guides/initial-query-data.md
index f8cd6fae59..ffa4aed167 100644
--- a/docs/src/pages/guides/initial-query-data.md
+++ b/docs/src/pages/guides/initial-query-data.md
@@ -55,20 +55,20 @@ function Todo({ todoId }) {
   const result = useQuery(['todo', todoId], () => fetch('/todos'), {
     initialData: () => {
       // Use a todo from the 'todos' query as the initial data for this todo query
-      return client.getQueryData('todos')?.find(d => d.id === todoId)
+      return queryClient.getQueryData('todos')?.find(d => d.id === todoId)
     },
   })
 }
 ```
 
-Most of the time, this pattern works well, but if the source query you're using to look up the initial data from is old, you may not want to use the data at all and just fetch from the server. To make this decision easier, you can use the `client.getQueryState` method instead to get more information about the source query, including a `state.updatedAt` timestamp you can use to decide if the query is "fresh" enough for your needs:
+Most of the time, this pattern works well, but if the source query you're using to look up the initial data from is old, you may not want to use the data at all and just fetch from the server. To make this decision easier, you can use the `queryClient.getQueryState` method instead to get more information about the source query, including a `state.updatedAt` timestamp you can use to decide if the query is "fresh" enough for your needs:
 
 ```js
 function Todo({ todoId }) {
   const result = useQuery(['todo', todoId], () => fetch('/todos'), {
     initialData: () => {
       // Get the query state
-      const state = client.getQueryState('todos')
+      const state = queryClient.getQueryState('todos')
 
       // If the query exists and has data that is no older than 10 seconds...
       if (state && Date.now() - state.updatedAt <= 10 * 1000) {
diff --git a/docs/src/pages/guides/invalidations-from-mutations.md b/docs/src/pages/guides/invalidations-from-mutations.md
index 81a7f4e1f9..c882345dd0 100644
--- a/docs/src/pages/guides/invalidations-from-mutations.md
+++ b/docs/src/pages/guides/invalidations-from-mutations.md
@@ -16,13 +16,13 @@ When a successful `postTodo` mutation happens, we likely want all `todos` querie
 ```js
 import { useMutation, useQueryClient } from 'react-query'
 
-const client = useQueryClient()
+const queryClient = useQueryClient()
 
 // When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
 const mutation = useMutation(addTodo, {
   onSuccess: () => {
-    client.invalidateQueries('todos')
-    client.invalidateQueries('reminders')
+    queryClient.invalidateQueries('todos')
+    queryClient.invalidateQueries('reminders')
   },
 })
 ```
diff --git a/docs/src/pages/guides/migrating-to-react-query-3.md b/docs/src/pages/guides/migrating-to-react-query-3.md
index 69d4a0c005..feabc0d892 100644
--- a/docs/src/pages/guides/migrating-to-react-query-3.md
+++ b/docs/src/pages/guides/migrating-to-react-query-3.md
@@ -9,8 +9,8 @@ This article explains how to migrate your application to React Query 3.
 
 ### QueryClient
 
-The `QueryCache` has been split into a `QueryClient` and a `QueryCache`.
-The `QueryCache` contains all cached queries and the `QueryClient` can be used to interact with a cache.
+The `QueryCache` has been split into a `QueryClient`, `QueryCache` and `MutationCache`.
+The `QueryCache` contains all queries, the `MutationCache` contains all mutations, and the `QueryClient` can be used to set configuration and to interact with them.
 
 This has some benefits:
 
@@ -25,11 +25,17 @@ Use the `QueryClientProvider` component to connect a `QueryClient` to your appli
 ```js
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+// Create query cache
+const queryCache = new QueryCache()
+
+// Create mutation cache (can be omitted to reduce file size when not using mutations)
+const mutationCache = new MutationCache()
+
+// Create client
+const queryClient = new QueryClient({ queryCache, mutationCache })
 
 function App() {
-  return <QueryClientProvider client={client}>...</QueryClientProvider>
+  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
 }
 ```
 
@@ -42,10 +48,10 @@ import { useCallback } from 'react'
 import { useQueryClient } from 'react-query'
 
 function Todo() {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
 
   const onClickButton = useCallback(() => {
-    client.invalidateQueries('posts')
+    queryClient.invalidateQueries('posts')
   }, [client])
 
   return <button onClick={onClickButton}>Refetch</button>
@@ -57,8 +63,8 @@ function Todo() {
 The `ReactQueryConfigProvider` component has been removed. Default options for queries and mutations can now be specified in `QueryClient`:
 
 ```js
-const client = new QueryClient({
-  cache,
+const queryClient = new QueryClient({
+  queryCache,
   defaultOptions: {
     queries: {
       staleTime: Infinity,
@@ -157,6 +163,9 @@ mutate('todo', {
   onError: error => {
     console.error(error)
   },
+  onSettled: () => {
+    console.log('settled)
+  },
 })
 ```
 
@@ -170,9 +179,14 @@ try {
   console.log(data)
 } catch (error) {
   console.error(error)
+} finally {
+  console.log('settled)
 }
 ```
 
+Callbacks passed to the `mutate` or `mutateAsync` functions will now override the callbacks defined on `useMutation`.
+The `mutateAsync` function can be used to compose side effects.
+
 ### Query object syntax
 
 The object syntax has been collapsed:
@@ -195,17 +209,17 @@ useQuery({
 
 ### queryCache.prefetchQuery()
 
-The `client.prefetchQuery()` method should now only be used for prefetching scenarios where the result is not relevant.
+The `queryClient.prefetchQuery()` method should now only be used for prefetching scenarios where the result is not relevant.
 
-Use the `client.fetchQueryData()` method to get the query data or error:
+Use the `queryClient.fetchQueryData()` method to get the query data or error:
 
 ```js
 // Prefetch a query:
-await client.prefetchQuery('posts', fetchPosts)
+await queryClient.prefetchQuery('posts', fetchPosts)
 
 // Fetch a query:
 try {
-  const data = await client.fetchQueryData('posts', fetchPosts)
+  const data = await queryClient.fetchQueryData('posts', fetchPosts)
 } catch (error) {
   // Error handling
 }
@@ -237,7 +251,7 @@ The `queryCache.getQueries()` method has been replaced by `cache.findAll()`.
 
 ### queryCache.isFetching
 
-The `queryCache.isFetching` property has been replaced by `client.isFetching()`.
+The `queryCache.isFetching` property has been replaced by `queryClient.isFetching()`.
 
 ### QueryOptions.enabled
 
@@ -336,12 +350,12 @@ function Overview() {
 }
 ```
 
-#### client.watchQuery()
+#### QueryObserver
 
-The `client.watchQuery()` method can be used to create and/or watch a query:
+A `QueryObserver` can be used to create and/or watch a query:
 
 ```js
-const observer = client.watchQuery('posts')
+const observer = new QueryObserver(queryClient, { queryKey: 'posts' })
 
 const unsubscribe = observer.subscribe(result => {
   console.log(result)
@@ -349,12 +363,12 @@ const unsubscribe = observer.subscribe(result => {
 })
 ```
 
-#### client.watchQueries()
+#### QueriesObserver
 
-The `client.watchQueries()` method can be used to create and/or watch multiple queries:
+A `QueriesObserver` can be used to create and/or watch multiple queries:
 
 ```js
-const observer = client.watchQueries([
+const observer = new QueriesObserver(queryClient, [
   { queryKey: ['post', 1], queryFn: fetchPost },
   { queryKey: ['post', 2], queryFn: fetchPost },
 ])
@@ -365,18 +379,30 @@ const unsubscribe = observer.subscribe(result => {
 })
 ```
 
-## `client.setQueryDefaults`
+## `queryClient.setQueryDefaults`
 
-The `client.setQueryDefaults()` method to set default options for a specific query. If the query does not exist yet it will create it.
+The `queryClient.setQueryDefaults()` method can be used to set default options for specific queries:
 
 ```js
-client.setQueryDefaults('posts', fetchPosts)
+queryClient.setQueryDefaults('posts', { queryFn: fetchPosts })
 
 function Component() {
   const { data } = useQuery('posts')
 }
 ```
 
+## `queryClient.setMutationDefaults`
+
+The `queryClient.setMutationDefaults()` method can be used to set default options for specific mutations:
+
+```js
+queryClient.setMutationDefaults('addPost', { mutationFn: addPost })
+
+function Component() {
+  const { mutate } = useMutation('addPost')
+}
+```
+
 #### useIsFetching()
 
 The `useIsFetching()` hook now accepts filters which can be used to for example only show a spinner for certain type of queries:
diff --git a/docs/src/pages/guides/mutations.md b/docs/src/pages/guides/mutations.md
index 07e138d3f7..83d320c382 100644
--- a/docs/src/pages/guides/mutations.md
+++ b/docs/src/pages/guides/mutations.md
@@ -51,7 +51,7 @@ Beyond those primary state, more information is available depending on the state
 
 In the example above, you also saw that you can pass variables to your mutations function by calling the `mutate` function with a **single variable or object**.
 
-Even with just variables, mutations aren't all that special, but when used with the `onSuccess` option, the [Query Client's `invalidateQueries` method](../reference/QueryClient#clientinvalidatequeries) and the [Query Client's `setQueryData` method](../reference/QueryClient#clientsetquerydata), mutations become a very powerful tool.
+Even with just variables, mutations aren't all that special, but when used with the `onSuccess` option, the [Query Client's `invalidateQueries` method](../reference/QueryClient#queryclientinvalidatequeries) and the [Query Client's `setQueryData` method](../reference/QueryClient#queryclientsetquerydata), mutations become a very powerful tool.
 
 > IMPORTANT: The `mutate` function is an asynchronous function, which means you cannot use it directly in an event callback. If you need to access the event in `onSubmit` you need to wrap `mutate` in another function. This is due to [React event pooling](https://reactjs.org/docs/events.html#event-pooling).
 
@@ -120,18 +120,12 @@ useMutation(addTodo, {
   onMutate: variables => {
     // A mutation is about to happen!
 
-    // Optionally return a context object with a rollback function
-    return {
-      rollback: () => {
-        // do some rollback logic
-      },
-    }
+    // Optionally return a context containing data to use when for example rolling back
+    return { id: 1 }
   },
   onError: (error, variables, context) => {
     // An error happened!
-    if (context.rollback) {
-      context.rollback()
-    }
+    console.log(`rolling back optimistic update with id ${context.id}`)
   },
   onSuccess: (data, variables, context) => {
     // Boom baby!
@@ -155,41 +149,37 @@ useMutation(addTodo, {
 })
 ```
 
-You might find that you want to **add additional side-effects** to some of the `useMutation` lifecycle at the time of calling `mutate`. To do that, you can provide any of the same callback options to the `mutate` function after your mutation variable. Supported option overrides include:
-
-- `onSuccess` - Will be fired after the `useMutation`-level `onSuccess` handler
-- `onError` - Will be fired after the `useMutation`-level `onError` handler
-- `onSettled` - Will be fired after the `useMutation`-level `onSettled` handler
+You might find that you want to **trigger different callbacks** then the ones defined on `useMutation` when calling `mutate`. To do that, you can provide any of the same callback options to the `mutate` function after your mutation variable. Supported overrides include: `onSuccess`, `onError` and `onSettled`.
 
 ```js
 useMutation(addTodo, {
   onSuccess: (data, variables, context) => {
-    // I will fire first
+    // I will not fire
   },
   onError: (error, variables, context) => {
-    // I will fire first
+    // I will not fire
   },
   onSettled: (data, error, variables, context) => {
-    // I will fire first
+    // I will not fire
   },
 })
 
 mutate(todo, {
   onSuccess: (data, variables, context) => {
-    // I will fire second!
+    // I will fire instead!
   },
   onError: (error, variables, context) => {
-    // I will fire second!
+    // I will fire instead!
   },
   onSettled: (data, error, variables, context) => {
-    // I will fire second!
+    // I will fire instead!
   },
 })
 ```
 
 ## Promises
 
-Use `mutateAsync` instead of `mutate` to get a promise which will resolve on success or throw on an error:
+Use `mutateAsync` instead of `mutate` to get a promise which will resolve on success or throw on an error. This can for example be used to compose side effects.
 
 ```js
 const mutation = useMutation(addTodo)
@@ -199,5 +189,19 @@ try {
   console.log(todo)
 } catch (error) {
   console.error(error)
+} finally {
+  console.log('done')
 }
 ```
+
+## Retry
+
+By default React Query will not retry a mutation on error, but it is possible with the `retry` option:
+
+```js
+const mutation = useMutation(addTodo, {
+  retry: 3,
+})
+```
+
+If mutations fail because the device is offline, they will be retried in the same order when the device reconnects.
diff --git a/docs/src/pages/guides/optimistic-updates.md b/docs/src/pages/guides/optimistic-updates.md
index 43d9e3ab5b..031802478c 100644
--- a/docs/src/pages/guides/optimistic-updates.md
+++ b/docs/src/pages/guides/optimistic-updates.md
@@ -10,30 +10,30 @@ To do this, `useMutation`'s `onMutate` handler option allows you to return a val
 ## Updating a list of todos when adding a new todo
 
 ```js
-const client = useQueryClient()
+const queryClient = useQueryClient()
 
 useMutation(updateTodo, {
   // When mutate is called:
   onMutate: async newTodo => {
     // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-    await client.cancelQueries('todos')
+    await queryClient.cancelQueries('todos')
 
     // Snapshot the previous value
-    const previousTodos = client.getQueryData('todos')
+    const previousTodos = queryClient.getQueryData('todos')
 
     // Optimistically update to the new value
-    client.setQueryData('todos', old => [...old, newTodo])
+    queryClient.setQueryData('todos', old => [...old, newTodo])
 
     // Return a context object with the snapshotted value
     return { previousTodos }
   },
   // If the mutation fails, use the context returned from onMutate to roll back
   onError: (err, newTodo, context) => {
-    client.setQueryData('todos', context.previousTodos)
+    queryClient.setQueryData('todos', context.previousTodos)
   },
   // Always refetch after error or success:
   onSettled: () => {
-    client.invalidateQueries('todos')
+    queryClient.invalidateQueries('todos')
   },
 })
 ```
@@ -45,28 +45,27 @@ useMutation(updateTodo, {
   // When mutate is called:
   onMutate: async newTodo => {
     // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-    await client.cancelQueries(['todos', newTodo.id])
+    await queryClient.cancelQueries(['todos', newTodo.id])
 
     // Snapshot the previous value
-    const previousTodo = client.getQueryData(['todos', newTodo.id])
+    const previousTodo = queryClient.getQueryData(['todos', newTodo.id])
 
     // Optimistically update to the new value
-    client.setQueryData(['todos', newTodo.id], newTodo)
+    queryClient.setQueryData(['todos', newTodo.id], newTodo)
 
-    // Return a context object containing a function to rollback
-    return {
-      rollback: () => {
-        client.setQueryData(['todos', newTodo.id], previousTodo)
-      },
-    }
+    // Return a context with the previous and new todo
+    return { previousTodo, newTodo }
   },
-  // If the mutation fails, use the rollback function we returned above
+  // If the mutation fails, use the context we returned above
   onError: (err, newTodo, context) => {
-    context.rollback()
+    queryClient.setQueryData(
+      ['todos', context.newTodo.id],
+      context.previousTodo
+    )
   },
   // Always refetch after error or success:
   onSettled: newTodo => {
-    client.invalidateQueries(['todos', newTodo.id])
+    queryClient.invalidateQueries(['todos', newTodo.id])
   },
 })
 ```
@@ -78,7 +77,7 @@ useMutation(updateTodo, {
   // ...
   onSettled: (newTodo, error, variables, context) => {
     if (error) {
-      context.rollback()
+      // do something
     }
   },
 })
diff --git a/docs/src/pages/guides/prefetching.md b/docs/src/pages/guides/prefetching.md
index 31801ecdfe..119dcb4e40 100644
--- a/docs/src/pages/guides/prefetching.md
+++ b/docs/src/pages/guides/prefetching.md
@@ -8,7 +8,7 @@ If you're lucky enough, you may know enough about what your users will do to be
 ```js
 const prefetchTodos = async () => {
   // The results of this query will be cached like a normal query
-  await client.prefetchQuery('todos', fetchTodos)
+  await queryClient.prefetchQuery('todos', fetchTodos)
 }
 ```
 
@@ -21,5 +21,5 @@ const prefetchTodos = async () => {
 Alternatively, if you already have the data for your query synchronously available, you don't need to prefetch it. You can just use the [Query Client's `setQueryData` method](../api/#queryclientesetquerydata) to directly add or update a query's cached result by key.
 
 ```js
-client.setQueryData('todos', todos)
+queryClient.setQueryData('todos', todos)
 ```
diff --git a/docs/src/pages/guides/query-filters.md b/docs/src/pages/guides/query-filters.md
index 8dfc57a51c..df20c61b57 100644
--- a/docs/src/pages/guides/query-filters.md
+++ b/docs/src/pages/guides/query-filters.md
@@ -7,16 +7,16 @@ Some methods within React Query accept a `QueryFilters` object. A query filter i
 
 ```js
 // Cancel all queries
-await client.cancelQueries()
+await queryClient.cancelQueries()
 
 // Remove all inactive queries
-client.removeQueries('posts', { inactive: true })
+queryClient.removeQueries('posts', { inactive: true })
 
 // Refetch all active queries
-await client.refetchQueries({ active: true })
+await queryClient.refetchQueries({ active: true })
 
 // Refetch all active queries that begin with `post` in the key
-await client.refetchQueries('posts', { active: true })
+await queryClient.refetchQueries('posts', { active: true })
 ```
 
 A query filter object supports the following properties:
@@ -32,9 +32,6 @@ A query filter object supports the following properties:
 - `stale?: boolean`
   - When set to `true` it will match stale queries.
   - When set to `false` it will match fresh queries.
-- `fresh?: boolean`
-  - When set to `true` it will match fresh queries.
-  - When set to `false` it will match stale queries.
 - `fetching?: boolean`
   - When set to `true` it will match queries that are currently fetching.
   - When set to `false` it will match queries that are not fetching.
diff --git a/docs/src/pages/guides/query-invalidation.md b/docs/src/pages/guides/query-invalidation.md
index de1567dc1f..0a2531f961 100644
--- a/docs/src/pages/guides/query-invalidation.md
+++ b/docs/src/pages/guides/query-invalidation.md
@@ -7,9 +7,9 @@ Waiting for queries to become stale before they are fetched again doesn't always
 
 ```js
 // Invalidate every query in the cache
-client.invalidateQueries()
+queryClient.invalidateQueries()
 // Invalidate every query with a key that starts with `todos`
-client.invalidateQueries('todos')
+queryClient.invalidateQueries('todos')
 ```
 
 > Note: Where other libraries that use normalized caches would attempt to update local queries with the new data either imperatively or via schema inference, React Query gives you the tools to avoid the manual labor that comes with maintaining normalized caches and instead prescribes **targeted invalidation, background-refetching and ultimately atomic updates**.
@@ -29,9 +29,9 @@ In this example, we can use the `todos` prefix to invalidate any queries that st
 import { useQuery, useQueryClient } from 'react-query'
 
 // Get QueryClient from the context
-const client = useQueryClient()
+const queryClient = useQueryClient()
 
-client.invalidateQueries('todos')
+queryClient.invalidateQueries('todos')
 
 // Both queries below will be invalidated
 const todoListQuery = useQuery('todos', fetchTodoList)
@@ -41,7 +41,7 @@ const todoListQuery = useQuery(['todos', { page: 1 }], fetchTodoList)
 You can even invalidate queries with specific variables by passing a more specific query key to the `invalidateQueries` method:
 
 ```js
-client.invalidateQueries(['todos', { type: 'done' }])
+queryClient.invalidateQueries(['todos', { type: 'done' }])
 
 // The query below will be invalidated
 const todoListQuery = useQuery(['todos', { type: 'done' }], fetchTodoList)
@@ -53,7 +53,7 @@ const todoListQuery = useQuery('todos', fetchTodoList)
 The `invalidateQueries` API is very flexible, so even if you want to **only** invalidate `todos` queries that don't have any more variables or subkeys, you can pass an `exact: true` option to the `invalidateQueries` method:
 
 ```js
-client.invalidateQueries('todos', { exact: true })
+queryClient.invalidateQueries('todos', { exact: true })
 
 // The query below will be invalidated
 const todoListQuery = useQuery(['todos'], fetchTodoList)
@@ -65,7 +65,7 @@ const todoListQuery = useQuery(['todos', { type: 'done' }], fetchTodoList)
 If you find yourself wanting **even more** granularity, you can pass a predicate function to the `invalidateQueries` method. This function will receive each `Query` instance from the query cache and allow you to return `true` or `false` for whether you want to invalidate that query:
 
 ```js
-client.invalidateQueries({
+queryClient.invalidateQueries({
   predicate: query =>
     query.queryKey[0] === 'todos' && query.queryKey[1]?.version >= 10,
 })
diff --git a/docs/src/pages/guides/query-retries.md b/docs/src/pages/guides/query-retries.md
index d4aa0abeef..6553a22f2b 100644
--- a/docs/src/pages/guides/query-retries.md
+++ b/docs/src/pages/guides/query-retries.md
@@ -31,9 +31,9 @@ The default `retryDelay` is set to double (starting at `1000`ms) with each attem
 // Configure for all queries
 import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'
 
-const cache = new QueryCache()
-const client = new QueryClient({
-  cache,
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({
+  queryCache,
   defaultOptions: {
     queries: {
       retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
@@ -42,7 +42,7 @@ const client = new QueryClient({
 })
 
 function App() {
-  return <QueryClientProvider client={client}>...</QueryClientProvider>
+  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
 }
 ```
 
diff --git a/docs/src/pages/guides/ssr.md b/docs/src/pages/guides/ssr.md
index 7bdd706915..a5b312b7a1 100644
--- a/docs/src/pages/guides/ssr.md
+++ b/docs/src/pages/guides/ssr.md
@@ -3,7 +3,7 @@ id: ssr
 title: SSR
 ---
 
-React Query supports two ways of prefetching data on the server and passing that to the client.
+React Query supports two ways of prefetching data on the server and passing that to the queryClient.
 
 - Prefetch the data yourself and pass it in as `initialData`
   - Quick to set up for simple cases
@@ -45,7 +45,7 @@ The setup is minimal and this can be a quick solution for some cases, but there
 
 ### Using Hydration
 
-React Query supports prefetching multiple queries on the server in Next.js and then _dehydrating_ those queries to the client. This means the server can prerender markup that is immediately available on page load and as soon as JS is available, React Query can upgrade or _hydrate_ those queries with the full functionality of the library. This includes refetching those queries on the client if they have become stale since the time they were rendered on the server.
+React Query supports prefetching multiple queries on the server in Next.js and then _dehydrating_ those queries to the queryClient. This means the server can prerender markup that is immediately available on page load and as soon as JS is available, React Query can upgrade or _hydrate_ those queries with the full functionality of the library. This includes refetching those queries on the client if they have become stale since the time they were rendered on the server.
 
 To support caching queries on the server and set up hydration:
 
@@ -58,12 +58,12 @@ To support caching queries on the server and set up hydration:
 import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'
 import { Hydrate } from 'react-query/hydration'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({ queryCache })
 
 export default function MyApp({ Component, pageProps }) {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Hydrate state={pageProps.dehydratedState}>
         <Component {...pageProps} />
       </Hydrate>
@@ -84,10 +84,10 @@ import { QueryCache, QueryClient, useQuery } from 'react-query'
 import { dehydrate } from 'react-query/hydration'
 
 export async function getStaticProps() {
-  const cache = new QueryCache()
-  const client = new QueryClient({ cache })
+  const queryCache = new QueryCache()
+  const queryClient = new QueryClient({ queryCache })
 
-  await client.prefetchQuery('posts', getPosts)
+  await queryClient.prefetchQuery('posts', getPosts)
 
   return {
     props: {
@@ -109,7 +109,7 @@ function Posts() {
 }
 ```
 
-As demonstrated, it's fine to prefetch some queries and let others fetch on the client. This means you can control what content server renders or not by adding or removing `prefetchQuery` for a specific query.
+As demonstrated, it's fine to prefetch some queries and let others fetch on the queryClient. This means you can control what content server renders or not by adding or removing `prefetchQuery` for a specific query.
 
 ## Using Other Frameworks or Custom SSR Frameworks
 
@@ -119,10 +119,9 @@ This guide is at-best, a high level overview of how SSR with React Query should
 
 ### On the Server
 
-- Create a new `QueryCache` instance
 - Create a new `QueryClient` instance
 - Using the client, prefetch any data you need
-- Dehydrate the cache
+- Dehydrate the client
 - Render your app with the client provider and also **using the dehydrated state. This is extremely important! You must render both server and client using the same dehydrated state to ensure hydration on the client produces the exact same markup as the server.**
 - Serialize and embed the dehydrated cache to be sent to the client with the HTML
 
@@ -132,13 +131,13 @@ This guide is at-best, a high level overview of how SSR with React Query should
 import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'
 import { dehydrate, Hydrate } from 'react-query/hydration'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
-await client.prefetchQuery('key', fn)
-const dehydratedState = dehydrate(cache)
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({ queryCache })
+await queryClient.prefetchQuery('key', fn)
+const dehydratedState = dehydrate(client)
 
 const html = ReactDOM.renderToString(
-  <ReactQueryClientProvider client={client}>
+  <ReactQueryClientProvider client={queryClient}>
     <Hydrate state={dehydratedState}>
       <App />
     </Hydrate>
@@ -150,9 +149,7 @@ res.send(`
     <body>
       <div id="app">${html}</div>
       <script>
-        window.__REACT_QUERY_INITIAL_QUERIES__ = ${JSON.stringify(
-          dehydratedState
-        )};
+        window.__REACT_QUERY_STATE__ = ${JSON.stringify(dehydratedState)};
       </script>
     </body>
   </html>
@@ -170,13 +167,13 @@ res.send(`
 import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'
 import { Hydrate } from 'react-query/hydration'
 
-const dehydratedState = JSON.parse(window.__REACT_QUERY_INITIAL_QUERIES__)
+const dehydratedState = JSON.parse(window.__REACT_QUERY_STATE__)
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({ queryCache })
 
 ReactDOM.hydrate(
-  <ReactQueryClientProvider client={client}>
+  <ReactQueryClientProvider client={queryClient}>
     <Hydrate state={dehydratedState}>
       <App />
     </Hydrate>
@@ -188,7 +185,7 @@ ReactDOM.hydrate(
 
 ### Only successful queries are included in dehydration
 
-Any query with an error is automatically excluded from dehydration. This means that the default behaviour is to pretend these queries were never loaded on the server, usually showing a loading state instead, and retrying the queries on the client. This happens regardless of error.
+Any query with an error is automatically excluded from dehydration. This means that the default behaviour is to pretend these queries were never loaded on the server, usually showing a loading state instead, and retrying the queries on the queryClient. This happens regardless of error.
 
 Sometimes this behavior is not desirable, maybe you want to render an error page with a correct status code instead on certain errors or queries. In those cases, use `fetchQueryData` and catch any errors to handle those manually.
 
diff --git a/docs/src/pages/guides/suspense.md b/docs/src/pages/guides/suspense.md
index 0c60ded60f..f3598c4ddf 100644
--- a/docs/src/pages/guides/suspense.md
+++ b/docs/src/pages/guides/suspense.md
@@ -13,9 +13,9 @@ Global configuration:
 // Configure for all queries
 import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'
 
-const cache = new QueryCache()
-const client = new QueryClient({
-  cache,
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({
+  queryCache,
   defaultOptions: {
     queries: {
       suspense: true,
@@ -25,7 +25,7 @@ const client = new QueryClient({
 
 function Root() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <App />
     </QueryClientProvider>
   )
diff --git a/docs/src/pages/guides/updates-from-mutation-responses.md b/docs/src/pages/guides/updates-from-mutation-responses.md
index 67493d2745..d9e78e63dd 100644
--- a/docs/src/pages/guides/updates-from-mutation-responses.md
+++ b/docs/src/pages/guides/updates-from-mutation-responses.md
@@ -3,13 +3,13 @@ id: updates-from-mutation-responses
 title: Updates from Mutation Responses
 ---
 
-When dealing with mutations that **update** objects on the server, it's common for the new object to be automatically returned in the response of the mutation. Instead of refetching any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the existing query with the new data immediately using the [Query Client's `setQueryData`](../reference/QueryClient#clientsetquerydata) method:
+When dealing with mutations that **update** objects on the server, it's common for the new object to be automatically returned in the response of the mutation. Instead of refetching any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the existing query with the new data immediately using the [Query Client's `setQueryData`](../reference/QueryClient#queryclientsetquerydata) method:
 
 ```js
-const client = useQueryClient()
+const queryClient = useQueryClient()
 
 const mutation = useMutation(editTodo, {
-  onSuccess: data => client.setQueryData(['todo', { id: 5 }], data),
+  onSuccess: data => queryClient.setQueryData(['todo', { id: 5 }], data),
 })
 
 mutation.mutate({
@@ -27,12 +27,12 @@ create a custom hook like this:
 
 ```js
 const useMutateTodo = () => {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
 
   return useMutation(editTodo, {
     // Notice the second argument is the variables object that the `mutate` function receives
     onSuccess: (data, variables) => {
-      client.setQueryData(['todo', { id: variables.id }], data)
+      queryClient.setQueryData(['todo', { id: variables.id }], data)
     },
   })
 }
diff --git a/docs/src/pages/guides/window-focus-refetching.md b/docs/src/pages/guides/window-focus-refetching.md
index 2b6695cd37..cbab2ba6a4 100644
--- a/docs/src/pages/guides/window-focus-refetching.md
+++ b/docs/src/pages/guides/window-focus-refetching.md
@@ -9,7 +9,7 @@ If a user leaves your application and returns to stale data, **React Query autom
 
 ```js
 //
-const client = new QueryClient({
+const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
@@ -18,7 +18,7 @@ const client = new QueryClient({
 })
 
 function App() {
-  return <QueryClientProvider client={client}>...</QueryClientProvider>
+  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
 }
 ```
 
@@ -30,10 +30,10 @@ useQuery('todos', fetchTodos, { refetchOnWindowFocus: false })
 
 ## Custom Window Focus Event
 
-In rare circumstances, you may want to manage your own window focus events that trigger React Query to revalidate. To do this, React Query provides a `setFocusHandler` function that supplies you the callback that should be fired when the window is focused and allows you to set up your own events. When calling `setFocusHandler`, the previously set handler is removed (which in most cases will be the default handler) and your new handler is used instead. For example, this is the default handler:
+In rare circumstances, you may want to manage your own window focus events that trigger React Query to revalidate. To do this, React Query provides a `focusManager.setHandler` function that supplies you the callback that should be fired when the window is focused and allows you to set up your own events. When calling `focusManager.setHandler`, the previously set handler is removed (which in most cases will be the default handler) and your new handler is used instead. For example, this is the default handler:
 
 ```js
-setFocusHandler(handleFocus => {
+focusManager.setHandler(handleFocus => {
   // Listen to visibillitychange and focus
   if (typeof window !== 'undefined' && window.addEventListener) {
     window.addEventListener('visibilitychange', handleFocus, false)
@@ -53,10 +53,10 @@ setFocusHandler(handleFocus => {
 A great use-case for replacing the focus handler is that of iframe events. Iframes present problems with detecting window focus by both double-firing events and also firing false-positive events when focusing or using iframes within your app. If you experience this, you should use an event handler that ignores these events as much as possible. I recommend [this one](https://gist.github.com/tannerlinsley/1d3a2122332107fcd8c9cc379be10d88)! It can be set up in the following way:
 
 ```js
-import { setFocusHandler } from 'react-query'
+import { focusManager } from 'react-query'
 import onWindowFocus from './onWindowFocus' // The gist above
 
-setFocusHandler(onWindowFocus) // Boom!
+focusManager.setHandler(onWindowFocus) // Boom!
 ```
 
 ## Managing Focus in React Native
@@ -64,10 +64,10 @@ setFocusHandler(onWindowFocus) // Boom!
 Instead of event listeners on `window`, React Native provides focus information through the [`AppState` module](https://reactnative.dev/docs/appstate#app-states). You can use the `AppState` "change" event to trigger an update when the app state changes to "active":
 
 ```js
-import { setFocusHandler } from 'react-query'
+import { focusManager } from 'react-query'
 import { AppState } from 'react-native'
 
-setFocusHandler(handleFocus => {
+focusManager.setHandler(handleFocus => {
   const handleAppStateChange = appState => {
     if (appState === 'active') {
       handleFocus()
diff --git a/docs/src/pages/overview.md b/docs/src/pages/overview.md
index ef54ff40b3..0dde05b09d 100644
--- a/docs/src/pages/overview.md
+++ b/docs/src/pages/overview.md
@@ -54,12 +54,12 @@ import {
   QueryClientProvider,
 } from 'react-query'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({ queryCache })
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
diff --git a/docs/src/pages/quick-start.md b/docs/src/pages/quick-start.md
index 536aaa2a55..f00cf5a9ce 100644
--- a/docs/src/pages/quick-start.md
+++ b/docs/src/pages/quick-start.md
@@ -21,15 +21,15 @@ import {
 import { getTodos, postTodo } from '../my-api'
 
 // Create a cache
-const cache = new QueryCache()
+const queryCache = new QueryCache()
 
 // Create a client
-const client = new QueryClient({ cache })
+const queryClient = new QueryClient({ queryCache })
 
 function App() {
   return (
     // Provide the client to your App
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Todos />
     </QueryClientProvider>
   )
@@ -37,7 +37,7 @@ function App() {
 
 function Todos() {
   // Access the client
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
 
   // Queries
   const query = useQuery('todos', getTodos)
@@ -46,7 +46,7 @@ function Todos() {
   const mutation = useMutation(postTodo, {
     onSuccess: () => {
       // Invalidate and refetch
-      client.invalidateQueries('todos')
+      queryClient.invalidateQueries('todos')
     },
   })
 
diff --git a/docs/src/pages/reference/QueriesObserver.md b/docs/src/pages/reference/QueriesObserver.md
new file mode 100644
index 0000000000..8ea31db44d
--- /dev/null
+++ b/docs/src/pages/reference/QueriesObserver.md
@@ -0,0 +1,24 @@
+---
+id: QueriesObserver
+title: QueriesObserver
+---
+
+## `QueriesObserver`
+
+The `QueriesObserver` can be used to observe multiple queries.
+
+```js
+const observer = new QueriesObserver(queryClient, [
+  { queryKey: ['post', 1], queryFn: fetchPost },
+  { queryKey: ['post', 2], queryFn: fetchPost },
+])
+
+const unsubscribe = observer.subscribe(result => {
+  console.log(result)
+  unsubscribe()
+})
+```
+
+**Options**
+
+The options for the `QueriesObserver` are exactly the same as those of [`useQueries`](#usequeries).
diff --git a/docs/src/pages/reference/QueryCache.md b/docs/src/pages/reference/QueryCache.md
index 46fd263bf2..6818128d90 100644
--- a/docs/src/pages/reference/QueryCache.md
+++ b/docs/src/pages/reference/QueryCache.md
@@ -10,25 +10,25 @@ The `QueryCache` is the storage mechanism for React Query. It stores all of the
 ```js
 import { QueryCache } from 'react-query'
 
-const cache = new QueryCache()
-const query = cache.find('posts')
+const queryCache = new QueryCache()
+const query = queryCache.find('posts')
 ```
 
 Its available methods are:
 
-- [`find`](#cachefind)
-- [`findAll`](#cachefindall)
-- [`subscribe`](#cachesubscribe)
-- [`clear`](#cacheclear)
+- [`find`](#querycachefind)
+- [`findAll`](#querycachefindall)
+- [`subscribe`](#querycachesubscribe)
+- [`clear`](#querycacheclear)
 
-## `cache.find`
+## `queryCache.find`
 
 `find` is a slightly more advanced synchronous method that can be used to get an existing query instance from the cache. This instance not only contains **all** the state for the query, but all of the instances, and underlying guts of the query as well. If the query does not exist, `undefined` will be returned.
 
 > Note: This is not typically needed for most applications, but can come in handy when needing more information about a query in rare scenarios (eg. Looking at the query.state.updatedAt timestamp to decide whether a query is fresh enough to be used as an initial value)
 
 ```js
-const query = cache.find(queryKey)
+const query = queryCache.find(queryKey)
 ```
 
 **Options**
@@ -41,14 +41,14 @@ const query = cache.find(queryKey)
 - `Query`
   - The query instance from the cache
 
-## `cache.findAll`
+## `queryCache.findAll`
 
 `findAll` is even more advanced synchronous method that can be used to get existing query instances from the cache that partially match query key. If queries do not exist, empty array will be returned.
 
 > Note: This is not typically needed for most applications, but can come in handy when needing more information about a query in rare scenarios
 
 ```js
-const queries = cache.findAll(queryKey)
+const queries = queryCache.findAll(queryKey)
 ```
 
 **Options**
@@ -61,7 +61,7 @@ const queries = cache.findAll(queryKey)
 - `Query[]`
   - Query instances from the cache
 
-## `cache.subscribe`
+## `queryCache.subscribe`
 
 The `subscribe` method can be used to subscribe to the query cache as a whole and be informed of safe/known updates to the cache like query states changing or queries being updated, added or removed
 
@@ -70,13 +70,13 @@ const callback = query => {
   console.log(query)
 }
 
-const unsubscribe = cache.subscribe(callback)
+const unsubscribe = queryCache.subscribe(callback)
 ```
 
 **Options**
 
 - `callback: (query?: Query) => void`
-  - This function will be called with the query cache any time it is updated via its tracked update mechanisms (eg, `query.setState`, `client.removeQueries`, etc). Out of scope mutations to the cache are not encouraged and will not fire subscription callbacks
+  - This function will be called with the query cache any time it is updated via its tracked update mechanisms (eg, `query.setState`, `queryClient.removeQueries`, etc). Out of scope mutations to the cache are not encouraged and will not fire subscription callbacks
   - Additionally, for updates to the cache triggered by a specific query, the `query` will be passed as first argument to the callback
 
 **Returns**
@@ -84,10 +84,10 @@ const unsubscribe = cache.subscribe(callback)
 - `unsubscribe: Function => void`
   - This function will unsubscribe the callback from the query cache.
 
-## `cache.clear`
+## `queryCache.clear`
 
 The `clear` method can be used to clear the cache entirely and start fresh.
 
 ```js
-cache.clear()
+queryCache.clear()
 ```
diff --git a/docs/src/pages/reference/QueryClient.md b/docs/src/pages/reference/QueryClient.md
index 2ba5b9ec68..5b53990707 100644
--- a/docs/src/pages/reference/QueryClient.md
+++ b/docs/src/pages/reference/QueryClient.md
@@ -10,9 +10,9 @@ The `QueryClient` can be used to interact with a cache:
 ```js
 import { QueryClient, QueryCache } from 'react-query'
 
-const cache = new QueryCache()
-const client = new QueryClient({
-  cache,
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({
+  queryCache,
   defaultOptions: {
     queries: {
       staleTime: Infinity,
@@ -20,36 +20,36 @@ const client = new QueryClient({
   },
 })
 
-await client.prefetchQuery('posts', fetchPosts)
+await queryClient.prefetchQuery('posts', fetchPosts)
 ```
 
 Its available methods are:
 
-- [`fetchQueryData`](#clientfetchquerydata)
-- [`prefetchQuery`](#clientprefetchquery)
-- [`getQueryData`](#clientgetquerydata)
-- [`setQueryData`](#clientsetquerydata)
-- [`getQueryState`](#clientgetquerystate)
-- [`setQueryDefaults`](#clientsetquerydefaults)
-- [`refetchQueries`](#clientrefetchqueries)
-- [`invalidateQueries`](#clientinvalidatequeries)
-- [`cancelQueries`](#clientcancelqueries)
-- [`removeQueries`](#clientremovequeries)
-- [`watchQuery`](#clientwatchquery)
-- [`watchQueries`](#clientwatchqueries)
+- [`fetchQueryData`](#queryclientfetchquerydata)
+- [`prefetchQuery`](#queryclientprefetchquery)
+- [`getQueryData`](#queryclientgetquerydata)
+- [`setQueryData`](#queryclientsetquerydata)
+- [`getQueryState`](#queryclientgetquerystate)
+- [`setQueryDefaults`](#queryclientsetquerydefaults)
+- [`refetchQueries`](#queryclientrefetchqueries)
+- [`invalidateQueries`](#queryclientinvalidatequeries)
+- [`cancelQueries`](#queryclientcancelqueries)
+- [`removeQueries`](#queryclientremovequeries)
 - [`isFetching`](#queryclientisfetching)
-- [`getDefaultOptions`](#clientsetdefaultoptions)
-- [`setDefaultOptions`](#clientgetdefaultoptions)
+- [`getDefaultOptions`](#queryclientsetdefaultoptions)
+- [`setDefaultOptions`](#queryclientgetdefaultoptions)
 
 **Options**
 
-- `cache: QueryCache`
+- `queryCache: QueryCache`
   - The query cache this client is connected to.
+- `mutationCache: MutationCache`
+  - The mutation cache this client is connected to.
 - `defaultOptions: DefaultOptions`
   - Optional
-  - Define defaults for all queries and mutations using this query client.
+  - Define defaults for all queries and mutations using this queryClient.
 
-## `client.fetchQueryData`
+## `queryClient.fetchQueryData`
 
 `fetchQueryData` is an asynchronous method that can be used to fetch and cache a query. It will either resolve with the data or throw with the error. Use the `prefetchQuery` method if you just want to fetch a query without needing the result.
 
@@ -59,7 +59,7 @@ If the query exists and the data is not invalidated or older than the given `sta
 
 ```js
 try {
-  const data = await client.fetchQueryData(queryKey, queryFn)
+  const data = await queryClient.fetchQueryData(queryKey, queryFn)
 } catch (error) {
   console.log(error)
 }
@@ -69,7 +69,7 @@ Specify a `staleTime` to only fetch when the data is older than a certain amount
 
 ```js
 try {
-  const data = await client.fetchQueryData(queryKey, queryFn, {
+  const data = await queryClient.fetchQueryData(queryKey, queryFn, {
     staleTime: 10000,
   })
 } catch (error) {
@@ -85,18 +85,18 @@ The options for `fetchQueryData` are exactly the same as those of [`useQuery`](#
 
 - `Promise<TData>`
 
-## `client.prefetchQuery`
+## `queryClient.prefetchQuery`
 
 `prefetchQuery` is an asynchronous method that can be used to prefetch a query before it is needed or rendered with `useQuery` and friends. The method works the same as `fetchQueryData` except that is will not throw or return any data.
 
 ```js
-await client.prefetchQuery(queryKey, queryFn)
+await queryClient.prefetchQuery(queryKey, queryFn)
 ```
 
 You can even use it with a default queryFn in your config!
 
 ```js
-await client.prefetchQuery(queryKey)
+await queryClient.prefetchQuery(queryKey)
 ```
 
 **Options**
@@ -108,12 +108,12 @@ The options for `prefetchQuery` are exactly the same as those of [`useQuery`](#u
 - `Promise<void>`
   - A promise is returned that will either immediately resolve if no fetch is needed or after the query has been executed. It will not return any data or throw any errors.
 
-## `client.getQueryData`
+## `queryClient.getQueryData`
 
 `getQueryData` is a synchronous function that can be used to get an existing query's cached data. If the query does not exist, `undefined` will be returned.
 
 ```js
-const data = client.getQueryData(queryKey)
+const data = queryClient.getQueryData(queryKey)
 ```
 
 **Options**
@@ -126,14 +126,14 @@ const data = client.getQueryData(queryKey)
 - `data: TData | undefined`
   - The data for the cached query, or `undefined` if the query does not exist.
 
-## `client.setQueryData`
+## `queryClient.setQueryData`
 
 `setQueryData` is a synchronous function that can be used to immediately update a query's cached data. If the query does not exist, it will be created. **If the query is not utilized by a query hook in the default `cacheTime` of 5 minutes, the query will be garbage collected**.
 
 > The difference between using `setQueryData` and `fetchQueryData` is that `setQueryData` is sync and assumes that you already synchronously have the data available. If you need to fetch the data asynchronously, it's suggested that you either refetch the query key or use `fetchQueryData` to handle the asynchronous fetch.
 
 ```js
-client.setQueryData(queryKey, updater)
+queryClient.setQueryData(queryKey, updater)
 ```
 
 **Options**
@@ -157,12 +157,12 @@ For convenience in syntax, you can also pass an updater function which receives
 setQueryData(queryKey, oldData => newData)
 ```
 
-## `client.getQueryState`
+## `queryClient.getQueryState`
 
 `getQueryState` is a synchronous function that can be used to get an existing query's state. If the query does not exist, `undefined` will be returned.
 
 ```js
-const state = client.getQueryState(queryKey)
+const state = queryClient.getQueryState(queryKey)
 console.log(state.updatedAt)
 ```
 
@@ -171,12 +171,12 @@ console.log(state.updatedAt)
 - `queryKey?: QueryKey`: [Query Keys](../guides/query-keys)
 - `filters?: QueryFilters`: [Query Filters](../guides/query-filters)
 
-## `client.setQueryDefaults`
+## `queryClient.setQueryDefaults`
 
-`setQueryDefaults` is a synchronous method to set default options for a specific query. If the query does not exist yet it will create it.
+`setQueryDefaults` is a synchronous method to set default options for specific queries:
 
 ```js
-client.setQueryDefaults('posts', fetchPosts)
+queryClient.setQueryDefaults('posts', { queryFn: fetchPosts })
 
 function Component() {
   const { data } = useQuery('posts')
@@ -185,10 +185,27 @@ function Component() {
 
 **Options**
 
-- `queryKey?: QueryKey`: [Query Keys](../guides/query-keys)
-- `filters?: QueryFilters`: [Query Filters](../guides/query-filters)
+- `queryKey: QueryKey`: [Query Keys](../guides/query-keys)
+- `options: QueryOptions`
+
+## `queryClient.setMutationDefaults`
+
+`setMutationDefaults` is a synchronous method to set default options for specific mutations:
+
+```js
+queryClient.setMutationDefaults('addPost', { mutationFn: addPost })
 
-## `client.invalidateQueries`
+function Component() {
+  const { data } = useMutation('addPost')
+}
+```
+
+**Options**
+
+- `mutationKey: string | unknown[]`
+- `options: MutationOptions`
+
+## `queryClient.invalidateQueries`
 
 The `invalidateQueries` method can be used to invalidate and refetch single or multiple queries in the cache based on their query keys or any other functionally accessible property/state of the query. By default, all matching queries are immediately marked as invalid and active queries are refetched in the background.
 
@@ -196,7 +213,7 @@ The `invalidateQueries` method can be used to invalidate and refetch single or m
 - If you **want inactive queries to refetch** as well, use the `refetchInactive: true` option
 
 ```js
-await client.invalidateQueries('posts', {
+await queryClient.invalidateQueries('posts', {
   exact,
   refetchActive = true,
   refetchInactive = false
@@ -217,7 +234,7 @@ await client.invalidateQueries('posts', {
   - `throwOnError?: boolean`
     - When set to `true`, this method will throw if any of the query refetch tasks fail.
 
-## `client.refetchQueries`
+## `queryClient.refetchQueries`
 
 The `refetchQueries` method can be used to refetch queries based on certain conditions.
 
@@ -225,16 +242,16 @@ Examples:
 
 ```js
 // refetch all queries:
-await client.refetchQueries()
+await queryClient.refetchQueries()
 
 // refetch all stale queries:
-await client.refetchQueries({ stale: true })
+await queryClient.refetchQueries({ stale: true })
 
 // refetch all active queries partially matching a query key:
-await client.refetchQueries(['posts'], { active: true })
+await queryClient.refetchQueries(['posts'], { active: true })
 
 // refetch all active queries exactly matching a query key:
-await client.refetchQueries(['posts', 1], { active: true, exact: true })
+await queryClient.refetchQueries(['posts', 1], { active: true, exact: true })
 ```
 
 **Options**
@@ -249,14 +266,14 @@ await client.refetchQueries(['posts', 1], { active: true, exact: true })
 
 This function returns a promise that will resolve when all of the queries are done being refetched. By default, it **will not** throw an error if any of those queries refetches fail, but this can be configured by setting the `throwOnError` option to `true`
 
-## `client.cancelQueries`
+## `queryClient.cancelQueries`
 
 The `cancelQueries` method can be used to cancel outgoing queries based on their query keys or any other functionally accessible property/state of the query.
 
 This is most useful when performing optimistic updates since you will likely need to cancel any outgoing query refetches so they don't clobber your optimistic update when they resolve.
 
 ```js
-await client.cancelQueries('posts', { exact: true })
+await queryClient.cancelQueries('posts', { exact: true })
 ```
 
 **Options**
@@ -268,12 +285,12 @@ await client.cancelQueries('posts', { exact: true })
 
 This method does not return anything
 
-## `client.removeQueries`
+## `queryClient.removeQueries`
 
 The `removeQueries` method can be used to remove queries from the cache based on their query keys or any other functionally accessible property/state of the query.
 
 ```js
-client.removeQueries(queryKey, { exact: true })
+queryClient.removeQueries(queryKey, { exact: true })
 ```
 
 **Options**
@@ -285,57 +302,12 @@ client.removeQueries(queryKey, { exact: true })
 
 This method does not return anything
 
-## `client.watchQuery`
-
-The `watchQuery` method returns a `QueryObserver` instance which can be used to watch a query.
-
-```js
-const observer = client.watchQuery('posts')
-
-const unsubscribe = observer.subscribe(result => {
-  console.log(result)
-  unsubscribe()
-})
-```
-
-**Options**
-
-The options for `watchQuery` are exactly the same as those of [`useQuery`](#usequery).
-
-**Returns**
-
-- `QueryObserver`
-
-## `client.watchQueries`
-
-The `watchQueries` method returns a `QueriesObserver` instance to watch multiple queries.
-
-```js
-const observer = client.watchQueries([
-  { queryKey: ['post', 1], queryFn: fetchPost },
-  { queryKey: ['post', 2], queryFn: fetchPost },
-])
-
-const unsubscribe = observer.subscribe(result => {
-  console.log(result)
-  unsubscribe()
-})
-```
-
-**Options**
-
-The options for `watchQueries` are exactly the same as those of [`useQueries`](#usequeries).
-
-**Returns**
-
-- `QueriesObserver`
-
-## `client.isFetching`
+## `queryClient.isFetching`
 
 This `isFetching` method returns an `integer` representing how many queries, if any, in the cache are currently fetching (including background-fetching, loading new pages, or loading more infinite query results)
 
 ```js
-if (client.isFetching()) {
+if (queryClient.isFetching()) {
   console.log('At least one query is fetching!')
 }
 ```
@@ -351,20 +323,20 @@ React Query also exports a handy [`useIsFetching`](#useisfetching) hook that wil
 
 This method returns the number of fetching queries.
 
-## `client.getDefaultOptions`
+## `queryClient.getDefaultOptions`
 
 The `getDefaultOptions` method returns the default options which have been set when creating the client or with `setDefaultOptions`.
 
 ```js
-const defaultOptions = client.getDefaultOptions()
+const defaultOptions = queryClient.getDefaultOptions()
 ```
 
-## `client.setDefaultOptions`
+## `queryClient.setDefaultOptions`
 
-The `setDefaultOptions` method can be used to dynamically set the default options for this client.
+The `setDefaultOptions` method can be used to dynamically set the default options for this queryClient.
 
 ```js
-client.setDefaultOptions({
+queryClient.setDefaultOptions({
   queries: {
     staleTime: Infinity,
   },
diff --git a/docs/src/pages/reference/QueryClientProvider.md b/docs/src/pages/reference/QueryClientProvider.md
index b0bfd7d085..95a0dd95c0 100644
--- a/docs/src/pages/reference/QueryClientProvider.md
+++ b/docs/src/pages/reference/QueryClientProvider.md
@@ -8,10 +8,10 @@ Use the `QueryClientProvider` component to connect and provide a `QueryClient` t
 ```js
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({ queryCache })
 
 function App() {
-  return <QueryClientProvider client={client}>...</QueryClientProvider>
+  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
 }
 ```
diff --git a/docs/src/pages/reference/QueryObserver.md b/docs/src/pages/reference/QueryObserver.md
new file mode 100644
index 0000000000..70ccfba125
--- /dev/null
+++ b/docs/src/pages/reference/QueryObserver.md
@@ -0,0 +1,21 @@
+---
+id: QueryObserver
+title: QueryObserver
+---
+
+## `QueryObserver`
+
+The `QueryObserver` can be used to observe and switch between queries.
+
+```js
+const observer = new QueryObserver(queryClient, { queryKey: 'posts' })
+
+const unsubscribe = observer.subscribe(result => {
+  console.log(result)
+  unsubscribe()
+})
+```
+
+**Options**
+
+The options for the `QueryObserver` are exactly the same as those of [`useQuery`](#usequery).
diff --git a/docs/src/pages/reference/hydration/HydrateComp.md b/docs/src/pages/reference/hydration/HydrateComp.md
index 21e0e95082..ea868b08a3 100644
--- a/docs/src/pages/reference/hydration/HydrateComp.md
+++ b/docs/src/pages/reference/hydration/HydrateComp.md
@@ -3,7 +3,7 @@ id: hydration/HydrateComp
 title: hydration/Hydrate
 ---
 
-`hydration/Hydrate` adds a previously dehydrated state into the `cache` that would returned by running `useQueryCache`. If the cache already contains data, the new queries will be intelligently merged based on update timestamp.
+`hydration/Hydrate` adds a previously dehydrated state into the `queryClient` that would returned by running `useQueryCache`. If the client already contains data, the new queries will be intelligently merged based on update timestamp.
 
 ```js
 import { Hydrate } from 'react-query/hydration'
diff --git a/docs/src/pages/reference/hydration/dehydrate.md b/docs/src/pages/reference/hydration/dehydrate.md
index 86defff870..0e213d23f7 100644
--- a/docs/src/pages/reference/hydration/dehydrate.md
+++ b/docs/src/pages/reference/hydration/dehydrate.md
@@ -8,26 +8,26 @@ title: hydration/dehydrate
 ```js
 import { dehydrate } from 'react-query/hydration'
 
-const dehydratedState = dehydrate(cache, {
-  shouldDehydrate,
+const dehydratedState = dehydrate(queryClient, {
+  shouldDehydrateQuery,
 })
 ```
 
 **Options**
 
-- `cache: QueryCache`
+- `client: QueryClient`
   - **Required**
-  - The `cache` that should be dehydrated
+  - The `queryClient` that should be dehydrated
 - `options: DehydrateOptions`
   - Optional
-  - `shouldDehydrate: (query: Query) => boolean`
+  - `shouldDehydrateQuery: (query: Query) => boolean`
     - This function is called for each query in the cache
     - Return `true` to include this query in dehydration, or `false` otherwise
-    - Default version only includes successful queries, do `shouldDehydrate: () => true` to include all queries
+    - Default version only includes successful queries, do `shouldDehydrateQuery: () => true` to include all queries
 
 **Returns**
 
 - `dehydratedState: DehydratedState`
-  - This includes everything that is needed to hydrate the `cache` at a later point
+  - This includes everything that is needed to hydrate the `queryClient` at a later point
   - You **should not** rely on the exact format of this response, it is not part of the public API and can change at any time
   - This result is not in serialized form, you need to do that yourself if desired
diff --git a/docs/src/pages/reference/hydration/hydrate.md b/docs/src/pages/reference/hydration/hydrate.md
index 6cf435e5c0..406f624447 100644
--- a/docs/src/pages/reference/hydration/hydrate.md
+++ b/docs/src/pages/reference/hydration/hydrate.md
@@ -3,22 +3,22 @@ id: hydration/hydrate
 title: hydration/hydrate
 ---
 
-`hydrate` adds a previously dehydrated state into a `cache`. If the queries included in dehydration already exist in the cache, `hydrate` does not overwrite them.
+`hydrate` adds a previously dehydrated state into a `cache`. If the queries included in dehydration already exist in the queryCache, `hydrate` does not overwrite them.
 
 ```js
 import { hydrate } from 'react-query/hydration'
 
-hydrate(cache, dehydratedState, options)
+hydrate(queryClient, dehydratedState, options)
 ```
 
 **Options**
 
-- `cache: QueryCache`
+- `client: QueryClient`
   - **Required**
-  - The `cache` to hydrate the state into
+  - The `queryClient` to hydrate the state into
 - `dehydratedState: DehydratedState`
   - **Required**
-  - The state to hydrate into the cache
+  - The state to hydrate into the client
 - `options: HydrateOptions`
   - Optional
   - `defaultOptions: QueryOptions`
diff --git a/docs/src/pages/reference/hydration/useHydrate.md b/docs/src/pages/reference/hydration/useHydrate.md
index 08f5333f1a..995b051305 100644
--- a/docs/src/pages/reference/hydration/useHydrate.md
+++ b/docs/src/pages/reference/hydration/useHydrate.md
@@ -3,7 +3,7 @@ id: hydration/useHydrate
 title: hydration/useHydrate
 ---
 
-`useHydrate` adds a previously dehydrated state into the `cache` that would be returned by `useQueryCache()`. If the cache already contains data, the new queries will be intelligently merged based on update timestamp.
+`useHydrate` adds a previously dehydrated state into the `queryClient` that would be returned by `useQueryClient()`. If the client already contains data, the new queries will be intelligently merged based on update timestamp.
 
 ```jsx
 import { useHydrate } from 'react-query/hydration'
diff --git a/docs/src/pages/reference/useMutation.md b/docs/src/pages/reference/useMutation.md
index e465848309..004c705b7f 100644
--- a/docs/src/pages/reference/useMutation.md
+++ b/docs/src/pages/reference/useMutation.md
@@ -10,6 +10,7 @@ const {
   isError,
   isIdle,
   isLoading,
+  isPaused,
   isSuccess,
   mutate,
   mutateAsync,
@@ -36,26 +37,34 @@ mutate(variables, {
   - **Required**
   - A function that performs an asynchronous task and returns a promise.
   - `variables` is an object that `mutate` will pass to your `mutationFn`
+- `mutationKey: string`
+  - Optional
+  - A mutation key can be set to inherit defaults set with `queryClient.setMutationDefaults` or to identify the mutation in the devtools.
 - `onMutate: (variables: TVariables) => Promise<TContext | void> | TContext | void`
   - Optional
   - This function will fire before the mutation function is fired and is passed the same variables the mutation function would receive
   - Useful to perform optimistic updates to a resource in hopes that the mutation succeeds
   - The value returned from this function will be passed to both the `onError` and `onSettled` functions in the event of a mutation failure and can be useful for rolling back optimistic updates.
-- `onSuccess: (data: TData, variables: TVariables, context: TContext) => Promise<void> | void`
+- `onSuccess: (data: TData, variables: TVariables, context?: TContext) => Promise<void> | void`
   - Optional
   - This function will fire when the mutation is successful and will be passed the mutation's result.
-  - Fires after the `mutate`-level `onSuccess` handler (if it is defined)
   - If a promise is returned, it will be awaited and resolved before proceeding
 - `onError: (err: TError, variables: TVariables, context?: TContext) => Promise<void> | void`
   - Optional
   - This function will fire if the mutation encounters an error and will be passed the error.
-  - Fires after the `mutate`-level `onError` handler (if it is defined)
   - If a promise is returned, it will be awaited and resolved before proceeding
 - `onSettled: (data: TData, error: TError, variables: TVariables, context?: TContext) => Promise<void> | void`
   - Optional
   - This function will fire when the mutation is either successfully fetched or encounters an error and be passed either the data or error
-  - Fires after the `mutate`-level `onSettled` handler (if it is defined)
   - If a promise is returned, it will be awaited and resolved before proceeding
+- `retry: boolean | number | (failureCount: number, error: TError) => boolean`
+  - If `false`, failed mutations will not retry by default.
+  - If `true`, failed mutations will retry infinitely.
+  - If set to an `number`, e.g. `3`, failed mutations will retry until the failed mutations count meets that number.
+- `retryDelay: (retryAttempt: number) => number`
+  - This function receives a `retryAttempt` integer and returns the delay to apply before the next attempt in milliseconds.
+  - A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff.
+  - A function like `attempt => attempt * 1000` applies linear backoff.
 - `useErrorBoundary`
   - Defaults to the global query config's `useErrorBoundary` value, which is `false`
   - Set this to true if you want mutation errors to be thrown in the render phase and propagate to the nearest error boundary
@@ -63,12 +72,11 @@ mutate(variables, {
 **Returns**
 
 - `mutate: (variables: TVariables, { onSuccess, onSettled, onError }) => void`
-  - The mutation function you can call with variables to trigger the mutation and optionally override the original mutation options.
+  - The mutation function you can call with variables to trigger the mutation and optionally override options passed to `useMutation`.
   - `variables: TVariables`
     - Optional
     - The variables object to pass to the `mutationFn`.
   - Remaining options extend the same options described above in the `useMutation` hook.
-  - Lifecycle callbacks defined here will fire **after** those of the same type defined in the `useMutation`-level options.
 - `mutateAsync: (variables: TVariables, { onSuccess, onSettled, onError }) => Promise<TData>`
   - Similar to `mutate` but returns a promise which can be awaited.
 - `status: string`
diff --git a/docs/src/pages/reference/useQueryClient.md b/docs/src/pages/reference/useQueryClient.md
index 8099b1288c..edd12cbfc1 100644
--- a/docs/src/pages/reference/useQueryClient.md
+++ b/docs/src/pages/reference/useQueryClient.md
@@ -8,5 +8,5 @@ The `useQueryClient` hook returns the current `QueryClient` instance.
 ```js
 import { useQueryClient } from 'react-query'
 
-const client = useQueryClient()
+const queryClient = useQueryClient()
 ```
diff --git a/examples/auto-refetching/pages/index.js b/examples/auto-refetching/pages/index.js
index 3f9f27336e..08c77d9f0e 100755
--- a/examples/auto-refetching/pages/index.js
+++ b/examples/auto-refetching/pages/index.js
@@ -7,25 +7,27 @@ import {
   useQuery,
   useQueryClient,
   useMutation,
+  MutationCache,
   QueryCache,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
 import { ReactQueryDevtools } from 'react-query-devtools'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const mutationCache = new MutationCache()
+const queryClient = new QueryClient({ queryCache, mutationCache })
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }
 
 function Example() {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
   const [intervalMs, setIntervalMs] = React.useState(1000)
   const [value, setValue] = React.useState('')
 
@@ -42,11 +44,11 @@ function Example() {
   )
 
   const addMutation = useMutation(value => fetch(`/api/data?add=${value}`), {
-    onSuccess: () => client.invalidateQueries('todos'),
+    onSuccess: () => queryClient.invalidateQueries('todos'),
   })
 
   const clearMutation = useMutation(() => fetch(`/api/data?clear=1`), {
-    onSuccess: () => client.invalidateQueries('todos'),
+    onSuccess: () => queryClient.invalidateQueries('todos'),
   })
 
   if (status === 'loading') return <h1>Loading...</h1>
diff --git a/examples/basic-graphql-request/src/index.js b/examples/basic-graphql-request/src/index.js
index 42311d85cd..9449501011 100644
--- a/examples/basic-graphql-request/src/index.js
+++ b/examples/basic-graphql-request/src/index.js
@@ -13,14 +13,14 @@ import { request, gql } from "graphql-request";
 
 const endpoint = "https://graphqlzero.almansi.me/api";
 
-const cache = new QueryCache();
-const client = new QueryClient({ cache });
+const queryCache = new QueryCache();
+const queryClient = new QueryClient({ queryCache });
 
 function App() {
   const [postId, setPostId] = React.useState(-1);
 
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <p>
         As you visit the posts below, you will notice them in a loading state
         the first time you load them. However, after you return to this list and
@@ -63,7 +63,7 @@ function usePosts() {
 }
 
 function Posts({ setPostId }) {
-  const client = useQueryClient();
+  const queryClient = useQueryClient();
   const { status, data, error, isFetching } = usePosts();
 
   return (
@@ -85,7 +85,7 @@ function Posts({ setPostId }) {
                     style={
                       // We can use the queryCache here to show bold links for
                       // ones that are cached
-                      client.getQueryData(["post", post.id])
+                      queryClient.getQueryData(["post", post.id])
                         ? {
                             fontWeight: "bold",
                             color: "green",
diff --git a/examples/basic/src/index.js b/examples/basic/src/index.js
index a496d14268..6c8a6fcf4e 100644
--- a/examples/basic/src/index.js
+++ b/examples/basic/src/index.js
@@ -11,14 +11,14 @@ import {
 } from "react-query";
 import { ReactQueryDevtools } from "react-query-devtools";
 
-const cache = new QueryCache();
-const client = new QueryClient({ cache });
+const queryCache = new QueryCache();
+const queryClient = new QueryClient({ queryCache });
 
 function App() {
   const [postId, setPostId] = React.useState(-1);
 
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <p>
         As you visit the posts below, you will notice them in a loading state
         the first time you load them. However, after you return to this list and
@@ -49,7 +49,7 @@ function usePosts() {
 }
 
 function Posts({ setPostId }) {
-  const client = useQueryClient();
+  const queryClient = useQueryClient();
   const { status, data, error, isFetching } = usePosts();
 
   return (
@@ -71,7 +71,7 @@ function Posts({ setPostId }) {
                     style={
                       // We can use the queryCache here to show bold links for
                       // ones that are cached
-                      client.getQueryData(["post", post.id])
+                      queryClient.getQueryData(["post", post.id])
                         ? {
                             fontWeight: "bold",
                             color: "green",
diff --git a/examples/custom-hooks/src/index.js b/examples/custom-hooks/src/index.js
index 31ca53f99d..d1dd0204e2 100644
--- a/examples/custom-hooks/src/index.js
+++ b/examples/custom-hooks/src/index.js
@@ -12,14 +12,14 @@ import { ReactQueryDevtools } from "react-query-devtools";
 import usePosts from "./hooks/usePosts";
 import usePost from "./hooks/usePost";
 
-const cache = new QueryCache();
-const client = new QueryClient({ cache });
+const queryCache = new QueryCache();
+const queryClient = new QueryClient({ queryCache });
 
 function App() {
   const [postId, setPostId] = React.useState(-1);
 
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <p>
         This example is exactly the same as the basic example, but each query
         has been refactored to be it's own custom hook. This design is the
@@ -37,7 +37,7 @@ function App() {
 }
 
 function Posts({ setPostId }) {
-  const client = useQueryClient();
+  const queryClient = useQueryClient();
   const { status, data, error, isFetching } = usePosts();
 
   return (
@@ -59,7 +59,7 @@ function Posts({ setPostId }) {
                     style={
                       // We can use the queryCache here to show bold links for
                       // ones that are cached
-                      client.getQueryData(["post", post.id])
+                      queryClient.getQueryData(["post", post.id])
                         ? {
                             fontWeight: "bold",
                             color: "green",
diff --git a/examples/default-query-function/src/index.js b/examples/default-query-function/src/index.js
index 8139a3935f..70b43d23b2 100644
--- a/examples/default-query-function/src/index.js
+++ b/examples/default-query-function/src/index.js
@@ -19,11 +19,11 @@ const defaultQueryFn = async (key) => {
   return data;
 };
 
-const cache = new QueryCache();
+const queryCache = new QueryCache();
 
 // provide the default query function to your app via the query client
-const client = new QueryClient({
-  cache,
+const queryClient = new QueryClient({
+  queryCache,
   defaultOptions: {
     queries: {
       queryFn: defaultQueryFn,
@@ -35,7 +35,7 @@ function App() {
   const [postId, setPostId] = React.useState(-1);
 
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <p>
         As you visit the posts below, you will notice them in a loading state
         the first time you load them. However, after you return to this list and
@@ -57,7 +57,7 @@ function App() {
 }
 
 function Posts({ setPostId }) {
-  const client = useQueryClient();
+  const queryClient = useQueryClient();
 
   // All you have to do now is pass a key!
   const { status, data, error, isFetching } = useQuery("/posts");
@@ -81,7 +81,7 @@ function Posts({ setPostId }) {
                     style={
                       // We can use the queryCache here to show bold links for
                       // ones that are cached
-                      client.getQueryData(["post", post.id])
+                      queryClient.getQueryData(["post", post.id])
                         ? {
                             fontWeight: "bold",
                             color: "green",
diff --git a/examples/focus-refetching/pages/index.js b/examples/focus-refetching/pages/index.js
index 33b4bf209e..82f0e672ce 100755
--- a/examples/focus-refetching/pages/index.js
+++ b/examples/focus-refetching/pages/index.js
@@ -5,25 +5,27 @@ import {
   useQuery,
   useQueryClient,
   useMutation,
+  MutationCache,
   QueryCache,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
 import { ReactQueryDevtools } from 'react-query-devtools'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const mutationCache = new MutationCache()
+const queryClient = new QueryClient({ queryCache, mutationCache })
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }
 
 function Example() {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
 
   const { status, data, error } = useQuery('user', async () => {
     const res = await axios.get('/api/user')
@@ -31,11 +33,11 @@ function Example() {
   })
 
   const logoutMutation = useMutation(logout, {
-    onSuccess: () => client.invalidateQueries('user'),
+    onSuccess: () => queryClient.invalidateQueries('user'),
   })
 
   const loginMutation = useMutation(login, {
-    onSuccess: () => client.invalidateQueries('user'),
+    onSuccess: () => queryClient.invalidateQueries('user'),
   })
 
   return (
diff --git a/examples/gql-blog/src/pages/Blog.js b/examples/gql-blog/src/pages/Blog.js
index 77267a1ef3..f13f5d558c 100644
--- a/examples/gql-blog/src/pages/Blog.js
+++ b/examples/gql-blog/src/pages/Blog.js
@@ -1,21 +1,21 @@
-import React from "react";
-import { useQuery } from "react-query";
-import { Card, Box } from "sriracha-ui";
-import { client } from "../utils";
-import { gql } from "graphql-request";
-import { useParams } from "react-router";
-import ReactMarkdown from "react-markdown";
-import { PrismAsync as SyntaxHighlighter } from "react-syntax-highlighter";
-import dark from "../syntaxTheme";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from 'react'
+import { useQuery } from 'react-query'
+import { Card, Box } from 'sriracha-ui'
+import { client } from '../utils'
+import { gql } from 'graphql-request'
+import { useParams } from 'react-router'
+import ReactMarkdown from 'react-markdown'
+import { PrismAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
+import dark from '../syntaxTheme'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const CodeBlock = ({ language, value }) => {
   return (
     <SyntaxHighlighter style={dark} language={language}>
       {value}
     </SyntaxHighlighter>
-  );
-};
+  )
+}
 
 const query = gql`
   query GetPubFileBySlug($slug: String!) {
@@ -23,25 +23,25 @@ const query = gql`
       body
     }
   }
-`;
+`
 
 export default function Blog() {
-  const { slug } = useParams();
+  const { slug } = useParams()
 
-  const { data, isLoading, status } = useQuery("posts", async () => {
-    const res = await client.request(query, { slug });
-    return res;
-  });
+  const { data, isLoading, status } = useQuery('posts', async () => {
+    const res = await client.request(query, { slug })
+    return res
+  })
 
-  const file = data?.getPubFileBySlug;
-  console.log("file:", file);
+  const file = data?.getPubFileBySlug
+  console.log('file:', file)
 
-  if (status === "error")
+  if (status === 'error')
     return (
       <Card>
         The blog your looking for doesn't exist or was deleted by the user.
       </Card>
-    );
+    )
 
   return (
     <Card maxW={9} w="96%" shade tal pb="4rem">
@@ -58,5 +58,5 @@ export default function Blog() {
         )}
       </Box>
     </Card>
-  );
+  )
 }
diff --git a/examples/gql-blog/src/pages/Home.js b/examples/gql-blog/src/pages/Home.js
index ffbaef8856..3808e1fffb 100644
--- a/examples/gql-blog/src/pages/Home.js
+++ b/examples/gql-blog/src/pages/Home.js
@@ -1,10 +1,9 @@
-import React from "react";
-import { Card, Text, Box, Flex, Img } from "sriracha-ui";
-import { Link } from "react-router-dom";
-import { gql } from "graphql-request";
-import { client } from "../utils";
-import { useQuery } from "react-query";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from 'react'
+import { Card, Text, Box, Flex, Img } from 'sriracha-ui'
+import { gql } from 'graphql-request'
+import { client } from '../utils'
+import { useQuery } from 'react-query'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const query = gql`
   query GetPubFiles {
@@ -17,29 +16,29 @@ const query = gql`
       body
     }
   }
-`;
+`
 
 export default function Home() {
-  const { data, isLoading } = useQuery("posts", async () => {
-    const res = await client.request(query);
-    return res;
-  });
-  const files = data?.getPubFiles;
+  const { data, isLoading } = useQuery('posts', async () => {
+    const res = await client.request(query)
+    return res
+  })
+  const files = data?.getPubFiles
   return (
     <Card maxW={9} w="96%" shade>
       <Text color="red6" size="5xl" as="h1" tac font="Raleway">
         Welcome To My Blog!
       </Text>
       <Text color="indigo6" size="xl" as="h2" tac font="Raleway">
-        Powered by{" "}
+        Powered by{' '}
         <Text as="a" size="xl" href="https://sriracha-docs.vercel.app/">
           Sriracha UI
         </Text>
-        ,{" "}
+        ,{' '}
         <Text as="a" size="xl" href="https://www.bestmarkdowneditor.com/">
-          Best Markdown Editor{" "}
+          Best Markdown Editor{' '}
         </Text>
-        and{" "}
+        and{' '}
         <Text as="a" size="xl" href="https://react-query.tanstack.com/">
           React Query
         </Text>
@@ -51,7 +50,7 @@ export default function Home() {
           <FontAwesomeIcon icon="spinner" spin size="3x" />
         ) : (
           <>
-            {files?.map((file) => (
+            {files?.map(file => (
               <Card
                 as="a"
                 href={`/${file.slug}`}
@@ -82,5 +81,5 @@ export default function Home() {
         )}
       </Flex>
     </Card>
-  );
+  )
 }
diff --git a/examples/gql-blog/src/utils/index.js b/examples/gql-blog/src/utils/index.js
index 8c7808ab55..c30ca1078f 100644
--- a/examples/gql-blog/src/utils/index.js
+++ b/examples/gql-blog/src/utils/index.js
@@ -1,10 +1,10 @@
-import { GraphQLClient } from "graphql-request";
+import { GraphQLClient } from 'graphql-request'
 
-const endpoint = "https://best-markdown-editor-be.herokuapp.com/cms";
+const endpoint = 'https://best-markdown-editor-be.herokuapp.com/cms'
 
 export const client = new GraphQLClient(endpoint, {
   headers: {
-    "Content-Type": "application/json",
-    token: "588c454c-7176-457e-9d42-ad6d0e7ffdc4",
+    'Content-Type': 'application/json',
+    token: '588c454c-7176-457e-9d42-ad6d0e7ffdc4',
   },
-});
+})
diff --git a/examples/load-more-infinite-scroll/pages/index.js b/examples/load-more-infinite-scroll/pages/index.js
index aa3e92d798..d589c193e3 100755
--- a/examples/load-more-infinite-scroll/pages/index.js
+++ b/examples/load-more-infinite-scroll/pages/index.js
@@ -14,12 +14,12 @@ import { ReactQueryDevtools } from 'react-query-devtools'
 
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({ queryCache })
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
diff --git a/examples/optimistic-updates/pages/index.js b/examples/optimistic-updates/pages/index.js
index b116c715fa..1e70bbb605 100755
--- a/examples/optimistic-updates/pages/index.js
+++ b/examples/optimistic-updates/pages/index.js
@@ -5,25 +5,27 @@ import {
   useQuery,
   useQueryClient,
   useMutation,
+  MutationCache,
   QueryCache,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
 import { ReactQueryDevtools } from 'react-query-devtools'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const mutationCache = new MutationCache()
+const queryClient = new QueryClient({ queryCache, mutationCache })
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }
 
 function Example() {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
   const [text, setText] = React.useState('')
   const { status, data, error, isFetching } = useQuery('todos', async () => {
     const res = await axios.get('/api/data')
@@ -38,11 +40,11 @@ function Example() {
       // an error
       onMutate: async text => {
         setText('')
-        await client.cancelQueries('todos')
+        await queryClient.cancelQueries('todos')
 
-        const previousValue = client.getQueryData('todos')
+        const previousValue = queryClient.getQueryData('todos')
 
-        client.setQueryData('todos', old => ({
+        queryClient.setQueryData('todos', old => ({
           ...old,
           items: [...old.items, text],
         }))
@@ -51,10 +53,10 @@ function Example() {
       },
       // On failure, roll back to the previous value
       onError: (err, variables, previousValue) =>
-        client.setQueryData('todos', previousValue),
+        queryClient.setQueryData('todos', previousValue),
       // After success or failure, refetch the todos query
       onSettled: () => {
-        client.invalidateQueries('todos')
+        queryClient.invalidateQueries('todos')
       },
     }
   )
diff --git a/examples/pagination/pages/index.js b/examples/pagination/pages/index.js
index 1821d34f7e..72d927f6fe 100644
--- a/examples/pagination/pages/index.js
+++ b/examples/pagination/pages/index.js
@@ -9,19 +9,19 @@ import {
 } from 'react-query'
 import { ReactQueryDevtools } from 'react-query-devtools'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({ queryCache })
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }
 
 function Example() {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
   const [page, setPage] = React.useState(0)
 
   const fetchProjects = React.useCallback(async (key, page = 0) => {
@@ -38,7 +38,7 @@ function Example() {
   // Prefetch the next page!
   React.useEffect(() => {
     if (data?.hasMore) {
-      client.prefetchQuery(['projects', page + 1], fetchProjects)
+      queryClient.prefetchQuery(['projects', page + 1], fetchProjects)
     }
   }, [data, fetchProjects, page])
 
diff --git a/examples/playground/src/index.js b/examples/playground/src/index.js
index 03cece630f..01b833539b 100644
--- a/examples/playground/src/index.js
+++ b/examples/playground/src/index.js
@@ -4,10 +4,11 @@ import ReactDOM from "react-dom";
 import {
   QueryClient,
   QueryClientProvider,
+  QueryCache,
+  MutationCache,
   useQuery,
   useQueryClient,
   useMutation,
-  QueryCache,
 } from "react-query";
 
 import { ReactQueryDevtools } from "react-query-devtools";
@@ -28,8 +29,9 @@ let errorRate = 0.05;
 let queryTimeMin = 1000;
 let queryTimeMax = 2000;
 
-const cache = new QueryCache();
-const client = new QueryClient({ cache });
+const queryCache = new QueryCache();
+const mutationCache = new MutationCache();
+const queryClient = new QueryClient({ queryCache, mutationCache });
 
 function Root() {
   const [staleTime, setStaleTime] = React.useState(1000);
@@ -49,7 +51,7 @@ function Root() {
   }, [localErrorRate, localFetchTimeMax, localFetchTimeMin]);
 
   React.useEffect(() => {
-    client.setDefaultOptions({
+    queryClient.setDefaultOptions({
       queries: {
         staleTime,
         cacheTime,
@@ -58,7 +60,7 @@ function Root() {
   }, [cacheTime, staleTime]);
 
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <p>
         The "staleTime" and "cacheTime" durations have been altered in this
         example to show how query stale-ness and query caching work on a
@@ -130,7 +132,7 @@ function Root() {
 }
 
 function App() {
-  const client = useQueryClient();
+  const queryClient = useQueryClient();
   const [editingIndex, setEditingIndex] = React.useState(null);
   const [views, setViews] = React.useState(["", "fruit", "grape"]);
   // const [views, setViews] = React.useState([""]);
@@ -138,7 +140,7 @@ function App() {
   return (
     <div className="App">
       <div>
-        <button onClick={() => client.invalidateQueries(true)}>
+        <button onClick={() => queryClient.invalidateQueries(true)}>
           Force Refetch All
         </button>
       </div>
@@ -232,7 +234,7 @@ function Todos({ initialFilter = "", setEditingIndex }) {
 }
 
 function EditTodo({ editingIndex, setEditingIndex }) {
-  const client = useQueryClient();
+  const queryClient = useQueryClient();
 
   // Don't attempt to query until editingIndex is truthy
   const { status, data, isFetching, error, failureCount, refetch } = useQuery(
@@ -256,8 +258,8 @@ function EditTodo({ editingIndex, setEditingIndex }) {
   const saveMutation = useMutation(patchTodo, {
     onSuccess: (data) => {
       // Update `todos` and the individual todo queries when this mutation succeeds
-      client.invalidateQueries("todos");
-      client.setQueryData(["todo", { id: editingIndex }], data);
+      queryClient.invalidateQueries("todos");
+      queryClient.setQueryData(["todo", { id: editingIndex }], data);
     },
   });
 
@@ -337,12 +339,12 @@ function EditTodo({ editingIndex, setEditingIndex }) {
 }
 
 function AddTodo() {
-  const client = useQueryClient();
+  const queryClient = useQueryClient();
   const [name, setName] = React.useState("");
 
   const addMutation = useMutation(postTodo, {
     onSuccess: () => {
-      client.invalidateQueries("todos");
+      queryClient.invalidateQueries("todos");
     },
   });
 
diff --git a/examples/prefetching/pages/index.js b/examples/prefetching/pages/index.js
index d0c19878d2..cd4fb35624 100755
--- a/examples/prefetching/pages/index.js
+++ b/examples/prefetching/pages/index.js
@@ -23,19 +23,19 @@ const getCharacter = async (key, selectedChar) => {
   return data
 }
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const queryCache = new QueryCache()
+const queryClient = new QueryClient({ queryCache })
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }
 
 function Example() {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
   const rerender = React.useReducer(d => d + 1)[1]
   const [selectedChar, setSelectedChar] = React.useState(1)
 
@@ -48,10 +48,10 @@ function Example() {
 
   const prefetchNext = async id => {
     await Promise.all([
-      client.prefetchQuery(['character', id + 1], getCharacter, {
+      queryClient.prefetchQuery(['character', id + 1], getCharacter, {
         staleTime: 5 * 60 * 1000,
       }),
-      client.prefetchQuery(['character', id - 1], getCharacter, {
+      queryClient.prefetchQuery(['character', id - 1], getCharacter, {
         staleTime: 5 * 60 * 1000,
       }),
     ])
@@ -79,7 +79,7 @@ function Example() {
           >
             <div
               style={
-                client.getQueryData(['character', char.id])
+                queryClient.getQueryData(['character', char.id])
                   ? {
                       fontWeight: 'bold',
                     }
diff --git a/examples/rick-morty/src/App.js b/examples/rick-morty/src/App.js
index 5c430318b5..91b7766ede 100644
--- a/examples/rick-morty/src/App.js
+++ b/examples/rick-morty/src/App.js
@@ -9,12 +9,12 @@ import { ReactQueryDevtools } from "react-query-devtools";
 import "./styles.css";
 import Layout from "./Layout";
 
-const cache = new QueryCache();
-const client = new QueryClient({ cache });
+const queryCache = new QueryCache();
+const queryClient = new QueryClient({ queryCache });
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Router>
         <ThemeProvider theme={theme}>
           <Layout />
diff --git a/examples/simple/src/index.js b/examples/simple/src/index.js
index e542a7783b..07c3818bca 100644
--- a/examples/simple/src/index.js
+++ b/examples/simple/src/index.js
@@ -9,12 +9,12 @@ import {
 } from "react-query";
 import { ReactQueryDevtools } from "react-query-devtools";
 
-const cache = new QueryCache();
-const client = new QueryClient({ cache });
+const queryCache = new QueryCache();
+const queryClient = new QueryClient({ queryCache });
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   );
diff --git a/examples/star-wars/src/App.js b/examples/star-wars/src/App.js
index 5c430318b5..91b7766ede 100644
--- a/examples/star-wars/src/App.js
+++ b/examples/star-wars/src/App.js
@@ -9,12 +9,12 @@ import { ReactQueryDevtools } from "react-query-devtools";
 import "./styles.css";
 import Layout from "./Layout";
 
-const cache = new QueryCache();
-const client = new QueryClient({ cache });
+const queryCache = new QueryCache();
+const queryClient = new QueryClient({ queryCache });
 
 export default function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Router>
         <ThemeProvider theme={theme}>
           <Layout />
diff --git a/examples/suspense/src/components/Projects.js b/examples/suspense/src/components/Projects.js
index b5053bc563..d2e3ade745 100644
--- a/examples/suspense/src/components/Projects.js
+++ b/examples/suspense/src/components/Projects.js
@@ -7,7 +7,7 @@ import Spinner from "./Spinner";
 import { fetchProjects, fetchProject } from "../queries";
 
 export default function Projects({ setActiveProject }) {
-  const client = useQueryClient();
+  const queryClient = useQueryClient();
   const { data, isFetching } = useQuery("projects", fetchProjects);
 
   return (
@@ -18,7 +18,7 @@ export default function Projects({ setActiveProject }) {
           <Button
             onClick={() => {
               // Prefetch the project query
-              client.prefetchQuery(
+              queryClient.prefetchQuery(
                 ["project", { id: project.name }],
                 fetchProject
               );
diff --git a/examples/suspense/src/index.js b/examples/suspense/src/index.js
index 17c33fc602..ed9f55b365 100755
--- a/examples/suspense/src/index.js
+++ b/examples/suspense/src/index.js
@@ -19,9 +19,9 @@ import Button from "./components/Button";
 const Projects = lazy(() => import("./components/Projects"));
 const Project = lazy(() => import("./components/Project"));
 
-const cache = new QueryCache();
-const client = new QueryClient({
-  cache,
+const queryCache = new QueryCache();
+const queryClient = new QueryClient({
+  queryCache,
   defaultOptions: {
     queries: {
       retry: 0,
@@ -32,14 +32,14 @@ const client = new QueryClient({
 
 function App() {
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   );
 }
 
 function Example() {
-  const client = useQueryClient();
+  const queryClient = useQueryClient();
   const [showProjects, setShowProjects] = React.useState(false);
   const [activeProject, setActiveProject] = React.useState(null);
 
@@ -49,7 +49,7 @@ function Example() {
         onClick={() => {
           setShowProjects((old) => {
             if (!old) {
-              client.prefetchQuery("projects", fetchProjects);
+              queryClient.prefetchQuery("projects", fetchProjects);
             }
             return !old;
           });
diff --git a/jest.setup.js b/jest.setup.js
index d8831bc4bb..64d6fe87ff 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,8 +1,8 @@
 import { act } from '@testing-library/react'
 
-import { setNotifyFn } from './src'
+import { notifyManager } from './src'
 
 // Wrap notifications with act to make sure React knows about React Query updates
-setNotifyFn(fn => {
+notifyManager.setNotifyFunction(fn => {
   act(fn)
 })
diff --git a/src/core/focusHandler.ts b/src/core/focusHandler.ts
deleted file mode 100644
index ff1ab64583..0000000000
--- a/src/core/focusHandler.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { isServer, noop } from './utils'
-
-let focusCallback: () => void = noop
-let removePreviousHandler: (() => void) | void
-
-export function setFocusHandler(callback: (handler: () => void) => void) {
-  if (removePreviousHandler) {
-    removePreviousHandler()
-  }
-  removePreviousHandler = callback(() => {
-    focusCallback()
-  })
-}
-
-export function initFocusHandler(callback: () => void) {
-  // Set the callback to execute on focus
-  focusCallback = callback
-
-  // Set a default focus handler if needed
-  if (!removePreviousHandler)
-    setFocusHandler(handleFocus => {
-      if (!isServer && window?.addEventListener) {
-        // Listen to visibillitychange and focus
-        window.addEventListener('visibilitychange', handleFocus, false)
-        window.addEventListener('focus', handleFocus, false)
-
-        return () => {
-          // Be sure to unsubscribe if a new handler is set
-          window.removeEventListener('visibilitychange', handleFocus)
-          window.removeEventListener('focus', handleFocus)
-        }
-      }
-    })
-}
diff --git a/src/core/focusManager.ts b/src/core/focusManager.ts
new file mode 100644
index 0000000000..01c1d36586
--- /dev/null
+++ b/src/core/focusManager.ts
@@ -0,0 +1,68 @@
+import { isServer } from './utils'
+
+type FocusListener = () => void
+
+class FocusManager {
+  private listeners: FocusListener[]
+  private removeHandler?: () => void
+
+  constructor() {
+    this.listeners = []
+  }
+
+  subscribe(listener: FocusListener): () => void {
+    if (!this.removeHandler) {
+      this.setDefaultHandler()
+    }
+
+    this.listeners.push(listener)
+
+    return () => {
+      this.listeners = this.listeners.filter(x => x === listener)
+    }
+  }
+
+  setHandler(init: (onFocus: () => void) => () => void): void {
+    if (this.removeHandler) {
+      this.removeHandler()
+    }
+    this.removeHandler = init(() => {
+      this.onFocus()
+    })
+  }
+
+  onFocus(): void {
+    this.listeners.forEach(listener => {
+      listener()
+    })
+  }
+
+  isFocused(): boolean {
+    // document global can be unavailable in react native
+    if (typeof document === 'undefined') {
+      return true
+    }
+
+    return [undefined, 'visible', 'prerender'].includes(
+      document.visibilityState
+    )
+  }
+
+  private setDefaultHandler() {
+    if (!isServer && window?.addEventListener) {
+      this.setHandler(onFocus => {
+        // Listen to visibillitychange and focus
+        window.addEventListener('visibilitychange', onFocus, false)
+        window.addEventListener('focus', onFocus, false)
+
+        return () => {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('visibilitychange', onFocus)
+          window.removeEventListener('focus', onFocus)
+        }
+      })
+    }
+  }
+}
+
+export const focusManager = new FocusManager()
diff --git a/src/core/index.ts b/src/core/index.ts
index a5af8b966c..347f27cb85 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -1,9 +1,13 @@
 export { QueryCache } from './queryCache'
 export { QueryClient } from './queryClient'
-export { setBatchNotifyFn, setNotifyFn } from './notifyManager'
+export { QueryObserver } from './queryObserver'
+export { QueriesObserver } from './queriesObserver'
+export { MutationCache } from './mutationCache'
+export { MutationObserver } from './mutationObserver'
 export { setLogger } from './logger'
-export { setFocusHandler } from './focusHandler'
-export { setOnlineHandler } from './onlineHandler'
+export { notifyManager } from './notifyManager'
+export { focusManager } from './focusManager'
+export { onlineManager } from './onlineManager'
 export { hashQueryKey, isCancelledError, isError } from './utils'
 
 // Types
diff --git a/src/core/mutation.ts b/src/core/mutation.ts
new file mode 100644
index 0000000000..6087ebe4eb
--- /dev/null
+++ b/src/core/mutation.ts
@@ -0,0 +1,298 @@
+import type { MutationOptions, MutationStatus } from './types'
+import type { MutationCache } from './mutationCache'
+import type { MutationObserver } from './mutationObserver'
+import { getLogger } from './logger'
+import { notifyManager } from './notifyManager'
+import { Retryer } from './retryer'
+
+// TYPES
+
+interface MutationConfig<TData, TError, TVariables, TContext> {
+  mutationId: number
+  mutationCache: MutationCache
+  options: MutationOptions<TData, TError, TVariables, TContext>
+  defaultOptions?: MutationOptions<TData, TError, TVariables, TContext>
+  state?: MutationState<TData, TError, TVariables, TContext>
+}
+
+export interface MutationState<TData, TError, TVariables, TContext> {
+  context: TContext | undefined
+  data: TData | undefined
+  error: TError | null
+  failureCount: number
+  isPaused: boolean
+  status: MutationStatus
+  variables: TVariables | undefined
+}
+
+interface FailedAction {
+  type: 'failed'
+}
+
+interface LoadingAction<TVariables, TContext> {
+  type: 'loading'
+  variables?: TVariables
+  context?: TContext
+}
+
+interface SuccessAction<TData> {
+  type: 'success'
+  data: TData
+}
+
+interface ErrorAction<TError> {
+  type: 'error'
+  error: TError
+}
+
+interface PauseAction {
+  type: 'pause'
+}
+
+interface ContinueAction {
+  type: 'continue'
+}
+
+interface SetStateAction<TData, TError, TVariables, TContext> {
+  type: 'setState'
+  state: MutationState<TData, TError, TVariables, TContext>
+}
+
+type Action<TData, TError, TVariables, TContext> =
+  | ContinueAction
+  | ErrorAction<TError>
+  | FailedAction
+  | LoadingAction<TVariables, TContext>
+  | PauseAction
+  | SetStateAction<TData, TError, TVariables, TContext>
+  | SuccessAction<TData>
+
+// CLASS
+
+export class Mutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> {
+  state: MutationState<TData, TError, TVariables, TContext>
+  options: MutationOptions<TData, TError, TVariables, TContext>
+  mutationId: number
+
+  private observers: MutationObserver<TData, TError, TVariables, TContext>[]
+  private mutationCache: MutationCache
+  private retryer?: Retryer<TData, TError>
+
+  constructor(config: MutationConfig<TData, TError, TVariables, TContext>) {
+    this.options = {
+      ...config.defaultOptions,
+      ...config.options,
+    }
+    this.mutationId = config.mutationId
+    this.mutationCache = config.mutationCache
+    this.observers = []
+    this.state = config.state || getDefaultState()
+  }
+
+  setState(state: MutationState<TData, TError, TVariables, TContext>): void {
+    this.dispatch({ type: 'setState', state })
+  }
+
+  addObserver(observer: MutationObserver<any, any, any, any>): void {
+    if (this.observers.indexOf(observer) === -1) {
+      this.observers.push(observer)
+    }
+  }
+
+  removeObserver(observer: MutationObserver<any, any, any, any>): void {
+    this.observers = this.observers.filter(x => x !== observer)
+  }
+
+  continue(): Promise<TData> {
+    if (this.retryer) {
+      this.retryer.continue()
+      return this.retryer.promise
+    }
+    return this.execute()
+  }
+
+  execute(): Promise<TData> {
+    let data: TData
+
+    const restored = this.state.status === 'loading'
+
+    let promise = Promise.resolve()
+
+    if (!restored) {
+      this.dispatch({ type: 'loading', variables: this.options.variables! })
+      promise = promise
+        .then(() => this.options.onMutate?.(this.state.variables!))
+        .then(context => {
+          if (context !== this.state.context) {
+            this.dispatch({
+              type: 'loading',
+              context,
+              variables: this.state.variables,
+            })
+          }
+        })
+    }
+
+    return promise
+      .then(() => this.executeMutation())
+      .then(result => {
+        data = result
+      })
+      .then(() =>
+        this.options.onSuccess?.(
+          data,
+          this.state.variables!,
+          this.state.context
+        )
+      )
+      .then(() =>
+        this.options.onSettled?.(
+          data,
+          null,
+          this.state.variables!,
+          this.state.context
+        )
+      )
+      .then(() => {
+        this.dispatch({ type: 'success', data })
+        return data
+      })
+      .catch(error => {
+        getLogger().error(error)
+        return Promise.resolve()
+          .then(() =>
+            this.options.onError?.(
+              error,
+              this.state.variables!,
+              this.state.context
+            )
+          )
+          .then(() =>
+            this.options.onSettled?.(
+              undefined,
+              error,
+              this.state.variables!,
+              this.state.context
+            )
+          )
+          .then(() => {
+            this.dispatch({ type: 'error', error })
+            throw error
+          })
+      })
+  }
+
+  private executeMutation(): Promise<TData> {
+    this.retryer = new Retryer({
+      fn: () => {
+        if (!this.options.mutationFn) {
+          return Promise.reject('No mutationFn found')
+        }
+        return this.options.mutationFn(this.state.variables!)
+      },
+      onFail: () => {
+        this.dispatch({ type: 'failed' })
+      },
+      onPause: () => {
+        this.dispatch({ type: 'pause' })
+      },
+      onContinue: () => {
+        this.dispatch({ type: 'continue' })
+      },
+      retry: this.options.retry ?? 0,
+      retryDelay: this.options.retryDelay,
+    })
+
+    return this.retryer.promise
+  }
+
+  private dispatch(action: Action<TData, TError, TVariables, TContext>): void {
+    this.state = reducer(this.state, action)
+
+    notifyManager.batch(() => {
+      this.observers.forEach(observer => {
+        observer.onMutationUpdate()
+      })
+      this.mutationCache.notify(this)
+    })
+  }
+}
+
+export function getDefaultState<
+  TData,
+  TError,
+  TVariables,
+  TContext
+>(): MutationState<TData, TError, TVariables, TContext> {
+  return {
+    context: undefined,
+    data: undefined,
+    error: null,
+    failureCount: 0,
+    isPaused: false,
+    status: 'idle',
+    variables: undefined,
+  }
+}
+
+function reducer<TData, TError, TVariables, TContext>(
+  state: MutationState<TData, TError, TVariables, TContext>,
+  action: Action<TData, TError, TVariables, TContext>
+): MutationState<TData, TError, TVariables, TContext> {
+  switch (action.type) {
+    case 'failed':
+      return {
+        ...state,
+        failureCount: state.failureCount + 1,
+      }
+    case 'pause':
+      return {
+        ...state,
+        isPaused: true,
+      }
+    case 'continue':
+      return {
+        ...state,
+        isPaused: false,
+      }
+    case 'loading':
+      return {
+        ...state,
+        context: action.context,
+        data: undefined,
+        error: null,
+        isPaused: false,
+        status: 'loading',
+        variables: action.variables,
+      }
+    case 'success':
+      return {
+        ...state,
+        data: action.data,
+        error: null,
+        status: 'success',
+        isPaused: false,
+      }
+    case 'error':
+      return {
+        ...state,
+        data: undefined,
+        error: action.error,
+        failureCount: state.failureCount + 1,
+        isPaused: false,
+        status: 'error',
+      }
+    case 'setState':
+      return {
+        ...state,
+        ...action.state,
+      }
+    default:
+      return state
+  }
+}
diff --git a/src/core/mutationCache.ts b/src/core/mutationCache.ts
new file mode 100644
index 0000000000..78108d59b3
--- /dev/null
+++ b/src/core/mutationCache.ts
@@ -0,0 +1,101 @@
+import type { MutationOptions } from './types'
+import type { QueryClient } from './queryClient'
+import { notifyManager } from './notifyManager'
+import { Mutation, MutationState } from './mutation'
+import { noop } from './utils'
+
+// TYPES
+
+type MutationCacheListener = (mutation?: Mutation) => void
+
+// CLASS
+
+export class MutationCache {
+  private listeners: MutationCacheListener[]
+  private mutations: Mutation<any, any, any, any>[]
+  private mutationId: number
+
+  constructor() {
+    this.listeners = []
+    this.mutations = []
+    this.mutationId = 0
+  }
+
+  build<TData, TError, TVariables, TContext>(
+    client: QueryClient,
+    options: MutationOptions<TData, TError, TVariables, TContext>,
+    state?: MutationState<TData, TError, TVariables, TContext>
+  ): Mutation<TData, TError, TVariables, TContext> {
+    const mutation = new Mutation({
+      mutationCache: this,
+      mutationId: ++this.mutationId,
+      options: client.defaultMutationOptions(options),
+      state,
+      defaultOptions: options.mutationKey
+        ? client.getMutationDefaults(options.mutationKey)
+        : undefined,
+    })
+
+    this.add(mutation)
+
+    return mutation
+  }
+
+  add(mutation: Mutation<any, any, any, any>): void {
+    this.mutations.push(mutation)
+    this.notify(mutation)
+  }
+
+  remove(mutation: Mutation<any, any, any, any>): void {
+    this.mutations = this.mutations.filter(x => x !== mutation)
+    this.notify(mutation)
+  }
+
+  clear(): void {
+    notifyManager.batch(() => {
+      this.mutations.forEach(mutation => {
+        this.remove(mutation)
+      })
+    })
+  }
+
+  getAll(): Mutation[] {
+    return this.mutations
+  }
+
+  subscribe(listener: MutationCacheListener): () => void {
+    this.listeners.push(listener)
+    return () => {
+      this.listeners = this.listeners.filter(x => x !== listener)
+    }
+  }
+
+  notify(mutation?: Mutation<any, any, any, any>) {
+    notifyManager.batch(() => {
+      this.listeners.forEach(listener => {
+        notifyManager.schedule(() => {
+          listener(mutation)
+        })
+      })
+    })
+  }
+
+  onFocus(): void {
+    this.continueMutations()
+  }
+
+  onOnline(): void {
+    this.continueMutations()
+  }
+
+  continueMutations(): Promise<void> {
+    const pausedMutations = this.mutations.filter(x => x.state.isPaused)
+    return notifyManager.batch(() =>
+      pausedMutations.reduce(
+        (promise, mutation) =>
+          promise.then(() => mutation.continue().catch(noop)),
+        Promise.resolve()
+      )
+    )
+  }
+}
diff --git a/src/core/mutationObserver.ts b/src/core/mutationObserver.ts
new file mode 100644
index 0000000000..5e01cdd81d
--- /dev/null
+++ b/src/core/mutationObserver.ts
@@ -0,0 +1,145 @@
+import { getDefaultState, Mutation } from './mutation'
+import { notifyManager } from './notifyManager'
+import type { QueryClient } from './queryClient'
+import type {
+  MutateOptions,
+  MutationObserverResult,
+  MutationObserverOptions,
+} from './types'
+import { getStatusProps } from './utils'
+
+// TYPES
+
+type MutationObserverListener<TData, TError, TVariables, TContext> = (
+  result: MutationObserverResult<TData, TError, TVariables, TContext>
+) => void
+
+// CLASS
+
+export class MutationObserver<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> {
+  options!: MutationObserverOptions<TData, TError, TVariables, TContext>
+
+  private client: QueryClient
+  private currentResult!: MutationObserverResult<
+    TData,
+    TError,
+    TVariables,
+    TContext
+  >
+  private currentMutation?: Mutation<TData, TError, TVariables, TContext>
+  private listeners: MutationObserverListener<
+    TData,
+    TError,
+    TVariables,
+    TContext
+  >[]
+
+  constructor(
+    client: QueryClient,
+    options: MutationObserverOptions<TData, TError, TVariables, TContext>
+  ) {
+    this.client = client
+    this.listeners = []
+    this.setOptions(options)
+
+    // Bind exposed methods
+    this.mutate = this.mutate.bind(this)
+    this.reset = this.reset.bind(this)
+
+    // Update result
+    this.updateResult()
+  }
+
+  setOptions(
+    options?: MutationObserverOptions<TData, TError, TVariables, TContext>
+  ) {
+    this.options = this.client.defaultMutationOptions(options)
+  }
+
+  subscribe(
+    listener?: MutationObserverListener<TData, TError, TVariables, TContext>
+  ): () => void {
+    const callback = listener || (() => undefined)
+    this.listeners.push(callback)
+    return () => {
+      this.unsubscribe(callback)
+    }
+  }
+
+  private unsubscribe(
+    listener: MutationObserverListener<TData, TError, TVariables, TContext>
+  ): void {
+    this.listeners = this.listeners.filter(x => x !== listener)
+    if (!this.listeners.length) {
+      this.currentMutation?.removeObserver(this)
+    }
+  }
+
+  onMutationUpdate(): void {
+    this.updateResult()
+    this.notify()
+  }
+
+  getCurrentResult(): MutationObserverResult<
+    TData,
+    TError,
+    TVariables,
+    TContext
+  > {
+    return this.currentResult
+  }
+
+  reset(): void {
+    this.currentMutation = undefined
+    this.updateResult()
+    this.notify()
+  }
+
+  mutate(
+    variables?: TVariables,
+    options?: MutateOptions<TData, TError, TVariables, TContext>
+  ): Promise<TData> {
+    if (this.currentMutation) {
+      this.currentMutation.removeObserver(this)
+    }
+
+    this.currentMutation = this.client.getMutationCache().build(this.client, {
+      ...this.options,
+      ...options,
+      variables: variables ?? this.options.variables,
+    })
+
+    this.currentMutation.addObserver(this)
+
+    return this.currentMutation.execute()
+  }
+
+  private updateResult(): void {
+    const state = this.currentMutation
+      ? this.currentMutation.state
+      : getDefaultState<TData, TError, TVariables, TContext>()
+
+    this.currentResult = {
+      ...state,
+      ...getStatusProps(state.status),
+      mutate: this.mutate,
+      reset: this.reset,
+    }
+  }
+
+  private notify() {
+    const { currentResult } = this
+    notifyManager.batch(() => {
+      this.listeners.forEach(listener => {
+        notifyManager.schedule(() => {
+          listener(currentResult)
+        })
+      })
+    })
+  }
+}
diff --git a/src/core/notifyManager.ts b/src/core/notifyManager.ts
index b0ffad1698..1dea2b1508 100644
--- a/src/core/notifyManager.ts
+++ b/src/core/notifyManager.ts
@@ -8,43 +8,25 @@ type NotifyFunction = (callback: () => void) => void
 
 type BatchNotifyFunction = (callback: () => void) => void
 
-// GETTERS AND SETTERS
-
-// Default to a dummy "notify" implementation that just runs the callback
-let notifyFn: NotifyFunction = (callback: () => void) => {
-  callback()
-}
-
-// Default to a dummy "batch notify" implementation that just runs the callback
-let batchNotifyFn: BatchNotifyFunction = (callback: () => void) => {
-  callback()
-}
-
-/**
- * Use this function to set a custom notify function.
- * This can be used to for example wrap notifications with `React.act` while running tests.
- */
-export function setNotifyFn(fn: NotifyFunction) {
-  notifyFn = fn
-}
-
-/**
- * Use this function to set a custom function to batch notifications together into a single tick.
- * By default React Query will use the batch function provided by ReactDOM or React Native.
- */
-export function setBatchNotifyFn(fn: BatchNotifyFunction) {
-  batchNotifyFn = fn
-}
-
 // CLASS
 
 class NotifyManager {
   private queue: NotifyCallback[]
   private transactions: number
+  private notifyFn: NotifyFunction
+  private batchNotifyFn: BatchNotifyFunction
 
   constructor() {
     this.queue = []
     this.transactions = 0
+
+    this.notifyFn = (callback: () => void) => {
+      callback()
+    }
+
+    this.batchNotifyFn = (callback: () => void) => {
+      callback()
+    }
   }
 
   batch<T>(callback: () => T): T {
@@ -62,7 +44,7 @@ class NotifyManager {
       this.queue.push(callback)
     } else {
       scheduleMicrotask(() => {
-        notifyFn(callback)
+        this.notifyFn(callback)
       })
     }
   }
@@ -72,14 +54,30 @@ class NotifyManager {
     this.queue = []
     if (queue.length) {
       scheduleMicrotask(() => {
-        batchNotifyFn(() => {
+        this.batchNotifyFn(() => {
           queue.forEach(callback => {
-            notifyFn(callback)
+            this.notifyFn(callback)
           })
         })
       })
     }
   }
+
+  /**
+   * Use this method to set a custom notify function.
+   * This can be used to for example wrap notifications with `React.act` while running tests.
+   */
+  setNotifyFunction(fn: NotifyFunction) {
+    this.notifyFn = fn
+  }
+
+  /**
+   * Use this method to set a custom function to batch notifications together into a single tick.
+   * By default React Query will use the batch function provided by ReactDOM or React Native.
+   */
+  setBatchNotifyFunction(fn: BatchNotifyFunction) {
+    this.batchNotifyFn = fn
+  }
 }
 
 // SINGLETON
diff --git a/src/core/onlineHandler.ts b/src/core/onlineHandler.ts
deleted file mode 100644
index 76b930d11d..0000000000
--- a/src/core/onlineHandler.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { isServer, noop } from './utils'
-
-let onlineCallback: () => void = noop
-let removePreviousHandler: (() => void) | void
-
-export function setOnlineHandler(callback: (handler: () => void) => void) {
-  if (removePreviousHandler) {
-    removePreviousHandler()
-  }
-  removePreviousHandler = callback(() => {
-    onlineCallback()
-  })
-}
-
-export function initOnlineHandler(callback: () => void) {
-  // Set the callback to execute on online
-  onlineCallback = callback
-
-  // Set a default focus handler if needed
-  if (!removePreviousHandler) {
-    setOnlineHandler(handleOnline => {
-      if (!isServer && window?.addEventListener) {
-        // Listen to online
-        window.addEventListener('online', handleOnline, false)
-
-        return () => {
-          // Be sure to unsubscribe if a new handler is set
-          window.removeEventListener('online', handleOnline)
-        }
-      }
-    })
-  }
-}
diff --git a/src/core/onlineManager.ts b/src/core/onlineManager.ts
new file mode 100644
index 0000000000..4a7e299f26
--- /dev/null
+++ b/src/core/onlineManager.ts
@@ -0,0 +1,59 @@
+import { isServer } from './utils'
+
+type OnlineListener = () => void
+
+class OnlineManager {
+  private listeners: OnlineListener[]
+  private removeHandler?: () => void
+
+  constructor() {
+    this.listeners = []
+  }
+
+  subscribe(listener: OnlineListener): () => void {
+    if (!this.removeHandler) {
+      this.setDefaultHandler()
+    }
+
+    this.listeners.push(listener)
+
+    return () => {
+      this.listeners = this.listeners.filter(x => x === listener)
+    }
+  }
+
+  setOnlineHandler(init: (onOnline: () => void) => () => void): void {
+    if (this.removeHandler) {
+      this.removeHandler()
+    }
+    this.removeHandler = init(() => {
+      this.onOnline()
+    })
+  }
+
+  onOnline(): void {
+    this.listeners.forEach(listener => {
+      listener()
+    })
+  }
+
+  isOnline(): boolean {
+    return navigator.onLine === undefined || navigator.onLine
+  }
+
+  private setDefaultHandler() {
+    if (!isServer && window?.addEventListener) {
+      this.setOnlineHandler(onOnline => {
+        // Listen to online
+        window.addEventListener('online', onOnline, false)
+
+        return () => {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('online', onOnline)
+        }
+      })
+    }
+  }
+}
+
+export const onlineManager = new OnlineManager()
diff --git a/src/core/queriesObserver.ts b/src/core/queriesObserver.ts
index 761fd67dfe..2070a2436d 100644
--- a/src/core/queriesObserver.ts
+++ b/src/core/queriesObserver.ts
@@ -2,12 +2,7 @@ import { difference, getQueryKeyHashFn, replaceAt } from './utils'
 import { notifyManager } from './notifyManager'
 import type { QueryObserverOptions, QueryObserverResult } from './types'
 import type { QueryClient } from './queryClient'
-import type { QueryObserver } from './queryObserver'
-
-interface QueriesObserverConfig {
-  client: QueryClient
-  queries?: QueryObserverOptions[]
-}
+import { QueryObserver } from './queryObserver'
 
 type QueriesObserverListener = (result: QueryObserverResult[]) => void
 
@@ -18,9 +13,9 @@ export class QueriesObserver {
   private observers: QueryObserver[]
   private listeners: QueriesObserverListener[]
 
-  constructor(config: QueriesObserverConfig) {
-    this.client = config.client
-    this.queries = config.queries || []
+  constructor(client: QueryClient, queries?: QueryObserverOptions[]) {
+    this.client = client
+    this.queries = queries || []
     this.result = []
     this.observers = []
     this.listeners = []
@@ -96,7 +91,7 @@ export class QueriesObserver {
         return observer
       }
 
-      return this.client.watchQuery(defaultedOptions)
+      return new QueryObserver(this.client, defaultedOptions)
     })
 
     if (prevObservers.length === newObservers.length && !hasIndexChange) {
diff --git a/src/core/query.ts b/src/core/query.ts
index 2b5d26ea94..b67a0a4e8a 100644
--- a/src/core/query.ts
+++ b/src/core/query.ts
@@ -1,17 +1,12 @@
 import {
   CancelOptions,
-  CancelledError,
   Updater,
-  defaultRetryDelay,
   ensureArray,
   functionalUpdate,
-  isCancelable,
   isCancelledError,
   isValidTimeout,
-  isVisibleAndOnline,
   noop,
   replaceEqualDeep,
-  sleep,
   timeUntilStale,
 } from './utils'
 import type {
@@ -25,6 +20,7 @@ import type { QueryCache } from './queryCache'
 import type { QueryObserver } from './queryObserver'
 import { notifyManager } from './notifyManager'
 import { getLogger } from './logger'
+import { Retryer } from './retryer'
 
 // TYPES
 
@@ -33,9 +29,11 @@ interface QueryConfig<TData, TError, TQueryFnData> {
   queryKey: QueryKey
   queryHash: string
   options?: QueryOptions<TData, TError, TQueryFnData>
+  defaultOptions?: QueryOptions<TData, TError, TQueryFnData>
+  state?: QueryState<TData, TError>
 }
 
-export interface QueryState<TData, TError> {
+export interface QueryState<TData = unknown, TError = unknown> {
   data: TData | undefined
   dataUpdateCount: number
   error: TError | null
@@ -47,6 +45,7 @@ export interface QueryState<TData, TError> {
   isFetchingNextPage: boolean
   isFetchingPreviousPage: boolean
   isInvalidated: boolean
+  isPaused: boolean
   pageParams: unknown[] | undefined
   status: QueryStatus
   updatedAt: number
@@ -95,11 +94,27 @@ interface InvalidateAction {
   type: 'invalidate'
 }
 
+interface PauseAction {
+  type: 'pause'
+}
+
+interface ContinueAction {
+  type: 'continue'
+}
+
+interface SetStateAction<TData, TError> {
+  type: 'setState'
+  state: QueryState<TData, TError>
+}
+
 export type Action<TData, TError> =
+  | ContinueAction
   | ErrorAction<TError>
   | FailedAction
   | FetchAction
   | InvalidateAction
+  | PauseAction
+  | SetStateAction<TData, TError>
   | SuccessAction<TData>
 
 // CLASS
@@ -114,19 +129,18 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
   private cache: QueryCache
   private promise?: Promise<TData>
   private gcTimeout?: number
-  private cancelFetch?: (options?: CancelOptions) => void
-  private continueFetch?: () => void
-  private isTransportCancelable?: boolean
+  private retryer?: Retryer<unknown, TError>
   private observers: QueryObserver<any, any, any, any>[]
   private defaultOptions?: QueryOptions<TData, TError, TQueryFnData>
 
   constructor(config: QueryConfig<TData, TError, TQueryFnData>) {
+    this.defaultOptions = config.defaultOptions
     this.setOptions(config.options)
     this.observers = []
     this.cache = config.cache
     this.queryKey = config.queryKey
     this.queryHash = config.queryHash
-    this.state = getDefaultState(this.options)
+    this.state = config.state || getDefaultState(this.options)
     this.scheduleGc()
   }
 
@@ -170,7 +184,7 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
 
   cancel(options?: CancelOptions): Promise<void> {
     const promise = this.promise
-    this.cancelFetch?.(options)
+    this.retryer?.cancel(options)
     return promise ? promise.then(noop).catch(noop) : Promise.resolve()
   }
 
@@ -211,6 +225,10 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     return data
   }
 
+  setState(state: QueryState<TData, TError>): void {
+    this.dispatch({ type: 'setState', state })
+  }
+
   remove(): void {
     this.cache.remove(this)
   }
@@ -279,10 +297,10 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     }
 
     // Continue fetch if currently paused
-    this.continueFetch?.()
+    this.retryer?.continue()
   }
 
-  subscribeObserver(observer: QueryObserver<any, any, any, any>): void {
+  addObserver(observer: QueryObserver<any, any, any, any>): void {
     if (this.observers.indexOf(observer) === -1) {
       this.observers.push(observer)
 
@@ -293,15 +311,15 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     }
   }
 
-  unsubscribeObserver(observer: QueryObserver<any, any, any, any>): void {
+  removeObserver(observer: QueryObserver<any, any, any, any>): void {
     if (this.observers.indexOf(observer) !== -1) {
       this.observers = this.observers.filter(x => x !== observer)
 
       if (!this.observers.length) {
         // If the transport layer does not support cancellation
         // we'll let the query continue so the result can be cached
-        if (this.isTransportCancelable) {
-          this.cancel()
+        if (this.retryer && this.retryer.isTransportCancelable) {
+          this.retryer.cancel()
         }
 
         this.scheduleGc()
@@ -388,8 +406,8 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     }
 
     // Try to fetch the data
-    return this.tryFetchData(options, fetchData).then(data =>
-      this.setData(data)
+    return this.executeFetch(options, fetchData).then(data =>
+      this.setData(data as TData)
     )
   }
 
@@ -486,8 +504,8 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     }
 
     // Try to get the data
-    return this.tryFetchData(options, fetchData).then(data =>
-      this.setData(data, { pageParams: newPageParams })
+    return this.executeFetch(options, fetchData).then(data =>
+      this.setData(data as TData, { pageParams: newPageParams })
     )
   }
 
@@ -497,118 +515,29 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
   ): Promise<TQueryFnData> {
     return options.queryFn
       ? Promise.resolve(options.queryFn(...params))
-      : Promise.reject()
+      : Promise.reject('No queryFn found')
   }
 
-  private tryFetchData(
+  private executeFetch(
     options: QueryOptions<TData, TError, TQueryFnData>,
-    fn: QueryFunction
-  ): Promise<TData> {
-    return new Promise<TData>((outerResolve, outerReject) => {
-      let resolved = false
-
-      const done = () => {
-        if (!resolved) {
-          resolved = true
-
-          // End loop if currently paused
-          this.continueFetch?.()
-
-          // Cleanup
-          delete this.cancelFetch
-          delete this.continueFetch
-          delete this.isTransportCancelable
-        }
-      }
-
-      const resolve = (value: any) => {
-        done()
-        outerResolve(value)
-      }
-
-      const reject = (value: any) => {
-        done()
-        outerReject(value)
-      }
-
-      // Create loop function
-      const run = () => {
-        // Do nothing if already resolved
-        if (resolved) {
-          return
-        }
-
-        let promiseOrValue: any
-
-        // Execute query
-        try {
-          promiseOrValue = fn()
-        } catch (error) {
-          promiseOrValue = Promise.reject(error)
-        }
-
-        // Check if the transport layer support cancellation
-        this.isTransportCancelable = isCancelable(promiseOrValue)
-
-        // Create callback to cancel this fetch
-        this.cancelFetch = cancelOptions => {
-          reject(new CancelledError(cancelOptions))
-
-          // Cancel transport if supported
-          if (isCancelable(promiseOrValue)) {
-            try {
-              promiseOrValue.cancel()
-            } catch {}
-          }
-        }
-
-        Promise.resolve(promiseOrValue)
-          .then(resolve)
-          .catch(error => {
-            // Stop if the fetch is already resolved
-            if (resolved) {
-              return
-            }
-
-            // Do we need to retry the request?
-            const { failureCount } = this.state
-            const retry = options.retry ?? 3
-            const retryDelay = options.retryDelay ?? defaultRetryDelay
-
-            const shouldRetry =
-              retry === true ||
-              (typeof retry === 'number' && failureCount < retry) ||
-              (typeof retry === 'function' && retry(failureCount, error))
-
-            if (!shouldRetry) {
-              // We are done if the query does not need to be retried
-              reject(error)
-              return
-            }
-
-            // Increase the failureCount
-            this.dispatch({ type: 'failed' })
-
-            // Delay
-            sleep(functionalUpdate(retryDelay, failureCount) || 0)
-              // Pause if needed
-              .then(() => {
-                // Pause retry if the document is not visible or when the device is offline
-                if (!isVisibleAndOnline()) {
-                  return new Promise(continueResolve => {
-                    // Create callback to continue this fetch
-                    this.continueFetch = continueResolve
-                  })
-                }
-              })
-              // Try again
-              .then(run)
-          })
-      }
-
-      // Start loop
-      run()
+    queryFn: QueryFunction
+  ): Promise<unknown> {
+    this.retryer = new Retryer({
+      fn: queryFn,
+      onFail: () => {
+        this.dispatch({ type: 'failed' })
+      },
+      onPause: () => {
+        this.dispatch({ type: 'pause' })
+      },
+      onContinue: () => {
+        this.dispatch({ type: 'continue' })
+      },
+      retry: options.retry,
+      retryDelay: options.retryDelay,
     })
+
+    return this.retryer.promise
   }
 }
 
@@ -674,6 +603,7 @@ function getDefaultState<TData, TError, TQueryFnData>(
     isFetchingNextPage: false,
     isFetchingPreviousPage: false,
     isInvalidated: false,
+    isPaused: false,
     pageParams: undefined,
     status: hasData ? 'success' : 'idle',
     updatedAt: hasData ? Date.now() : 0,
@@ -690,6 +620,16 @@ function reducer<TData, TError>(
         ...state,
         failureCount: state.failureCount + 1,
       }
+    case 'pause':
+      return {
+        ...state,
+        isPaused: true,
+      }
+    case 'continue':
+      return {
+        ...state,
+        isPaused: false,
+      }
     case 'fetch':
       return {
         ...state,
@@ -697,6 +637,7 @@ function reducer<TData, TError>(
         isFetching: true,
         isFetchingNextPage: action.isFetchingNextPage || false,
         isFetchingPreviousPage: action.isFetchingPreviousPage || false,
+        isPaused: false,
         status: state.updatedAt ? 'success' : 'loading',
       }
     case 'success':
@@ -713,6 +654,7 @@ function reducer<TData, TError>(
         isFetchingNextPage: false,
         isFetchingPreviousPage: false,
         isInvalidated: false,
+        isPaused: false,
         status: 'success',
         updatedAt: action.updatedAt ?? Date.now(),
       }
@@ -726,6 +668,7 @@ function reducer<TData, TError>(
           isFetching: false,
           isFetchingNextPage: false,
           isFetchingPreviousPage: false,
+          isPaused: false,
           status: state.error ? 'error' : state.updatedAt ? 'success' : 'idle',
         }
       }
@@ -738,6 +681,7 @@ function reducer<TData, TError>(
         isFetching: false,
         isFetchingNextPage: false,
         isFetchingPreviousPage: false,
+        isPaused: false,
         status: 'error',
       }
     case 'invalidate':
@@ -745,6 +689,11 @@ function reducer<TData, TError>(
         ...state,
         isInvalidated: true,
       }
+    case 'setState':
+      return {
+        ...state,
+        ...action.state,
+      }
     default:
       return state
   }
diff --git a/src/core/queryCache.ts b/src/core/queryCache.ts
index 845d85e44f..ad0f07aae5 100644
--- a/src/core/queryCache.ts
+++ b/src/core/queryCache.ts
@@ -4,9 +4,10 @@ import {
   matchQuery,
   parseFilterArgs,
 } from './utils'
-import { Query } from './query'
+import { Query, QueryState } from './query'
 import type { QueryKey, QueryOptions } from './types'
 import { notifyManager } from './notifyManager'
+import type { QueryClient } from './queryClient'
 
 // TYPES
 
@@ -30,7 +31,9 @@ export class QueryCache {
   }
 
   build<TData, TError, TQueryFnData>(
-    options: QueryOptions<TData, TError, TQueryFnData>
+    client: QueryClient,
+    options: QueryOptions<TData, TError, TQueryFnData>,
+    state?: QueryState<TData, TError>
   ): Query<TData, TError, TQueryFnData> {
     const hashFn = getQueryKeyHashFn(options)
     const queryKey = options.queryKey!
@@ -42,7 +45,9 @@ export class QueryCache {
         cache: this,
         queryKey,
         queryHash,
-        options,
+        options: client.defaultQueryOptions(options),
+        state,
+        defaultOptions: client.getQueryDefaults(queryKey),
       })
       this.add(query)
     }
@@ -98,7 +103,7 @@ export class QueryCache {
   findAll(arg1?: QueryKey | QueryFilters, arg2?: QueryFilters): Query[]
   findAll(arg1?: QueryKey | QueryFilters, arg2?: QueryFilters): Query[] {
     const [filters] = parseFilterArgs(arg1, arg2)
-    return filters && Object.keys(filters).length > 0
+    return filters
       ? this.queries.filter(query => matchQuery(filters, query))
       : this.queries
   }
@@ -119,4 +124,20 @@ export class QueryCache {
       })
     })
   }
+
+  onFocus(): void {
+    notifyManager.batch(() => {
+      this.queries.forEach(query => {
+        query.onFocus()
+      })
+    })
+  }
+
+  onOnline(): void {
+    notifyManager.batch(() => {
+      this.queries.forEach(query => {
+        query.onOnline()
+      })
+    })
+  }
 }
diff --git a/src/core/queryClient.ts b/src/core/queryClient.ts
index 621791ba46..6bc580aa78 100644
--- a/src/core/queryClient.ts
+++ b/src/core/queryClient.ts
@@ -2,17 +2,17 @@ import {
   CancelOptions,
   QueryFilters,
   Updater,
-  isVisibleAndOnline,
   noop,
   parseFilterArgs,
   parseQueryArgs,
-  uniq,
+  partialMatchKey,
 } from './utils'
 import type {
   DefaultOptions,
   FetchQueryOptions,
   InvalidateOptions,
   InvalidateQueryFilters,
+  MutationKey,
   MutationOptions,
   QueryFunction,
   QueryKey,
@@ -20,51 +20,68 @@ import type {
   QueryOptions,
   RefetchOptions,
 } from './types'
-import type { Query, QueryState, SetDataOptions } from './query'
+import type { QueryState, SetDataOptions } from './query'
 import type { QueryCache } from './queryCache'
-import { QueriesObserver } from './queriesObserver'
-import { QueryObserver } from './queryObserver'
-import { initFocusHandler } from './focusHandler'
-import { initOnlineHandler } from './onlineHandler'
+import type { MutationCache } from './mutationCache'
+import { focusManager } from './focusManager'
+import { onlineManager } from './onlineManager'
 import { notifyManager } from './notifyManager'
 
 // TYPES
 
 interface QueryClientConfig {
-  cache: QueryCache
+  queryCache: QueryCache
+  mutationCache?: MutationCache
   defaultOptions?: DefaultOptions
 }
 
+interface QueryDefaults {
+  queryKey: QueryKey
+  defaultOptions: QueryOptions<any, any, any>
+}
+
+interface MutationDefaults {
+  mutationKey: MutationKey
+  defaultOptions: MutationOptions<any, any, any, any>
+}
+
 // CLASS
 
 export class QueryClient {
-  private cache: QueryCache
+  private queryCache: QueryCache
+  private mutationCache?: MutationCache
   private defaultOptions: DefaultOptions
+  private queryDefaults: QueryDefaults[]
+  private mutationDefaults: MutationDefaults[]
+  private unsubscribeFocus?: () => void
+  private unsubscribeOnline?: () => void
 
   constructor(config: QueryClientConfig) {
-    this.cache = config.cache
+    this.queryCache = config.queryCache
+    this.mutationCache = config.mutationCache
     this.defaultOptions = config.defaultOptions || {}
-  }
-
-  getDefaultOptions(): DefaultOptions {
-    return this.defaultOptions
-  }
-
-  setDefaultOptions(options: DefaultOptions): void {
-    this.defaultOptions = options
+    this.queryDefaults = []
+    this.mutationDefaults = []
   }
 
   mount(): void {
-    mountedClients.push(this)
-    initFocusHandler(onFocus)
-    initOnlineHandler(onOnline)
+    this.unsubscribeFocus = focusManager.subscribe(() => {
+      if (focusManager.isFocused() && onlineManager.isOnline()) {
+        this.mutationCache?.onFocus()
+        this.queryCache.onFocus()
+      }
+    })
+    this.unsubscribeOnline = onlineManager.subscribe(() => {
+      if (focusManager.isFocused() && onlineManager.isOnline()) {
+        this.mutationCache?.onOnline()
+        this.queryCache.onOnline()
+      }
+    })
   }
 
   unmount(): void {
-    const index = mountedClients.indexOf(this)
-    if (index > -1) {
-      mountedClients.splice(index, 1)
-    }
+    this.unsubscribeFocus?.()
+    this.unsubscribeOnline?.()
   }
 
   isFetching(filters?: QueryFilters): number
@@ -72,38 +89,14 @@ export class QueryClient {
   isFetching(arg1?: QueryKey | QueryFilters, arg2?: QueryFilters): number {
     const [filters] = parseFilterArgs(arg1, arg2)
     filters.fetching = true
-    return this.cache.findAll(filters).length
-  }
-
-  setQueryDefaults<TData = unknown, TError = unknown, TQueryFnData = TData>(
-    options: QueryOptions<TData, TError, TQueryFnData>
-  ): void
-  setQueryDefaults<TData = unknown, TError = unknown, TQueryFnData = TData>(
-    queryKey: QueryKey,
-    options?: QueryOptions<TData, TError, TQueryFnData>
-  ): void
-  setQueryDefaults<TData = unknown, TError = unknown, TQueryFnData = TData>(
-    queryKey: QueryKey,
-    queryFn: QueryFunction<TQueryFnData | TData>,
-    options?: QueryOptions<TData, TError, TQueryFnData>
-  ): void
-  setQueryDefaults<TData, TError, TQueryFnData = TData>(
-    arg1: QueryKey | QueryOptions<TData, TError, TQueryFnData>,
-    arg2?:
-      | QueryFunction<TQueryFnData | TData>
-      | QueryOptions<TData, TError, TQueryFnData>,
-    arg3?: QueryOptions<TData, TError, TQueryFnData>
-  ): void {
-    const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
-    const defaultedOptions = this.defaultQueryOptions(parsedOptions)
-    this.cache.build(defaultedOptions).setDefaultOptions(defaultedOptions)
+    return this.getQueryCache().findAll(filters).length
   }
 
   getQueryData<TData = unknown>(
     queryKey: QueryKey,
     filters?: QueryFilters
   ): TData | undefined {
-    return this.cache.find<TData>(queryKey, filters)?.state.data
+    return this.getQueryCache().find<TData>(queryKey, filters)?.state.data
   }
 
   setQueryData<TData>(
@@ -112,23 +105,26 @@ export class QueryClient {
     options?: SetDataOptions
   ): TData {
     const parsedOptions = parseQueryArgs(queryKey)
-    const defaultedOptions = this.defaultQueryOptions(parsedOptions)
-    return this.cache.build(defaultedOptions).setData(updater, options)
+    return this.getQueryCache()
+      .build(this, parsedOptions)
+      .setData(updater, options)
   }
 
   getQueryState<TData = unknown, TError = undefined>(
     queryKey: QueryKey,
     filters?: QueryFilters
   ): QueryState<TData, TError> | undefined {
-    return this.cache.find<TData, TError>(queryKey, filters)?.state
+    return this.getQueryCache().find<TData, TError>(queryKey, filters)?.state
   }
 
   removeQueries(filters?: QueryFilters): void
   removeQueries(queryKey?: QueryKey, filters?: QueryFilters): void
   removeQueries(arg1?: QueryKey | QueryFilters, arg2?: QueryFilters): void {
+    const [filters] = parseFilterArgs(arg1, arg2)
+    const queryCache = this.getQueryCache()
     notifyManager.batch(() => {
-      this.cache.findAll(arg1, arg2).forEach(query => {
-        this.cache.remove(query)
+      queryCache.findAll(filters).forEach(query => {
+        queryCache.remove(query)
       })
     })
   }
@@ -144,15 +140,16 @@ export class QueryClient {
     arg2?: QueryFilters | CancelOptions,
     arg3?: CancelOptions
   ): Promise<void> {
-    const [filters, options] = parseFilterArgs(arg1, arg2, arg3)
-    const cancelOptions = options || {}
+    const [filters, cancelOptions = {}] = parseFilterArgs(arg1, arg2, arg3)
 
     if (typeof cancelOptions.revert === 'undefined') {
       cancelOptions.revert = true
     }
 
     const promises = notifyManager.batch(() =>
-      this.cache.findAll(filters).map(query => query.cancel(cancelOptions))
+      this.getQueryCache()
+        .findAll(filters)
+        .map(query => query.cancel(cancelOptions))
     )
 
     return Promise.all(promises).then(noop).catch(noop)
@@ -181,9 +178,11 @@ export class QueryClient {
     }
 
     return notifyManager.batch(() => {
-      this.cache.findAll(filters).forEach(query => {
-        query.invalidate()
-      })
+      this.getQueryCache()
+        .findAll(filters)
+        .forEach(query => {
+          query.invalidate()
+        })
       return this.refetchQueries(refetchFilters, options)
     })
   }
@@ -205,7 +204,9 @@ export class QueryClient {
     const [filters, options] = parseFilterArgs(arg1, arg2, arg3)
 
     const promises = notifyManager.batch(() =>
-      this.cache.findAll(filters).map(query => query.fetch())
+      this.getQueryCache()
+        .findAll(filters)
+        .map(query => query.fetch())
     )
 
     let promise = Promise.all(promises).then(noop)
@@ -217,50 +218,6 @@ export class QueryClient {
     return promise
   }
 
-  watchQuery<
-    TData = unknown,
-    TError = unknown,
-    TQueryFnData = TData,
-    TQueryData = TQueryFnData
-  >(
-    options: QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>
-  ): QueryObserver<TData, TError, TQueryFnData, TQueryData>
-  watchQuery<
-    TData = unknown,
-    TError = unknown,
-    TQueryFnData = TData,
-    TQueryData = TQueryFnData
-  >(
-    queryKey: QueryKey,
-    options?: QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>
-  ): QueryObserver<TData, TError, TQueryFnData, TQueryData>
-  watchQuery<
-    TData = unknown,
-    TError = unknown,
-    TQueryFnData = TData,
-    TQueryData = TQueryFnData
-  >(
-    queryKey: QueryKey,
-    queryFn: QueryFunction<TQueryFnData | TData>,
-    options?: QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>
-  ): QueryObserver<TData, TError, TQueryFnData, TQueryData>
-  watchQuery<TData, TError, TQueryFnData = TData, TQueryData = TQueryFnData>(
-    arg1:
-      | QueryKey
-      | QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>,
-    arg2?:
-      | QueryFunction<TQueryFnData | TData>
-      | QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>,
-    arg3?: QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>
-  ): QueryObserver<TData, TError, TQueryFnData, TQueryData> {
-    const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
-    return new QueryObserver({ client: this, options: parsedOptions })
-  }
-
-  watchQueries(queries: QueryObserverOptions[]): QueriesObserver {
-    return new QueriesObserver({ client: this, queries })
-  }
-
   fetchQueryData<TData = unknown, TError = unknown, TQueryFnData = TData>(
     options: FetchQueryOptions<TData, TError, TQueryFnData>
   ): Promise<TData>
@@ -281,25 +238,18 @@ export class QueryClient {
     arg3?: FetchQueryOptions<TData, TError, TQueryFnData>
   ): Promise<TData> {
     const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
+    const defaultedOptions = this.defaultQueryOptions(parsedOptions)
 
     // https://github.com/tannerlinsley/react-query/issues/652
-    if (typeof parsedOptions.retry === 'undefined') {
-      parsedOptions.retry = false
+    if (typeof defaultedOptions.retry === 'undefined') {
+      defaultedOptions.retry = false
     }
 
-    const defaultedOptions = this.defaultQueryOptions(parsedOptions)
+    const query = this.getQueryCache().build(this, defaultedOptions)
 
-    let query = this.cache.find<TData, TError, TQueryFnData>(
-      defaultedOptions.queryKey!
-    )
-
-    if (!query) {
-      query = this.cache.build(defaultedOptions)
-    } else if (!query.isStaleByTime(defaultedOptions.staleTime)) {
-      return Promise.resolve(query.state.data as TData)
-    }
-
-    return query.fetch(defaultedOptions)
+    return query.isStaleByTime(defaultedOptions.staleTime)
+      ? query.fetch(defaultedOptions)
+      : Promise.resolve(query.state.data as TData)
   }
 
   prefetchQuery(options: FetchQueryOptions): Promise<void>
@@ -319,8 +269,77 @@ export class QueryClient {
       .catch(noop)
   }
 
-  getCache(): QueryCache {
-    return this.cache
+  mutate<
+    TData = unknown,
+    TError = unknown,
+    TVariables = void,
+    TContext = unknown
+  >(
+    options: MutationOptions<TData, TError, TVariables, TContext>
+  ): Promise<TData> {
+    return this.getMutationCache().build(this, options).execute()
+  }
+
+  getQueryCache(): QueryCache {
+    return this.queryCache
+  }
+
+  getMutationCache(): MutationCache {
+    if (!this.mutationCache) {
+      throw new Error('Missing MutationCache')
+    }
+    return this.mutationCache
+  }
+
+  getDefaultOptions(): DefaultOptions {
+    return this.defaultOptions
+  }
+
+  setDefaultOptions(options: DefaultOptions): void {
+    this.defaultOptions = options
+  }
+
+  setQueryDefaults(
+    queryKey: QueryKey,
+    options: QueryOptions<any, any, any>
+  ): void {
+    const result = this.queryDefaults.find(x =>
+      partialMatchKey(x.queryKey, queryKey)
+    )
+    if (result) {
+      result.defaultOptions = options
+    } else {
+      this.queryDefaults.push({ queryKey, defaultOptions: options })
+    }
+  }
+
+  getQueryDefaults(
+    queryKey: QueryKey
+  ): QueryOptions<any, any, any> | undefined {
+    return this.queryDefaults.find(x => partialMatchKey(x.queryKey, queryKey))
+      ?.defaultOptions
+  }
+
+  setMutationDefaults(
+    mutationKey: MutationKey,
+    options: MutationOptions<any, any, any, any>
+  ): void {
+    const result = this.mutationDefaults.find(x =>
+      partialMatchKey(x.mutationKey, mutationKey)
+    )
+    if (result) {
+      result.defaultOptions = options
+    } else {
+      this.mutationDefaults.push({ mutationKey, defaultOptions: options })
+    }
+  }
+
+  getMutationDefaults(
+    mutationKey: MutationKey
+  ): MutationOptions<any, any, any, any> | undefined {
+    return this.mutationDefaults.find(x =>
+      partialMatchKey(x.mutationKey, mutationKey)
+    )?.defaultOptions
   }
 
   defaultQueryOptions<T extends QueryOptions<any, any>>(options?: T): T {
@@ -338,33 +357,9 @@ export class QueryClient {
   ): T {
     return { ...this.defaultOptions.mutations, ...options } as T
   }
-}
-
-const mountedClients: QueryClient[] = []
-
-function getAllQueries() {
-  return uniq(mountedClients.map(client => client.getCache())).reduce<Query[]>(
-    (queries, cache) => queries.concat(cache.getAll()),
-    []
-  )
-}
-
-function onFocus() {
-  if (isVisibleAndOnline()) {
-    notifyManager.batch(() => {
-      getAllQueries().forEach(query => {
-        query.onFocus()
-      })
-    })
-  }
-}
 
-function onOnline() {
-  if (isVisibleAndOnline()) {
-    notifyManager.batch(() => {
-      getAllQueries().forEach(query => {
-        query.onOnline()
-      })
-    })
+  clear(): void {
+    this.queryCache.clear()
+    this.mutationCache?.clear()
   }
 }
diff --git a/src/core/queryObserver.ts b/src/core/queryObserver.ts
index bfd22dfb64..ae39a5de56 100644
--- a/src/core/queryObserver.ts
+++ b/src/core/queryObserver.ts
@@ -1,6 +1,5 @@
 import {
   getStatusProps,
-  isDocumentVisible,
   isServer,
   isValidTimeout,
   noop,
@@ -20,16 +19,7 @@ import type {
 } from './types'
 import type { Query, QueryState, Action, FetchOptions } from './query'
 import type { QueryClient } from './queryClient'
-
-interface QueryObserverConfig<
-  TData = unknown,
-  TError = unknown,
-  TQueryFnData = TData,
-  TQueryData = TQueryFnData
-> {
-  client: QueryClient
-  options?: QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>
-}
+import { focusManager } from './focusManager'
 
 type QueryObserverListener<TData, TError> = (
   result: QueryObserverResult<TData, TError>
@@ -61,10 +51,11 @@ export class QueryObserver<
   private refetchIntervalId?: number
 
   constructor(
-    config: QueryObserverConfig<TData, TError, TQueryFnData, TQueryData>
+    client: QueryClient,
+    options: QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>
   ) {
-    this.client = config.client
-    this.options = config.client.defaultQueryObserverOptions(config.options)
+    this.client = client
+    this.options = client.defaultQueryObserverOptions(options)
     this.listeners = []
     this.initialDataUpdateCount = 0
 
@@ -84,7 +75,7 @@ export class QueryObserver<
     this.listeners.push(callback)
 
     if (this.listeners.length === 1) {
-      this.currentQuery.subscribeObserver(this)
+      this.currentQuery.addObserver(this)
 
       if (this.willFetchOnMount()) {
         this.executeFetch()
@@ -125,7 +116,7 @@ export class QueryObserver<
   destroy(): void {
     this.listeners = []
     this.clearTimers()
-    this.currentQuery.unsubscribeObserver(this)
+    this.currentQuery.removeObserver(this)
   }
 
   setOptions(
@@ -308,7 +299,10 @@ export class QueryObserver<
     }
 
     this.refetchIntervalId = setInterval(() => {
-      if (this.options.refetchIntervalInBackground || isDocumentVisible()) {
+      if (
+        this.options.refetchIntervalInBackground ||
+        focusManager.isFocused()
+      ) {
         this.executeFetch()
       }
     }, this.options.refetchInterval)
@@ -404,9 +398,13 @@ export class QueryObserver<
 
   private updateQuery(): void {
     const prevQuery = this.currentQuery
+
     const query = this.client
-      .getCache()
-      .build(this.options as QueryOptions<TQueryData, TError, TQueryFnData>)
+      .getQueryCache()
+      .build(
+        this.client,
+        this.options as QueryOptions<TQueryData, TError, TQueryFnData>
+      )
 
     if (query === prevQuery) {
       return
@@ -426,8 +424,8 @@ export class QueryObserver<
       return
     }
 
-    prevQuery?.unsubscribeObserver(this)
-    this.currentQuery.subscribeObserver(this)
+    prevQuery?.removeObserver(this)
+    this.currentQuery.addObserver(this)
 
     if (this.options.notifyOnStatusChange !== false) {
       this.notify({ listeners: true })
@@ -511,7 +509,7 @@ export class QueryObserver<
 
       // Then the cache listeners
       if (notifyOptions.cache) {
-        this.client.getCache().notify(currentQuery)
+        this.client.getQueryCache().notify(currentQuery)
       }
     })
   }
diff --git a/src/core/retryer.ts b/src/core/retryer.ts
new file mode 100644
index 0000000000..ff0b389298
--- /dev/null
+++ b/src/core/retryer.ts
@@ -0,0 +1,164 @@
+import { focusManager } from './focusManager'
+import { onlineManager } from './onlineManager'
+import {
+  CancelOptions,
+  CancelledError,
+  functionalUpdate,
+  isCancelable,
+  sleep,
+} from './utils'
+
+// TYPES
+
+interface RetryerConfig<TData = unknown, TError = unknown> {
+  fn: () => TData | Promise<TData>
+  onFail?: (failureCount: number, error: TError) => void
+  onPause?: () => void
+  onContinue?: () => void
+  retry?: RetryValue<TError>
+  retryDelay?: RetryDelayValue
+}
+
+export type RetryValue<TError> = boolean | number | ShouldRetryFunction<TError>
+
+type ShouldRetryFunction<TError = unknown> = (
+  failureCount: number,
+  error: TError
+) => boolean
+
+export type RetryDelayValue = number | RetryDelayFunction
+
+type RetryDelayFunction = (failureCount: number) => number
+
+function defaultRetryDelay(failureCount: number) {
+  return Math.min(1000 * 2 ** failureCount, 30000)
+}
+
+// CLASS
+
+export class Retryer<TData = unknown, TError = unknown> {
+  cancel: (options?: CancelOptions) => void
+  continue: () => void
+  failureCount: number
+  isPaused: boolean
+  isResolved: boolean
+  isTransportCancelable: boolean
+  promise: Promise<TData>
+
+  constructor(config: RetryerConfig<TData, TError>) {
+    let cancelFn: ((options?: CancelOptions) => void) | undefined
+    let continueFn: (() => void) | undefined
+    let promiseResolve: (data: TData) => void
+    let promiseReject: (error: TError) => void
+
+    this.cancel = cancelOptions => cancelFn?.(cancelOptions)
+    this.continue = () => continueFn?.()
+    this.failureCount = 0
+    this.isPaused = false
+    this.isResolved = false
+    this.isTransportCancelable = false
+    this.promise = new Promise<TData>((outerResolve, outerReject) => {
+      promiseResolve = outerResolve
+      promiseReject = outerReject
+    })
+
+    const resolve = (value: any) => {
+      this.isResolved = true
+      continueFn?.()
+      promiseResolve(value)
+    }
+
+    const reject = (value: any) => {
+      this.isResolved = true
+      continueFn?.()
+      promiseReject(value)
+    }
+
+    const pause = () => {
+      return new Promise(continueResolve => {
+        continueFn = continueResolve
+        this.isPaused = true
+        config.onPause?.()
+      }).then(() => {
+        continueFn = undefined
+        this.isPaused = false
+        config.onContinue?.()
+      })
+    }
+
+    // Create loop function
+    const run = () => {
+      // Do nothing if already resolved
+      if (this.isResolved) {
+        return
+      }
+
+      let promiseOrValue: any
+
+      // Execute query
+      try {
+        promiseOrValue = config.fn()
+      } catch (error) {
+        promiseOrValue = Promise.reject(error)
+      }
+
+      // Create callback to cancel this fetch
+      cancelFn = cancelOptions => {
+        reject(new CancelledError(cancelOptions))
+
+        // Cancel transport if supported
+        if (isCancelable(promiseOrValue)) {
+          try {
+            promiseOrValue.cancel()
+          } catch {}
+        }
+      }
+
+      // Check if the transport layer support cancellation
+      this.isTransportCancelable = isCancelable(promiseOrValue)
+
+      Promise.resolve(promiseOrValue)
+        .then(resolve)
+        .catch(error => {
+          // Stop if the fetch is already resolved
+          if (this.isResolved) {
+            return
+          }
+
+          // Do we need to retry the request?
+          const retry = config.retry ?? 3
+          const retryDelay = config.retryDelay ?? defaultRetryDelay
+          const delay = functionalUpdate(retryDelay, this.failureCount) || 0
+          const shouldRetry =
+            retry === true ||
+            (typeof retry === 'number' && this.failureCount < retry) ||
+            (typeof retry === 'function' && retry(this.failureCount, error))
+
+          if (!shouldRetry) {
+            // We are done if the query does not need to be retried
+            reject(error)
+            return
+          }
+
+          this.failureCount++
+
+          // Notify on fail
+          config.onFail?.(this.failureCount, error)
+
+          // Delay
+          sleep(delay)
+            // Pause if the document is not visible or when the device is offline
+            .then(() => {
+              if (!focusManager.isFocused() || !onlineManager.isOnline()) {
+                return pause()
+              }
+            })
+            // Try again
+            .then(run)
+        })
+    }
+
+    // Start loop
+    run()
+  }
+}
diff --git a/src/core/tests/mutations.test.tsx b/src/core/tests/mutations.test.tsx
new file mode 100644
index 0000000000..502db57ab3
--- /dev/null
+++ b/src/core/tests/mutations.test.tsx
@@ -0,0 +1,281 @@
+import { QueryCache, QueryClient } from '../..'
+import { mockConsoleError, queryKey, sleep } from '../../react/tests/utils'
+import { MutationState } from '../mutation'
+import { MutationCache } from '../mutationCache'
+import { MutationObserver } from '../mutationObserver'
+
+describe('mutations', () => {
+  const queryCache = new QueryCache()
+  const mutationCache = new MutationCache()
+  const queryClient = new QueryClient({ queryCache, mutationCache })
+  queryClient.mount()
+
+  test('mutate should trigger a mutation', async () => {
+    const result = await queryClient.mutate({
+      mutationFn: async (text: string) => text,
+      variables: 'todo',
+    })
+
+    expect(result).toBe(result)
+  })
+
+  test('setMutationDefaults should be able to set defaults', async () => {
+    const key = queryKey()
+
+    queryClient.setMutationDefaults(key, {
+      mutationFn: async (text: string) => text,
+    })
+
+    const result = await queryClient.mutate({
+      mutationKey: key,
+      variables: 'todo',
+    })
+
+    expect(result).toBe(result)
+  })
+
+  test('mutation should set correct success states', async () => {
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async (text: string) => {
+        await sleep(10)
+        return text
+      },
+      onMutate: text => text,
+      variables: 'todo',
+    })
+
+    expect(mutation.getCurrentResult()).toEqual({
+      context: undefined,
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: true,
+      isLoading: false,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'idle',
+      variables: undefined,
+    })
+
+    const states: MutationState<string, unknown, string, string>[] = []
+
+    mutation.subscribe(state => {
+      states.push(state)
+    })
+
+    mutation.mutate()
+
+    await sleep(0)
+
+    expect(states[0]).toEqual({
+      context: undefined,
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(5)
+
+    expect(states[1]).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(20)
+
+    expect(states[2]).toEqual({
+      context: 'todo',
+      data: 'todo',
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: false,
+      isPaused: false,
+      isSuccess: true,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'success',
+      variables: 'todo',
+    })
+  })
+
+  test('mutation should set correct error states', async () => {
+    const consoleMock = mockConsoleError()
+
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async () => {
+        await sleep(20)
+        return Promise.reject('err')
+      },
+      onMutate: text => text,
+      variables: 'todo',
+      retry: 1,
+      retryDelay: 1,
+    })
+
+    const states: MutationState<string, unknown, string, string>[] = []
+
+    mutation.subscribe(state => {
+      states.push(state)
+    })
+
+    mutation.mutate().catch(() => undefined)
+
+    await sleep(0)
+
+    expect(states[0]).toEqual({
+      context: undefined,
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(10)
+
+    expect(states[1]).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(20)
+
+    expect(states[2]).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: null,
+      failureCount: 1,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(30)
+
+    expect(states[3]).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: 'err',
+      failureCount: 2,
+      isError: true,
+      isIdle: false,
+      isLoading: false,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'error',
+      variables: 'todo',
+    })
+
+    consoleMock.mockRestore()
+  })
+
+  test('should be able to restore a mutation', async () => {
+    const key = queryKey()
+
+    const onMutate = jest.fn()
+    const onSuccess = jest.fn()
+    const onSettled = jest.fn()
+
+    queryClient.setMutationDefaults(key, {
+      mutationFn: async (text: string) => text,
+      onMutate,
+      onSuccess,
+      onSettled,
+    })
+
+    const mutation = queryClient
+      .getMutationCache()
+      .build<string, unknown, string, string>(
+        queryClient,
+        {
+          mutationKey: key,
+        },
+        {
+          context: 'todo',
+          data: undefined,
+          error: null,
+          failureCount: 1,
+          isPaused: true,
+          status: 'loading',
+          variables: 'todo',
+        }
+      )
+
+    expect(mutation.state).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: null,
+      failureCount: 1,
+      isPaused: true,
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await queryClient.getMutationCache().continueMutations()
+
+    expect(mutation.state).toEqual({
+      context: 'todo',
+      data: 'todo',
+      error: null,
+      failureCount: 1,
+      isPaused: false,
+      status: 'success',
+      variables: 'todo',
+    })
+
+    expect(onMutate).not.toHaveBeenCalled()
+    expect(onSuccess).toHaveBeenCalled()
+    expect(onSettled).toHaveBeenCalled()
+  })
+})
diff --git a/src/core/tests/queryCache.test.tsx b/src/core/tests/queryCache.test.tsx
index 377daf2341..a30f7d81b6 100644
--- a/src/core/tests/queryCache.test.tsx
+++ b/src/core/tests/queryCache.test.tsx
@@ -6,20 +6,21 @@ import {
   mockNavigatorOnLine,
   expectType,
 } from '../../react/tests/utils'
-import { QueryCache, QueryClient } from '../..'
+import { QueryCache, QueryClient, QueryObserver } from '../..'
 import { isCancelledError, isError } from '../utils'
 import { QueryObserverResult } from '../types'
+import { QueriesObserver } from '../queriesObserver'
 
 describe('queryCache', () => {
-  const cache = new QueryCache()
-  const client = new QueryClient({ cache })
-  client.mount()
+  const queryCache = new QueryCache()
+  const queryClient = new QueryClient({ queryCache })
+  queryClient.mount()
 
   test('setQueryDefaults does not trigger a fetch', async () => {
     const key = queryKey()
-    client.setQueryDefaults(key, () => 'data')
+    queryClient.setQueryDefaults(key, { queryFn: () => 'data' })
     await sleep(1)
-    const data = client.getQueryData(key)
+    const data = queryClient.getQueryData(key)
     expect(data).toBeUndefined()
   })
 
@@ -27,8 +28,8 @@ describe('queryCache', () => {
     const consoleMock = mockConsoleError()
     const key = queryKey()
     const queryFn = jest.fn().mockRejectedValue('reject')
-    client.setQueryDefaults(key, queryFn, { retry: 1 })
-    const observer = client.watchQuery(key)
+    queryClient.setQueryDefaults(key, { queryFn, retry: 1 })
+    const observer = new QueryObserver(queryClient, { queryKey: key })
     const { error } = await observer.getNextResult({ throwOnError: false })
     expect(error).toBe('reject')
     expect(queryFn).toHaveBeenCalledTimes(2)
@@ -40,7 +41,7 @@ describe('queryCache', () => {
 
     const user = { userId: 1 }
     expect(() => {
-      client.setQueryData([key, user], (prevUser?: typeof user) => ({
+      queryClient.setQueryData([key, user], (prevUser?: typeof user) => ({
         ...prevUser!,
         name: 'Edvin',
       }))
@@ -50,10 +51,10 @@ describe('queryCache', () => {
   test('setQueryData does not crash when variable is null', () => {
     const key = queryKey()
 
-    client.setQueryData([key, { userId: null }], 'Old Data')
+    queryClient.setQueryData([key, { userId: null }], 'Old Data')
 
     expect(() => {
-      client.setQueryData([key, { userId: null }], 'New Data')
+      queryClient.setQueryData([key, { userId: null }], 'New Data')
     }).not.toThrow()
   })
 
@@ -64,7 +65,7 @@ describe('queryCache', () => {
     const key = queryKey()
 
     await expect(
-      client.fetchQueryData(key, async () => {
+      queryClient.fetchQueryData(key, async () => {
         throw new Error('error')
       })
     ).rejects.toEqual(new Error('error'))
@@ -76,8 +77,8 @@ describe('queryCache', () => {
     const key = queryKey()
 
     const fetchFn = () => Promise.resolve('data')
-    const first = await client.fetchQueryData(key, fetchFn)
-    const second = await client.fetchQueryData(key, fetchFn)
+    const first = await queryClient.fetchQueryData(key, fetchFn)
+    const second = await queryClient.fetchQueryData(key, fetchFn)
 
     expect(second).toBe(first)
   })
@@ -85,9 +86,9 @@ describe('queryCache', () => {
   test('fetchQueryData should not force fetch', async () => {
     const key = queryKey()
 
-    client.setQueryData(key, 'og')
+    queryClient.setQueryData(key, 'og')
     const fetchFn = () => Promise.resolve('new')
-    const first = await client.fetchQueryData(key, fetchFn, {
+    const first = await queryClient.fetchQueryData(key, fetchFn, {
       initialData: 'initial',
       staleTime: 100,
     })
@@ -100,19 +101,19 @@ describe('queryCache', () => {
     let count = 0
     const fetchFn = () => ++count
 
-    client.setQueryData(key, count)
-    const first = await client.fetchQueryData(key, fetchFn, {
+    queryClient.setQueryData(key, count)
+    const first = await queryClient.fetchQueryData(key, fetchFn, {
       staleTime: 100,
     })
     await sleep(11)
-    const second = await client.fetchQueryData(key, fetchFn, {
+    const second = await queryClient.fetchQueryData(key, fetchFn, {
       staleTime: 10,
     })
-    const third = await client.fetchQueryData(key, fetchFn, {
+    const third = await queryClient.fetchQueryData(key, fetchFn, {
       staleTime: 10,
     })
     await sleep(11)
-    const fourth = await client.fetchQueryData(key, fetchFn, {
+    const fourth = await queryClient.fetchQueryData(key, fetchFn, {
       staleTime: 10,
     })
     expect(first).toBe(0)
@@ -124,7 +125,7 @@ describe('queryCache', () => {
   test('fetchQueryData should be able to perform an infinite query', async () => {
     const key = queryKey()
     const fetchFn = () => Promise.resolve('data')
-    const data = await client.fetchQueryData<string[], unknown, string>(
+    const data = await queryClient.fetchQueryData<string[], unknown, string>(
       key,
       fetchFn,
       { infinite: true }
@@ -137,7 +138,7 @@ describe('queryCache', () => {
 
     const key = queryKey()
 
-    const result = await client.prefetchQuery(
+    const result = await queryClient.prefetchQuery(
       key,
       async () => {
         throw new Error('error')
@@ -158,9 +159,9 @@ describe('queryCache', () => {
 
     const callback = jest.fn()
 
-    cache.subscribe(callback)
+    queryCache.subscribe(callback)
 
-    client.prefetchQuery(key, () => 'data')
+    queryClient.prefetchQuery(key, () => 'data')
 
     await sleep(100)
 
@@ -172,10 +173,10 @@ describe('queryCache', () => {
 
     const callback = jest.fn()
 
-    cache.subscribe(callback)
+    queryCache.subscribe(callback)
 
-    client.prefetchQuery(key, () => 'data')
-    const query = cache.find(key)
+    queryClient.prefetchQuery(key, () => 'data')
+    const query = queryCache.find(key)
 
     await sleep(100)
 
@@ -187,9 +188,9 @@ describe('queryCache', () => {
 
     const callback = jest.fn()
 
-    cache.subscribe(callback)
+    queryCache.subscribe(callback)
 
-    client.prefetchQuery(key, () => 'data', {
+    queryClient.prefetchQuery(key, () => 'data', {
       initialData: 'initial',
     })
 
@@ -201,17 +202,17 @@ describe('queryCache', () => {
   test('setQueryData creates a new query if query was not found', () => {
     const key = queryKey()
 
-    client.setQueryData(key, 'bar')
+    queryClient.setQueryData(key, 'bar')
 
-    expect(client.getQueryData(key)).toBe('bar')
+    expect(queryClient.getQueryData(key)).toBe('bar')
   })
 
   test('setQueryData creates a new query if query was not found', () => {
     const key = queryKey()
 
-    client.setQueryData(key, 'qux')
+    queryClient.setQueryData(key, 'qux')
 
-    expect(client.getQueryData(key)).toBe('qux')
+    expect(queryClient.getQueryData(key)).toBe('qux')
   })
 
   test('removeQueries does not crash when exact is provided', async () => {
@@ -220,16 +221,16 @@ describe('queryCache', () => {
     const fetchFn = () => Promise.resolve('data')
 
     // check the query was added to the cache
-    await client.prefetchQuery(key, fetchFn)
-    expect(cache.find(key)).toBeTruthy()
+    await queryClient.prefetchQuery(key, fetchFn)
+    expect(queryCache.find(key)).toBeTruthy()
 
     // check the error doesn't occur
     expect(() =>
-      client.removeQueries({ queryKey: key, exact: true })
+      queryClient.removeQueries({ queryKey: key, exact: true })
     ).not.toThrow()
 
     // check query was successful removed
-    expect(cache.find(key)).toBeFalsy()
+    expect(queryCache.find(key)).toBeFalsy()
   })
 
   test('setQueryData updater function works as expected', () => {
@@ -237,21 +238,21 @@ describe('queryCache', () => {
 
     const updater = jest.fn(oldData => `new data + ${oldData}`)
 
-    client.setQueryData(key, 'test data')
-    client.setQueryData(key, updater)
+    queryClient.setQueryData(key, 'test data')
+    queryClient.setQueryData(key, updater)
 
     expect(updater).toHaveBeenCalled()
-    expect(cache.find(key)!.state.data).toEqual('new data + test data')
+    expect(queryCache.find(key)!.state.data).toEqual('new data + test data')
   })
 
-  test('watchQueries should return an array with all query results', async () => {
+  test('QueriesObserver should return an array with all query results', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
     const queryFn1 = jest.fn().mockReturnValue(1)
     const queryFn2 = jest.fn().mockReturnValue(2)
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQueries([
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueriesObserver(testClient, [
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
@@ -265,14 +266,14 @@ describe('queryCache', () => {
     expect(observerResult).toMatchObject([{ data: 1 }, { data: 2 }])
   })
 
-  test('watchQueries should update when a query updates', async () => {
+  test('QueriesObserver should update when a query updates', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
     const queryFn1 = jest.fn().mockReturnValue(1)
     const queryFn2 = jest.fn().mockReturnValue(2)
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQueries([
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueriesObserver(testClient, [
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
@@ -295,14 +296,14 @@ describe('queryCache', () => {
     ])
   })
 
-  test('watchQueries should update when a query is removed', async () => {
+  test('QueriesObserver should update when a query is removed', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
     const queryFn1 = jest.fn().mockReturnValue(1)
     const queryFn2 = jest.fn().mockReturnValue(2)
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQueries([
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueriesObserver(testClient, [
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
@@ -329,14 +330,14 @@ describe('queryCache', () => {
     ])
   })
 
-  test('watchQueries should update when a query changed position', async () => {
+  test('QueriesObserver should update when a query changed position', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
     const queryFn1 = jest.fn().mockReturnValue(1)
     const queryFn2 = jest.fn().mockReturnValue(2)
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQueries([
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueriesObserver(testClient, [
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
@@ -362,14 +363,14 @@ describe('queryCache', () => {
     ])
   })
 
-  test('watchQueries should not update when nothing has changed', async () => {
+  test('QueriesObserver should not update when nothing has changed', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
     const queryFn1 = jest.fn().mockReturnValue(1)
     const queryFn2 = jest.fn().mockReturnValue(2)
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQueries([
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueriesObserver(testClient, [
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
@@ -394,14 +395,14 @@ describe('queryCache', () => {
     ])
   })
 
-  test('watchQueries should trigger all fetches when subscribed', async () => {
+  test('QueriesObserver should trigger all fetches when subscribed', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
     const queryFn1 = jest.fn()
     const queryFn2 = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQueries([
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueriesObserver(testClient, [
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
@@ -413,12 +414,12 @@ describe('queryCache', () => {
     expect(queryFn2).toHaveBeenCalledTimes(1)
   })
 
-  test('watchQuery should trigger a fetch when subscribed', async () => {
+  test('QueryObserver should trigger a fetch when subscribed', async () => {
     const key = queryKey()
     const queryFn = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery(key, queryFn)
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver(testClient, { queryKey: key, queryFn })
     const unsubscribe = observer.subscribe()
     await sleep(1)
     unsubscribe()
@@ -426,11 +427,13 @@ describe('queryCache', () => {
     expect(queryFn).toHaveBeenCalledTimes(1)
   })
 
-  test('watchQuery should be able to fetch with a selector', async () => {
+  test('QueryObserver should be able to fetch with a selector', async () => {
     const key = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery(key, () => ({ count: 1 }), {
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver(testClient, {
+      queryKey: key,
+      queryFn: () => ({ count: 1 }),
       select: data => ({ myCount: data.count }),
     })
     let observerResult
@@ -444,11 +447,13 @@ describe('queryCache', () => {
     expect(observerResult).toMatchObject({ data: { myCount: 1 } })
   })
 
-  test('watchQuery should be able to fetch with a selector using the fetch method', async () => {
+  test('QueryObserver should be able to fetch with a selector using the fetch method', async () => {
     const key = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery(key, () => ({ count: 1 }), {
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver(testClient, {
+      queryKey: key,
+      queryFn: () => ({ count: 1 }),
       select: data => ({ myCount: data.count }),
     })
     const observerResult = await observer.fetch()
@@ -457,11 +462,12 @@ describe('queryCache', () => {
     expect(observerResult.data).toMatchObject({ myCount: 1 })
   })
 
-  test('watchQuery should be able to fetch an infinite query with selector', async () => {
+  test('QueryObserver should be able to fetch an infinite query with selector', async () => {
     const key = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery<string[], unknown, number, number[]>(
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver<string[], unknown, number, number[]>(
+      testClient,
       {
         queryKey: key,
         queryFn: () => 1,
@@ -479,11 +485,11 @@ describe('queryCache', () => {
     expect(observerResult).toMatchObject({ data: ['1'] })
   })
 
-  test('watchQuery should be able to fetch with a selector and object syntax', async () => {
+  test('QueryObserver should be able to fetch with a selector and object syntax', async () => {
     const key = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery({
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver(testClient, {
       queryKey: key,
       queryFn: () => ({ count: 1 }),
       select: data => ({ myCount: data.count }),
@@ -498,12 +504,14 @@ describe('queryCache', () => {
     expect(observerResult).toMatchObject({ data: { myCount: 1 } })
   })
 
-  test('watchQuery should run the selector again if the data changed', async () => {
+  test('QueryObserver should run the selector again if the data changed', async () => {
     const key = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     let count = 0
-    const observer = testClient.watchQuery(key, () => ({ count }), {
+    const observer = new QueryObserver(testClient, {
+      queryKey: key,
+      queryFn: () => ({ count }),
       select: data => {
         count++
         return { myCount: data.count }
@@ -517,12 +525,14 @@ describe('queryCache', () => {
     expect(observerResult2.data).toMatchObject({ myCount: 1 })
   })
 
-  test('watchQuery should not run the selector again if the data did not change', async () => {
+  test('QueryObserver should not run the selector again if the data did not change', async () => {
     const key = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     let count = 0
-    const observer = testClient.watchQuery(key, () => ({ count: 1 }), {
+    const observer = new QueryObserver(testClient, {
+      queryKey: key,
+      queryFn: () => ({ count: 1 }),
       select: data => {
         count++
         return { myCount: data.count }
@@ -536,12 +546,14 @@ describe('queryCache', () => {
     expect(observerResult2.data).toMatchObject({ myCount: 1 })
   })
 
-  test('watchQuery should structurally share the selector', async () => {
+  test('QueryObserver should structurally share the selector', async () => {
     const key = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     let count = 0
-    const observer = testClient.watchQuery(key, () => ({ count: ++count }), {
+    const observer = new QueryObserver(testClient, {
+      queryKey: key,
+      queryFn: () => ({ count: ++count }),
       select: () => ({ myCount: 1 }),
     })
     const observerResult1 = await observer.fetch()
@@ -551,12 +563,16 @@ describe('queryCache', () => {
     expect(observerResult1.data).toBe(observerResult2.data)
   })
 
-  test('watchQuery should not trigger a fetch when subscribed and disabled', async () => {
+  test('QueryObserver should not trigger a fetch when subscribed and disabled', async () => {
     const key = queryKey()
     const queryFn = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery(key, queryFn, { enabled: false })
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver(testClient, {
+      queryKey: key,
+      queryFn,
+      enabled: false,
+    })
     const unsubscribe = observer.subscribe()
     await sleep(1)
     unsubscribe()
@@ -564,24 +580,27 @@ describe('queryCache', () => {
     expect(queryFn).toHaveBeenCalledTimes(0)
   })
 
-  test('watchQuery should not trigger a fetch when not subscribed', async () => {
+  test('QueryObserver should not trigger a fetch when not subscribed', async () => {
     const key = queryKey()
     const queryFn = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    testClient.watchQuery(key, queryFn)
+    const testClient = new QueryClient({ queryCache: testCache })
+    new QueryObserver(testClient, { queryKey: key, queryFn })
     await sleep(1)
     testCache.clear()
     expect(queryFn).toHaveBeenCalledTimes(0)
   })
 
-  test('watchQuery should be able to watch a query without defining a query function', async () => {
+  test('QueryObserver should be able to watch a query without defining a query function', async () => {
     const key = queryKey()
     const queryFn = jest.fn()
     const callback = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery(key, { enabled: false })
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver(testClient, {
+      queryKey: key,
+      enabled: false,
+    })
     const unsubscribe = observer.subscribe(callback)
     await testClient.fetchQueryData(key, queryFn)
     unsubscribe()
@@ -590,12 +609,15 @@ describe('queryCache', () => {
     expect(callback).toHaveBeenCalledTimes(2)
   })
 
-  test('watchQuery should accept unresolved query config in update function', async () => {
+  test('QueryObserver should accept unresolved query config in update function', async () => {
     const key = queryKey()
     const queryFn = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery(key, { enabled: false })
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver(testClient, {
+      queryKey: key,
+      enabled: false,
+    })
     const results: QueryObserverResult<unknown>[] = []
     const unsubscribe = observer.subscribe(x => {
       results.push(x)
@@ -612,12 +634,15 @@ describe('queryCache', () => {
     expect(results[2]).toMatchObject({ isStale: true })
   })
 
-  test('watchQuery should be able to handle multiple subscribers', async () => {
+  test('QueryObserver should be able to handle multiple subscribers', async () => {
     const key = queryKey()
     const queryFn = jest.fn().mockReturnValue('data')
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery<string>(key, { enabled: false })
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver<string>(testClient, {
+      queryKey: key,
+      enabled: false,
+    })
     const results1: QueryObserverResult<string>[] = []
     const results2: QueryObserverResult<string>[] = []
     const unsubscribe1 = observer.subscribe(x => {
@@ -640,12 +665,15 @@ describe('queryCache', () => {
     expect(results2[1]).toMatchObject({ data: 'data' })
   })
 
-  test('watchQuery should be able to resolve a promise', async () => {
+  test('QueryObserver should be able to resolve a promise', async () => {
     const key = queryKey()
     const queryFn = jest.fn().mockReturnValue('data')
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery<string>(key, { enabled: false })
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver<string>(testClient, {
+      queryKey: key,
+      enabled: false,
+    })
     let value
     observer.getNextResult().then(x => {
       value = x
@@ -657,12 +685,15 @@ describe('queryCache', () => {
     expect(value).toMatchObject({ data: 'data' })
   })
 
-  test('watchQuery should be able to resolve a promise with an error', async () => {
+  test('QueryObserver should be able to resolve a promise with an error', async () => {
     const consoleMock = mockConsoleError()
     const key = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
-    const observer = testClient.watchQuery<string>(key, { enabled: false })
+    const testClient = new QueryClient({ queryCache: testCache })
+    const observer = new QueryObserver<string>(testClient, {
+      queryKey: key,
+      enabled: false,
+    })
     let error
     observer.getNextResult({ throwOnError: true }).catch(e => {
       error = e
@@ -680,7 +711,7 @@ describe('queryCache', () => {
     const key2 = queryKey()
     const key3 = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.fetchQueryData(key1, async () => {
       return 'data'
     })
@@ -731,11 +762,17 @@ describe('queryCache', () => {
     const queryFn1 = jest.fn()
     const queryFn2 = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.fetchQueryData(key1, queryFn1)
     await testClient.fetchQueryData(key2, queryFn2)
-    const observer1 = testClient.watchQuery(key1, { enabled: false })
-    const observer2 = testClient.watchQuery(key2, { enabled: false })
+    const observer1 = new QueryObserver(testClient, {
+      queryKey: key1,
+      enabled: false,
+    })
+    const observer2 = new QueryObserver(testClient, {
+      queryKey: key1,
+      enabled: false,
+    })
     observer1.subscribe()
     observer2.subscribe()
     await testClient.refetchQueries()
@@ -752,10 +789,12 @@ describe('queryCache', () => {
     const queryFn1 = jest.fn()
     const queryFn2 = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.fetchQueryData(key1, queryFn1)
     await testClient.fetchQueryData(key2, queryFn2)
-    const observer = testClient.watchQuery(key1, queryFn1, {
+    const observer = new QueryObserver(testClient, {
+      queryKey: key1,
+      queryFn: queryFn1,
       staleTime: Infinity,
     })
     const unsubscribe = observer.subscribe()
@@ -772,10 +811,13 @@ describe('queryCache', () => {
     const queryFn1 = jest.fn()
     const queryFn2 = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.fetchQueryData(key1, queryFn1)
     await testClient.fetchQueryData(key2, queryFn2)
-    const observer = testClient.watchQuery(key1, queryFn1)
+    const observer = new QueryObserver(testClient, {
+      queryKey: key1,
+      queryFn: queryFn1,
+    })
     const unsubscribe = observer.subscribe()
     testClient.invalidateQueries(key1)
     await testClient.refetchQueries({ stale: true })
@@ -791,11 +833,14 @@ describe('queryCache', () => {
     const queryFn1 = jest.fn()
     const queryFn2 = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.fetchQueryData(key1, queryFn1)
     await testClient.fetchQueryData(key2, queryFn2)
     testClient.invalidateQueries(key1)
-    const observer = testClient.watchQuery(key1, queryFn1)
+    const observer = new QueryObserver(testClient, {
+      queryKey: key1,
+      queryFn: queryFn1,
+    })
     const unsubscribe = observer.subscribe()
     await testClient.refetchQueries({ active: true, stale: true })
     unsubscribe()
@@ -810,10 +855,12 @@ describe('queryCache', () => {
     const queryFn1 = jest.fn()
     const queryFn2 = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.fetchQueryData(key1, queryFn1)
     await testClient.fetchQueryData(key2, queryFn2)
-    const observer = testClient.watchQuery(key1, queryFn1, {
+    const observer = new QueryObserver(testClient, {
+      queryKey: key1,
+      queryFn: queryFn1,
       staleTime: Infinity,
     })
     const unsubscribe = observer.subscribe()
@@ -830,10 +877,12 @@ describe('queryCache', () => {
     const queryFn1 = jest.fn()
     const queryFn2 = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.fetchQueryData(key1, queryFn1)
     await testClient.fetchQueryData(key2, queryFn2)
-    const observer = testClient.watchQuery(key1, queryFn1, {
+    const observer = new QueryObserver(testClient, {
+      queryKey: key1,
+      queryFn: queryFn1,
       staleTime: Infinity,
     })
     const unsubscribe = observer.subscribe()
@@ -850,10 +899,11 @@ describe('queryCache', () => {
     const queryFn1 = jest.fn()
     const queryFn2 = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.fetchQueryData(key1, queryFn1)
     await testClient.fetchQueryData(key2, queryFn2)
-    const observer = testClient.watchQuery(key1, {
+    const observer = new QueryObserver(testClient, {
+      queryKey: key1,
       enabled: false,
       staleTime: Infinity,
     })
@@ -868,7 +918,7 @@ describe('queryCache', () => {
   test('find should filter correctly', async () => {
     const key = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.prefetchQuery(key, () => 'data1')
     const query = testCache.find(key)!
     expect(query).toBeDefined()
@@ -878,7 +928,7 @@ describe('queryCache', () => {
     const key1 = queryKey()
     const key2 = queryKey()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ cache: testCache })
+    const testClient = new QueryClient({ queryCache: testCache })
     await testClient.prefetchQuery(key1, () => 'data1')
     await testClient.prefetchQuery(key2, () => 'data2')
     await testClient.prefetchQuery([{ a: 'a', b: 'b' }], () => 'data3')
@@ -923,8 +973,6 @@ describe('queryCache', () => {
     expect(testCache.findAll([{ a: 'a', b: 'b', c: 'c' }])).toEqual([])
     expect(testCache.findAll([{ a: 'a' }], { stale: false })).toEqual([query3])
     expect(testCache.findAll([{ a: 'a' }], { stale: true })).toEqual([])
-    expect(testCache.findAll([{ a: 'a' }], { fresh: false })).toEqual([])
-    expect(testCache.findAll([{ a: 'a' }], { fresh: true })).toEqual([query3])
     expect(testCache.findAll([{ a: 'a' }], { active: true })).toEqual([])
     expect(testCache.findAll([{ a: 'a' }], { inactive: true })).toEqual([
       query3,
@@ -939,7 +987,9 @@ describe('queryCache', () => {
     const key = queryKey()
 
     const fetchData = () => Promise.resolve('data')
-    const observer = client.watchQuery(key, fetchData, {
+    const observer = new QueryObserver(queryClient, {
+      queryKey: key,
+      queryFn: fetchData,
       cacheTime: 0,
       refetchInterval: 1,
     })
@@ -950,37 +1000,41 @@ describe('queryCache', () => {
     // @ts-expect-error
     expect(observer.refetchIntervalId).toBeUndefined()
     await sleep(10)
-    expect(cache.find(key)).toBeUndefined()
+    expect(queryCache.find(key)).toBeUndefined()
   })
 
   test('query is garbage collected when unsubscribed to', async () => {
     const key = queryKey()
-    const observer = client.watchQuery(key, async () => 'data', {
+    const observer = new QueryObserver(queryClient, {
+      queryKey: key,
+      queryFn: async () => 'data',
       cacheTime: 0,
     })
-    expect(cache.find(key)).toBeDefined()
+    expect(queryCache.find(key)).toBeDefined()
     const unsubscribe = observer.subscribe()
     unsubscribe()
-    expect(cache.find(key)).toBeDefined()
+    expect(queryCache.find(key)).toBeDefined()
     await sleep(100)
-    expect(cache.find(key)).toBeUndefined()
+    expect(queryCache.find(key)).toBeUndefined()
   })
 
   test('query is not garbage collected unless there are no subscribers', async () => {
     const key = queryKey()
-    const observer = client.watchQuery(key, async () => 'data', {
+    const observer = new QueryObserver(queryClient, {
+      queryKey: key,
+      queryFn: async () => 'data',
       cacheTime: 0,
     })
-    expect(cache.find(key)).toBeDefined()
+    expect(queryCache.find(key)).toBeDefined()
     const unsubscribe = observer.subscribe()
     await sleep(100)
-    expect(cache.find(key)).toBeDefined()
+    expect(queryCache.find(key)).toBeDefined()
     unsubscribe()
     await sleep(100)
-    expect(cache.find(key)).toBeUndefined()
-    client.setQueryData(key, 'data')
+    expect(queryCache.find(key)).toBeUndefined()
+    queryClient.setQueryData(key, 'data')
     await sleep(100)
-    expect(cache.find(key)).toBeDefined()
+    expect(queryCache.find(key)).toBeDefined()
   })
 
   describe('QueryCache', () => {
@@ -989,7 +1043,7 @@ describe('queryCache', () => {
 
       const queryFn = () => 'data'
       const testClient = new QueryClient({
-        cache: cache,
+        queryCache,
         defaultOptions: { queries: { queryFn } },
       })
 
@@ -1000,7 +1054,7 @@ describe('queryCache', () => {
       const key = queryKey()
 
       const testClient = new QueryClient({
-        cache: cache,
+        queryCache,
         defaultOptions: {
           queries: { cacheTime: Infinity },
         },
@@ -1008,14 +1062,14 @@ describe('queryCache', () => {
 
       const fetchData = () => Promise.resolve(undefined)
       await testClient.prefetchQuery(key, fetchData)
-      const newQuery = cache.find(key)
+      const newQuery = queryCache.find(key)
       expect(newQuery?.options.cacheTime).toBe(Infinity)
     })
 
     test('subscribe passes the correct query', async () => {
       const key = queryKey()
       const testCache = new QueryCache()
-      const testClient = new QueryClient({ cache: testCache })
+      const testClient = new QueryClient({ queryCache: testCache })
       const subscriber = jest.fn()
       const unsubscribe = testCache.subscribe(subscriber)
       testClient.setQueryData(key, 'foo')
@@ -1027,16 +1081,16 @@ describe('queryCache', () => {
 
     test('query should use the longest cache time it has seen', async () => {
       const key = queryKey()
-      await client.prefetchQuery(key, () => 'data', {
+      await queryClient.prefetchQuery(key, () => 'data', {
         cacheTime: 100,
       })
-      await client.prefetchQuery(key, () => 'data', {
+      await queryClient.prefetchQuery(key, () => 'data', {
         cacheTime: 200,
       })
-      await client.prefetchQuery(key, () => 'data', {
+      await queryClient.prefetchQuery(key, () => 'data', {
         cacheTime: 10,
       })
-      const query = cache.find(key)!
+      const query = queryCache.find(key)!
       expect(query.cacheTime).toBe(200)
     })
 
@@ -1051,7 +1105,7 @@ describe('queryCache', () => {
       let count = 0
       let result
 
-      const promise = client.fetchQueryData(
+      const promise = queryClient.fetchQueryData(
         key,
         async () => {
           count++
@@ -1099,7 +1153,7 @@ describe('queryCache', () => {
       let count = 0
       let result
 
-      const promise = client.fetchQueryData(
+      const promise = queryClient.fetchQueryData(
         key,
         async () => {
           count++
@@ -1150,7 +1204,7 @@ describe('queryCache', () => {
       let count = 0
       let result
 
-      const promise = client.fetchQueryData(
+      const promise = queryClient.fetchQueryData(
         key,
         async () => {
           count++
@@ -1166,7 +1220,7 @@ describe('queryCache', () => {
         result = data
       })
 
-      const query = cache.find(key)!
+      const query = queryCache.find(key)!
 
       // Check if the query is really paused
       await sleep(50)
@@ -1187,7 +1241,7 @@ describe('queryCache', () => {
     test('query should continue if cancellation is not supported', async () => {
       const key = queryKey()
 
-      client.prefetchQuery(key, async () => {
+      queryClient.prefetchQuery(key, async () => {
         await sleep(100)
         return 'data'
       })
@@ -1195,13 +1249,16 @@ describe('queryCache', () => {
       await sleep(10)
 
       // Subscribe and unsubscribe to simulate cancellation because the last observer unsubscribed
-      const observer = client.watchQuery(key, { enabled: false })
+      const observer = new QueryObserver(queryClient, {
+        queryKey: key,
+        enabled: false,
+      })
       const unsubscribe = observer.subscribe()
       unsubscribe()
 
       await sleep(100)
 
-      const query = cache.find(key)!
+      const query = queryCache.find(key)!
 
       expect(query.state).toMatchObject({
         data: 'data',
@@ -1215,7 +1272,7 @@ describe('queryCache', () => {
 
       const cancel = jest.fn()
 
-      client.prefetchQuery(key, async () => {
+      queryClient.prefetchQuery(key, async () => {
         const promise = new Promise((resolve, reject) => {
           sleep(100).then(() => resolve('data'))
           cancel.mockImplementation(() => {
@@ -1229,13 +1286,16 @@ describe('queryCache', () => {
       await sleep(10)
 
       // Subscribe and unsubscribe to simulate cancellation because the last observer unsubscribed
-      const observer = client.watchQuery(key, { enabled: false })
+      const observer = new QueryObserver(queryClient, {
+        queryKey: key,
+        enabled: false,
+      })
       const unsubscribe = observer.subscribe()
       unsubscribe()
 
       await sleep(100)
 
-      const query = cache.find(key)!
+      const query = queryCache.find(key)!
 
       expect(cancel).toHaveBeenCalled()
       expect(query.state).toMatchObject({
@@ -1257,7 +1317,7 @@ describe('queryCache', () => {
 
       let error
 
-      const promise = client.fetchQueryData(key, queryFn, {
+      const promise = queryClient.fetchQueryData(key, queryFn, {
         retry: 3,
         retryDelay: 10,
       })
@@ -1266,7 +1326,7 @@ describe('queryCache', () => {
         error = e
       })
 
-      const query = cache.find(key)!
+      const query = queryCache.find(key)!
       query.cancel()
 
       await sleep(100)
@@ -1285,8 +1345,8 @@ describe('queryCache', () => {
         return 'data'
       })
 
-      client.prefetchQuery(key, queryFn)
-      const query = cache.find(key)!
+      queryClient.prefetchQuery(key, queryFn)
+      const query = queryCache.find(key)!
       await sleep(10)
       query.cancel()
       await sleep(100)
@@ -1301,8 +1361,8 @@ describe('queryCache', () => {
 
     test('cancelling a resolved query should not have any effect', async () => {
       const key = queryKey()
-      await client.prefetchQuery(key, async () => 'data')
-      const query = cache.find(key)!
+      await queryClient.prefetchQuery(key, async () => 'data')
+      const query = queryCache.find(key)!
       query.cancel()
       await sleep(10)
       expect(query.state.data).toBe('data')
@@ -1313,10 +1373,10 @@ describe('queryCache', () => {
 
       const key = queryKey()
 
-      await client.prefetchQuery(key, async () => {
+      await queryClient.prefetchQuery(key, async () => {
         throw new Error('error')
       })
-      const query = cache.find(key)!
+      const query = queryCache.find(key)!
       query.cancel()
       await sleep(10)
 
diff --git a/src/core/tests/utils.test.tsx b/src/core/tests/utils.test.tsx
index 00e43423e1..1d56907553 100644
--- a/src/core/tests/utils.test.tsx
+++ b/src/core/tests/utils.test.tsx
@@ -6,8 +6,8 @@ describe('core/utils', () => {
   it('setLogger should override the default logger', async () => {
     const key = queryKey()
 
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
 
     const logger: Logger = {
       error: jest.fn(),
@@ -17,7 +17,7 @@ describe('core/utils', () => {
 
     setLogger(logger)
 
-    await client.prefetchQuery(
+    await queryClient.prefetchQuery(
       key,
       async () => {
         throw new Error('Test')
diff --git a/src/core/types.ts b/src/core/types.ts
index d751eb2cfa..f362399287 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -1,3 +1,5 @@
+import type { MutationState } from './mutation'
+import type { RetryValue, RetryDelayValue } from './retryer'
 import type { QueryFilters } from './utils'
 
 export type QueryKey = string | unknown[]
@@ -10,11 +12,6 @@ export type InitialStaleFunction = () => boolean
 
 export type QueryKeyHashFunction = (queryKey: QueryKey) => string
 
-export type ShouldRetryFunction<TError = unknown> = (
-  failureCount: number,
-  error: TError
-) => boolean
-
 export type GetPreviousPageParamFunction<TQueryFnData = unknown> = (
   firstPage: TQueryFnData,
   allPages: TQueryFnData[]
@@ -25,8 +22,6 @@ export type GetNextPageParamFunction<TQueryFnData = unknown> = (
   allPages: TQueryFnData[]
 ) => unknown | undefined
 
-export type RetryDelayFunction = (attempt: number) => number
-
 export interface QueryOptions<
   TData = unknown,
   TError = unknown,
@@ -38,8 +33,8 @@ export interface QueryOptions<
    * If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number.
    * If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false.
    */
-  retry?: boolean | number | ShouldRetryFunction<TError>
-  retryDelay?: number | RetryDelayFunction
+  retry?: RetryValue<TError>
+  retryDelay?: RetryDelayValue
   cacheTime?: number
   isDataEqual?: (oldData: unknown, newData: unknown) => boolean
   queryFn?: QueryFunction<TQueryFnData>
@@ -217,12 +212,24 @@ export interface QueryObserverResult<TData = unknown, TError = unknown> {
   updatedAt: number
 }
 
-export interface MutateOptions<
+export type MutationKey = string | unknown[]
+
+export type MutationStatus = 'idle' | 'loading' | 'success' | 'error'
+
+export type MutationFunction<TData = unknown, TVariables = unknown> = (
+  variables: TVariables
+) => Promise<TData>
+
+export interface MutationOptions<
   TData = unknown,
   TError = unknown,
   TVariables = void,
   TContext = unknown
 > {
+  mutationFn?: MutationFunction<TData, TVariables>
+  mutationKey?: string | unknown[]
+  variables?: TVariables
+  onMutate?: (variables: TVariables) => Promise<TContext> | TContext
   onSuccess?: (
     data: TData,
     variables: TVariables,
@@ -239,20 +246,68 @@ export interface MutateOptions<
     variables: TVariables,
     context: TContext | undefined
   ) => Promise<void> | void
+  retry?: RetryValue<TError>
+  retryDelay?: RetryDelayValue
 }
 
-export interface MutationOptions<
+export interface MutationObserverOptions<
   TData = unknown,
   TError = unknown,
   TVariables = void,
   TContext = unknown
-> extends MutateOptions<TData, TError, TVariables, TContext> {
-  onMutate?: (variables: TVariables) => Promise<TContext> | TContext
+> extends MutationOptions<TData, TError, TVariables, TContext> {
   useErrorBoundary?: boolean
-  suspense?: boolean
+}
+
+export interface MutateOptions<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> {
+  onSuccess?: (
+    data: TData,
+    variables: TVariables,
+    context: TContext | undefined
+  ) => Promise<void> | void
+  onError?: (
+    error: TError,
+    variables: TVariables,
+    context: TContext | undefined
+  ) => Promise<void> | void
+  onSettled?: (
+    data: TData | undefined,
+    error: TError | null,
+    variables: TVariables,
+    context: TContext | undefined
+  ) => Promise<void> | void
+}
+
+export type MutateFunction<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> = (
+  variables: TVariables,
+  options?: MutateOptions<TData, TError, TVariables, TContext>
+) => Promise<TData>
+
+export interface MutationObserverResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> extends MutationState<TData, TError, TVariables, TContext> {
+  isError: boolean
+  isIdle: boolean
+  isLoading: boolean
+  isSuccess: boolean
+  mutate: MutateFunction<TData, TError, TVariables, TContext>
+  reset: () => void
 }
 
 export interface DefaultOptions<TError = unknown> {
   queries?: QueryObserverOptions<unknown, TError>
-  mutations?: MutationOptions<unknown, TError, unknown, unknown>
+  mutations?: MutationObserverOptions<unknown, TError, unknown, unknown>
 }
diff --git a/src/core/utils.ts b/src/core/utils.ts
index bd63f58a41..dd71a6beb2 100644
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -1,5 +1,8 @@
 import type { Query } from './query'
 import type {
+  MutationFunction,
+  MutationKey,
+  MutationOptions,
   QueryFunction,
   QueryKey,
   QueryKeyHashFunction,
@@ -18,10 +21,6 @@ export interface QueryFilters {
    * Match query key exactly
    */
   exact?: boolean
-  /**
-   * Include or exclude fresh queries
-   */
-  fresh?: boolean
   /**
    * Include or exclude inactive queries
    */
@@ -85,38 +84,14 @@ export function functionalUpdate<TInput, TOutput>(
     : updater
 }
 
-export function defaultRetryDelay(attempt: number) {
-  return Math.min(1000 * 2 ** attempt, 30000)
-}
-
 export function isValidTimeout(value: any): value is number {
   return typeof value === 'number' && value >= 0 && value !== Infinity
 }
 
-export function isDocumentVisible(): boolean {
-  // document global can be unavailable in react native
-  if (typeof document === 'undefined') {
-    return true
-  }
-  return [undefined, 'visible', 'prerender'].includes(document.visibilityState)
-}
-
-function isOnline(): boolean {
-  return navigator.onLine === undefined || navigator.onLine
-}
-
-export function isVisibleAndOnline(): boolean {
-  return isDocumentVisible() && isOnline()
-}
-
 export function ensureArray<T>(value: T | T[]): T[] {
   return Array.isArray(value) ? value : [value]
 }
 
-export function uniq<T>(array: T[]): T[] {
-  return array.filter((value, i) => array.indexOf(value) === i)
-}
-
 export function difference<T>(array1: T[], array2: T[]): T[] {
   return array1.filter(x => array2.indexOf(x) === -1)
 }
@@ -147,6 +122,27 @@ export function parseQueryArgs<TOptions extends QueryOptions<any, any>>(
   return { ...arg2, queryKey: arg1 } as TOptions
 }
 
+export function parseMutationArgs<
+  TOptions extends MutationOptions<any, any, any, any>
+>(
+  arg1: MutationKey | MutationFunction<any, any> | TOptions,
+  arg2?: MutationFunction<any, any> | TOptions,
+  arg3?: TOptions
+): TOptions {
+  if (isQueryKey(arg1)) {
+    if (typeof arg2 === 'function') {
+      return { ...arg3, mutationKey: arg1, mutationFn: arg2 } as TOptions
+    }
+    return { ...arg2, mutationKey: arg1 } as TOptions
+  }
+
+  if (typeof arg1 === 'function') {
+    return { ...arg2, mutationFn: arg1 } as TOptions
+  }
+
+  return { ...arg1 } as TOptions
+}
+
 export function parseFilterArgs<
   TFilters extends QueryFilters,
   TOptions = unknown
@@ -168,7 +164,6 @@ export function matchQuery(
     active,
     exact,
     fetching,
-    fresh,
     inactive,
     predicate,
     queryKey,
@@ -181,9 +176,7 @@ export function matchQuery(
       if (query.queryHash !== hashFn(queryKey)) {
         return false
       }
-    } else if (
-      !partialDeepEqual(ensureArray(query.queryKey), ensureArray(queryKey))
-    ) {
+    } else if (!partialMatchKey(query.queryKey, queryKey)) {
       return false
     }
   }
@@ -200,15 +193,7 @@ export function matchQuery(
     return false
   }
 
-  let isStale
-
-  if (fresh === false || (stale && !fresh)) {
-    isStale = true
-  } else if (stale === false || (fresh && !stale)) {
-    isStale = false
-  }
-
-  if (typeof isStale === 'boolean' && query.isStale() !== isStale) {
+  if (typeof stale === 'boolean' && query.isStale() !== stale) {
     return false
   }
 
@@ -252,6 +237,16 @@ export function stableValueHash(value: any): string {
   )
 }
 
+/**
+ * Checks if key `b` partially matches with key `a`.
+ */
+export function partialMatchKey(
+  a: string | unknown[],
+  b: string | unknown[]
+): boolean {
+  return partialDeepEqual(ensureArray(a), ensureArray(b))
+}
+
 /**
  * Checks if `b` partially matches with `a`.
  */
diff --git a/src/hydration/hydration.ts b/src/hydration/hydration.ts
index 8c300966e5..3f82050551 100644
--- a/src/hydration/hydration.ts
+++ b/src/hydration/hydration.ts
@@ -1,34 +1,29 @@
-import { Query } from '../core/query'
-import { QueryCache } from '../core/queryCache'
-import { QueryKey, QueryOptions } from '../core/types'
+import type { QueryClient } from '../core/queryClient'
+import { Query, QueryState } from '../core/query'
+import type { QueryKey, QueryOptions } from '../core/types'
 
 // TYPES
 
 export interface DehydrateOptions {
-  shouldDehydrate?: ShouldDehydrateFunction
+  shouldDehydrateQuery?: ShouldDehydrateQueryFunction
 }
 
 export interface HydrateOptions {
   defaultOptions?: QueryOptions
 }
 
-interface DehydratedQueryConfig {
-  cacheTime: number
-}
-
 interface DehydratedQuery {
-  queryKey: QueryKey
+  cacheTime: number
   queryHash: string
-  data?: unknown
-  updatedAt: number
-  config: DehydratedQueryConfig
+  queryKey: QueryKey
+  state: QueryState
 }
 
 export interface DehydratedState {
-  queries: Array<DehydratedQuery>
+  queries: DehydratedQuery[]
 }
 
-export type ShouldDehydrateFunction = (query: Query) => boolean
+export type ShouldDehydrateQueryFunction = (query: Query) => boolean
 
 // FUNCTIONS
 
@@ -46,13 +41,10 @@ function deserializePositiveNumber(value: number): number {
 // in the html-payload, but not consume it on the initial render.
 function dehydrateQuery(query: Query): DehydratedQuery {
   return {
-    config: {
-      cacheTime: serializePositiveNumber(query.cacheTime),
-    },
-    data: query.state.data,
+    cacheTime: serializePositiveNumber(query.cacheTime),
+    state: query.state,
     queryKey: query.queryKey,
     queryHash: query.queryHash,
-    updatedAt: query.state.updatedAt,
   }
 }
 
@@ -61,25 +53,30 @@ function defaultShouldDehydrate(query: Query) {
 }
 
 export function dehydrate(
-  cache: QueryCache,
+  client: QueryClient,
   options?: DehydrateOptions
 ): DehydratedState {
   options = options || {}
 
-  const shouldDehydrate = options.shouldDehydrate || defaultShouldDehydrate
+  const shouldDehydrateQuery =
+    options.shouldDehydrateQuery || defaultShouldDehydrate
+
   const queries: DehydratedQuery[] = []
 
-  cache.getAll().forEach(query => {
-    if (shouldDehydrate(query)) {
-      queries.push(dehydrateQuery(query))
-    }
-  })
+  client
+    .getQueryCache()
+    .getAll()
+    .forEach(query => {
+      if (shouldDehydrateQuery(query)) {
+        queries.push(dehydrateQuery(query))
+      }
+    })
 
   return { queries }
 }
 
 export function hydrate(
-  cache: QueryCache,
+  client: QueryClient,
   dehydratedState: unknown,
   options?: HydrateOptions
 ): void {
@@ -87,34 +84,30 @@ export function hydrate(
     return
   }
 
-  const defaultOptions = options?.defaultOptions || {}
+  const queryCache = client.getQueryCache()
   const queries = (dehydratedState as DehydratedState).queries || []
 
   queries.forEach(dehydratedQuery => {
-    let query = cache.get(dehydratedQuery.queryHash)
+    const query = queryCache.get(dehydratedQuery.queryHash)
 
     // Do not hydrate if an existing query exists with newer data
-    if (query && query.state.updatedAt >= dehydratedQuery.updatedAt) {
+    if (query) {
+      if (query.state.updatedAt < dehydratedQuery.state.updatedAt) {
+        query.setState(dehydratedQuery.state)
+      }
       return
     }
 
-    if (!query) {
-      query = new Query({
-        cache: cache,
+    // Restore query
+    queryCache.build(
+      client,
+      {
+        ...options?.defaultOptions,
         queryKey: dehydratedQuery.queryKey,
         queryHash: dehydratedQuery.queryHash,
-        options: {
-          ...defaultOptions,
-          cacheTime: deserializePositiveNumber(
-            dehydratedQuery.config.cacheTime
-          ),
-        },
-      })
-      cache.add(query)
-    }
-
-    query.setData(dehydratedQuery.data, {
-      updatedAt: dehydratedQuery.updatedAt,
-    })
+        cacheTime: deserializePositiveNumber(dehydratedQuery.cacheTime),
+      },
+      dehydratedQuery.state
+    )
   })
 }
diff --git a/src/hydration/index.ts b/src/hydration/index.ts
index a04758d743..a52521402d 100644
--- a/src/hydration/index.ts
+++ b/src/hydration/index.ts
@@ -6,6 +6,6 @@ export type {
   DehydrateOptions,
   DehydratedState,
   HydrateOptions,
-  ShouldDehydrateFunction,
+  ShouldDehydrateQueryFunction,
 } from './hydration'
 export type { HydrateProps } from './react'
diff --git a/src/hydration/react.tsx b/src/hydration/react.tsx
index 451ae4ea10..bd9971dbcc 100644
--- a/src/hydration/react.tsx
+++ b/src/hydration/react.tsx
@@ -4,8 +4,7 @@ import { useQueryClient } from '../react'
 import { hydrate, HydrateOptions } from './hydration'
 
 export function useHydrate(state: unknown, options?: HydrateOptions) {
-  const client = useQueryClient()
-  const cache = client.getCache()
+  const queryClient = useQueryClient()
 
   const optionsRef = React.useRef(options)
   optionsRef.current = options
@@ -15,9 +14,9 @@ export function useHydrate(state: unknown, options?: HydrateOptions) {
   // relying on useMemo here is only a performance optimization
   React.useMemo(() => {
     if (state) {
-      hydrate(cache, state, optionsRef.current)
+      hydrate(queryClient, state, optionsRef.current)
     }
-  }, [cache, state])
+  }, [queryClient, state])
 }
 
 export interface HydrateProps {
diff --git a/src/hydration/tests/hydration.test.tsx b/src/hydration/tests/hydration.test.tsx
index 03ab816d1d..44858ce890 100644
--- a/src/hydration/tests/hydration.test.tsx
+++ b/src/hydration/tests/hydration.test.tsx
@@ -9,24 +9,25 @@ async function fetchData<TData>(value: TData, ms?: number): Promise<TData> {
 
 describe('dehydration and rehydration', () => {
   test('should work with serializeable values', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery('string', () => fetchData('string'))
-    await client.prefetchQuery('number', () => fetchData(1))
-    await client.prefetchQuery('boolean', () => fetchData(true))
-    await client.prefetchQuery('null', () => fetchData(null))
-    await client.prefetchQuery('array', () => fetchData(['string', 0]))
-    await client.prefetchQuery('nested', () =>
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery('string', () => fetchData('string'))
+    await queryClient.prefetchQuery('number', () => fetchData(1))
+    await queryClient.prefetchQuery('boolean', () => fetchData(true))
+    await queryClient.prefetchQuery('null', () => fetchData(null))
+    await queryClient.prefetchQuery('array', () => fetchData(['string', 0]))
+    await queryClient.prefetchQuery('nested', () =>
       fetchData({ key: [{ nestedKey: 1 }] })
     )
-    const dehydrated = dehydrate(cache)
+    const dehydrated = dehydrate(queryClient)
     const stringified = JSON.stringify(dehydrated)
 
     // ---
 
     const parsed = JSON.parse(stringified)
     const hydrationCache = new QueryCache()
-    hydrate(hydrationCache, parsed)
+    const hydrationClient = new QueryClient({ queryCache: hydrationCache })
+    hydrate(hydrationClient, parsed)
     expect(hydrationCache.find('string')?.state.data).toBe('string')
     expect(hydrationCache.find('number')?.state.data).toBe(1)
     expect(hydrationCache.find('boolean')?.state.data).toBe(true)
@@ -37,7 +38,6 @@ describe('dehydration and rehydration', () => {
     })
 
     const fetchDataAfterHydration = jest.fn()
-    const hydrationClient = new QueryClient({ cache: hydrationCache })
     await hydrationClient.prefetchQuery('string', fetchDataAfterHydration, {
       staleTime: 1000,
     })
@@ -58,17 +58,17 @@ describe('dehydration and rehydration', () => {
     })
     expect(fetchDataAfterHydration).toHaveBeenCalledTimes(0)
 
-    cache.clear()
-    hydrationCache.clear()
+    queryClient.clear()
+    hydrationClient.clear()
   })
 
   test('should schedule garbage collection, measured from hydration', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery('string', () => fetchData('string'), {
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery('string', () => fetchData('string'), {
       cacheTime: 50,
     })
-    const dehydrated = dehydrate(cache)
+    const dehydrated = dehydrate(queryClient)
     const stringified = JSON.stringify(dehydrated)
 
     await sleep(20)
@@ -77,67 +77,71 @@ describe('dehydration and rehydration', () => {
 
     const parsed = JSON.parse(stringified)
     const hydrationCache = new QueryCache()
-    hydrate(hydrationCache, parsed)
+    const hydrationClient = new QueryClient({ queryCache: hydrationCache })
+    hydrate(hydrationClient, parsed)
     expect(hydrationCache.find('string')?.state.data).toBe('string')
     await sleep(30)
     expect(hydrationCache.find('string')).toBeTruthy()
     await sleep(30)
     expect(hydrationCache.find('string')).toBeFalsy()
 
-    cache.clear()
-    hydrationCache.clear()
+    queryClient.clear()
+    hydrationClient.clear()
   })
 
   test('should serialize the cacheTime correctly', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery('string', () => fetchData('string'), {
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery('string', () => fetchData('string'), {
       cacheTime: Infinity,
     })
-    const dehydrated = dehydrate(cache)
+    const dehydrated = dehydrate(queryClient)
     const stringified = JSON.stringify(dehydrated)
     const parsed = JSON.parse(stringified)
     const hydrationCache = new QueryCache()
-    hydrate(hydrationCache, parsed)
+    const hydrationClient = new QueryClient({ queryCache: hydrationCache })
+    hydrate(hydrationClient, parsed)
     expect(hydrationCache.find('string')?.cacheTime).toBe(Infinity)
-    cache.clear()
-    hydrationCache.clear()
+    queryClient.clear()
+    hydrationClient.clear()
   })
 
   test('should be able to provide default options for the hydrated queries', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery('string', () => fetchData('string'))
-    const dehydrated = dehydrate(cache)
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery('string', () => fetchData('string'))
+    const dehydrated = dehydrate(queryClient)
     const stringified = JSON.stringify(dehydrated)
     const parsed = JSON.parse(stringified)
     const hydrationCache = new QueryCache()
-    hydrate(hydrationCache, parsed, { defaultOptions: { retry: 10 } })
+    const hydrationClient = new QueryClient({ queryCache: hydrationCache })
+    hydrate(hydrationClient, parsed, { defaultOptions: { retry: 10 } })
     expect(hydrationCache.find('string')?.options.retry).toBe(10)
-    cache.clear()
-    hydrationCache.clear()
+    queryClient.clear()
+    hydrationClient.clear()
   })
 
   test('should work with complex keys', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery(['string', { key: ['string'], key2: 0 }], () =>
-      fetchData('string')
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery(
+      ['string', { key: ['string'], key2: 0 }],
+      () => fetchData('string')
     )
-    const dehydrated = dehydrate(cache)
+    const dehydrated = dehydrate(queryClient)
     const stringified = JSON.stringify(dehydrated)
 
     // ---
 
     const parsed = JSON.parse(stringified)
     const hydrationCache = new QueryCache()
-    hydrate(hydrationCache, parsed)
+    const hydrationClient = new QueryClient({ queryCache: hydrationCache })
+    hydrate(hydrationClient, parsed)
     expect(
       hydrationCache.find(['string', { key: ['string'], key2: 0 }])?.state.data
     ).toBe('string')
 
     const fetchDataAfterHydration = jest.fn()
-    const hydrationClient = new QueryClient({ cache: hydrationCache })
     await hydrationClient.prefetchQuery(
       ['string', { key: ['string'], key2: 0 }],
       fetchDataAfterHydration,
@@ -145,46 +149,47 @@ describe('dehydration and rehydration', () => {
     )
     expect(fetchDataAfterHydration).toHaveBeenCalledTimes(0)
 
-    cache.clear()
-    hydrationCache.clear()
+    queryClient.clear()
+    hydrationClient.clear()
   })
 
   test('should only hydrate successful queries by default', async () => {
     const consoleMock = jest.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery('success', () => fetchData('success'))
-    client.prefetchQuery('loading', () => fetchData('loading', 10000))
-    await client.prefetchQuery('error', () => {
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery('success', () => fetchData('success'))
+    queryClient.prefetchQuery('loading', () => fetchData('loading', 10000))
+    await queryClient.prefetchQuery('error', () => {
       throw new Error()
     })
-    const dehydrated = dehydrate(cache)
+    const dehydrated = dehydrate(queryClient)
     const stringified = JSON.stringify(dehydrated)
 
     // ---
 
     const parsed = JSON.parse(stringified)
     const hydrationCache = new QueryCache()
-    hydrate(hydrationCache, parsed)
+    const hydrationClient = new QueryClient({ queryCache: hydrationCache })
+    hydrate(hydrationClient, parsed)
 
     expect(hydrationCache.find('success')).toBeTruthy()
     expect(hydrationCache.find('loading')).toBeFalsy()
     expect(hydrationCache.find('error')).toBeFalsy()
 
-    cache.clear()
-    hydrationCache.clear()
+    queryClient.clear()
+    hydrationClient.clear()
     consoleMock.mockRestore()
   })
 
-  test('should filter queries via shouldDehydrate', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery('string', () => fetchData('string'))
-    await client.prefetchQuery('number', () => fetchData(1))
-    const dehydrated = dehydrate(cache, {
-      shouldDehydrate: query => query.queryKey !== 'string',
+  test('should filter queries via shouldDehydrateQuery', async () => {
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery('string', () => fetchData('string'))
+    await queryClient.prefetchQuery('number', () => fetchData(1))
+    const dehydrated = dehydrate(queryClient, {
+      shouldDehydrateQuery: query => query.queryKey !== 'string',
     })
 
     // This is testing implementation details that can change and are not
@@ -200,59 +205,64 @@ describe('dehydration and rehydration', () => {
 
     const parsed = JSON.parse(stringified)
     const hydrationCache = new QueryCache()
-    hydrate(hydrationCache, parsed)
+    const hydrationClient = new QueryClient({ queryCache: hydrationCache })
+    hydrate(hydrationClient, parsed)
     expect(hydrationCache.find('string')).toBeUndefined()
     expect(hydrationCache.find('number')?.state.data).toBe(1)
 
-    cache.clear()
-    hydrationCache.clear()
+    queryClient.clear()
+    hydrationClient.clear()
   })
 
   test('should not overwrite query in cache if hydrated query is older', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery('string', () => fetchData('string-older', 5))
-    const dehydrated = dehydrate(cache)
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery('string', () =>
+      fetchData('string-older', 5)
+    )
+    const dehydrated = dehydrate(queryClient)
     const stringified = JSON.stringify(dehydrated)
 
     // ---
 
     const parsed = JSON.parse(stringified)
     const hydrationCache = new QueryCache()
-    const hydrationClient = new QueryClient({ cache: hydrationCache })
+    const hydrationClient = new QueryClient({ queryCache: hydrationCache })
     await hydrationClient.prefetchQuery('string', () =>
       fetchData('string-newer', 5)
     )
 
-    hydrate(hydrationCache, parsed)
+    hydrate(hydrationClient, parsed)
     expect(hydrationCache.find('string')?.state.data).toBe('string-newer')
 
-    cache.clear()
-    hydrationCache.clear()
+    queryClient.clear()
+    hydrationClient.clear()
   })
 
   test('should overwrite query in cache if hydrated query is newer', async () => {
     const hydrationCache = new QueryCache()
-    const hydrationClient = new QueryClient({ cache: hydrationCache })
+    const hydrationClient = new QueryClient({ queryCache: hydrationCache })
     await hydrationClient.prefetchQuery('string', () =>
       fetchData('string-older', 5)
     )
 
     // ---
 
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery('string', () => fetchData('string-newer', 5))
-    const dehydrated = dehydrate(cache)
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery('string', () =>
+      fetchData('string-newer', 5)
+    )
+    const dehydrated = dehydrate(queryClient)
     const stringified = JSON.stringify(dehydrated)
 
     // ---
 
     const parsed = JSON.parse(stringified)
-    hydrate(hydrationCache, parsed)
+    hydrate(hydrationClient, parsed)
     expect(hydrationCache.find('string')?.state.data).toBe('string-newer')
 
-    cache.clear()
-    hydrationCache.clear()
+    queryClient.clear()
+    hydrationClient.clear()
   })
 })
diff --git a/src/hydration/tests/react.test.tsx b/src/hydration/tests/react.test.tsx
index 25649ff40c..47871e344d 100644
--- a/src/hydration/tests/react.test.tsx
+++ b/src/hydration/tests/react.test.tsx
@@ -12,19 +12,19 @@ describe('React hydration', () => {
   let stringifiedState: string
 
   beforeAll(async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
-    await client.prefetchQuery('string', dataQuery)
-    const dehydrated = dehydrate(cache)
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    await queryClient.prefetchQuery('string', dataQuery)
+    const dehydrated = dehydrate(queryClient)
     stringifiedState = JSON.stringify(dehydrated)
-    cache.clear()
+    queryClient.clear()
   })
 
   describe('useHydrate', () => {
     test('should hydrate queries to the cache on context', async () => {
       const dehydratedState = JSON.parse(stringifiedState)
-      const cache = new QueryCache()
-      const client = new QueryClient({ cache })
+      const queryCache = new QueryCache()
+      const queryClient = new QueryClient({ queryCache })
 
       function Page() {
         useHydrate(dehydratedState)
@@ -37,22 +37,22 @@ describe('React hydration', () => {
       }
 
       const rendered = render(
-        <QueryClientProvider client={client}>
+        <QueryClientProvider client={queryClient}>
           <Page />
         </QueryClientProvider>
       )
 
       await sleep(10)
       rendered.getByText('string')
-      cache.clear()
+      queryClient.clear()
     })
   })
 
   describe('ReactQueryCacheProvider with hydration support', () => {
     test('should hydrate new queries if queries change', async () => {
       const dehydratedState = JSON.parse(stringifiedState)
-      const cache = new QueryCache()
-      const client = new QueryClient({ cache })
+      const queryCache = new QueryCache()
+      const queryClient = new QueryClient({ queryCache })
 
       function Page({ queryKey }: { queryKey: string }) {
         const { data } = useQuery(queryKey, dataQuery)
@@ -64,7 +64,7 @@ describe('React hydration', () => {
       }
 
       const rendered = render(
-        <QueryClientProvider client={client}>
+        <QueryClientProvider client={queryClient}>
           <Hydrate state={dehydratedState}>
             <Page queryKey={'string'} />
           </Hydrate>
@@ -75,16 +75,18 @@ describe('React hydration', () => {
       rendered.getByText('string')
 
       const intermediateCache = new QueryCache()
-      const intermediateClient = new QueryClient({ cache: intermediateCache })
+      const intermediateClient = new QueryClient({
+        queryCache: intermediateCache,
+      })
       await intermediateClient.prefetchQuery('string', () =>
         dataQuery('should change')
       )
       await intermediateClient.prefetchQuery('added string', dataQuery)
-      const dehydrated = dehydrate(intermediateCache)
-      intermediateCache.clear()
+      const dehydrated = dehydrate(intermediateClient)
+      intermediateClient.clear()
 
       rendered.rerender(
-        <QueryClientProvider client={client}>
+        <QueryClientProvider client={queryClient}>
           <Hydrate state={dehydrated}>
             <Page queryKey={'string'} />
             <Page queryKey={'added string'} />
@@ -99,13 +101,13 @@ describe('React hydration', () => {
       // New query data should be available immediately
       rendered.getByText('added string')
 
-      cache.clear()
+      queryClient.clear()
     })
 
     test('should hydrate queries to new cache if cache changes', async () => {
       const dehydratedState = JSON.parse(stringifiedState)
-      const cache = new QueryCache()
-      const client = new QueryClient({ cache })
+      const queryCache = new QueryCache()
+      const queryClient = new QueryClient({ queryCache })
 
       function Page() {
         const { data } = useQuery('string', dataQuery)
@@ -117,7 +119,7 @@ describe('React hydration', () => {
       }
 
       const rendered = render(
-        <QueryClientProvider client={client}>
+        <QueryClientProvider client={queryClient}>
           <Hydrate state={dehydratedState}>
             <Page />
           </Hydrate>
@@ -129,7 +131,7 @@ describe('React hydration', () => {
 
       const newClientQueryCache = new QueryCache()
       const newClientQueryClient = new QueryClient({
-        cache: newClientQueryCache,
+        queryCache: newClientQueryCache,
       })
 
       rendered.rerender(
@@ -143,8 +145,8 @@ describe('React hydration', () => {
       await sleep(10)
       rendered.getByText('string')
 
-      cache.clear()
-      newClientQueryCache.clear()
+      queryClient.clear()
+      newClientQueryClient.clear()
     })
   })
 })
diff --git a/src/hydration/tests/ssr.test.tsx b/src/hydration/tests/ssr.test.tsx
index fbeeaafc0d..aff7e8642c 100644
--- a/src/hydration/tests/ssr.test.tsx
+++ b/src/hydration/tests/ssr.test.tsx
@@ -40,21 +40,21 @@ describe('Server side rendering with de/rehydration', () => {
     setIsServer(true)
 
     const prefetchCache = new QueryCache()
-    const prefetchClient = new QueryClient({ cache: prefetchCache })
+    const prefetchClient = new QueryClient({ queryCache: prefetchCache })
     await prefetchClient.prefetchQuery('success', () =>
       fetchDataSuccess('success')
     )
-    const dehydratedStateServer = dehydrate(prefetchCache)
+    const dehydratedStateServer = dehydrate(prefetchClient)
     const renderCache = new QueryCache()
-    hydrate(renderCache, dehydratedStateServer)
-    const renderClient = new QueryClient({ cache: renderCache })
+    const renderClient = new QueryClient({ queryCache: renderCache })
+    hydrate(renderClient, dehydratedStateServer)
     const markup = ReactDOMServer.renderToString(
       <QueryClientProvider client={renderClient}>
         <SuccessComponent />
       </QueryClientProvider>
     )
     const stringifiedState = JSON.stringify(dehydratedStateServer)
-    renderCache.clear()
+    renderClient.clear()
     setIsServer(false)
 
     const expectedMarkup =
@@ -66,12 +66,12 @@ describe('Server side rendering with de/rehydration', () => {
     const el = document.createElement('div')
     el.innerHTML = markup
 
-    const cache = new QueryCache()
-    hydrate(cache, JSON.parse(stringifiedState))
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    hydrate(queryClient, JSON.parse(stringifiedState))
 
     ReactDOM.hydrate(
-      <QueryClientProvider client={client}>
+      <QueryClientProvider client={queryClient}>
         <SuccessComponent />
       </QueryClientProvider>,
       el
@@ -84,7 +84,7 @@ describe('Server side rendering with de/rehydration', () => {
 
     ReactDOM.unmountComponentAtNode(el)
     consoleMock.mockRestore()
-    cache.clear()
+    queryClient.clear()
   })
 
   it('should not mismatch on error', async () => {
@@ -104,19 +104,19 @@ describe('Server side rendering with de/rehydration', () => {
     // -- Server part --
     setIsServer(true)
     const prefetchCache = new QueryCache()
-    const prefetchClient = new QueryClient({ cache: prefetchCache })
+    const prefetchClient = new QueryClient({ queryCache: prefetchCache })
     await prefetchClient.prefetchQuery('error', () => fetchDataError())
-    const dehydratedStateServer = dehydrate(prefetchCache)
+    const dehydratedStateServer = dehydrate(prefetchClient)
     const renderCache = new QueryCache()
-    hydrate(renderCache, dehydratedStateServer)
-    const renderClient = new QueryClient({ cache: renderCache })
+    const renderClient = new QueryClient({ queryCache: renderCache })
+    hydrate(renderClient, dehydratedStateServer)
     const markup = ReactDOMServer.renderToString(
       <QueryClientProvider client={renderClient}>
         <ErrorComponent />
       </QueryClientProvider>
     )
     const stringifiedState = JSON.stringify(dehydratedStateServer)
-    renderCache.clear()
+    renderClient.clear()
     setIsServer(false)
 
     const expectedMarkup =
@@ -128,12 +128,12 @@ describe('Server side rendering with de/rehydration', () => {
     const el = document.createElement('div')
     el.innerHTML = markup
 
-    const cache = new QueryCache()
-    hydrate(cache, JSON.parse(stringifiedState))
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    hydrate(queryClient, JSON.parse(stringifiedState))
 
     ReactDOM.hydrate(
-      <QueryClientProvider client={client}>
+      <QueryClientProvider client={queryClient}>
         <ErrorComponent />
       </QueryClientProvider>,
       el
@@ -151,7 +151,7 @@ describe('Server side rendering with de/rehydration', () => {
 
     ReactDOM.unmountComponentAtNode(el)
     consoleMock.mockRestore()
-    cache.clear()
+    queryClient.clear()
   })
 
   it('should not mismatch on queries that were not prefetched', async () => {
@@ -170,17 +170,18 @@ describe('Server side rendering with de/rehydration', () => {
     setIsServer(true)
 
     const prefetchCache = new QueryCache()
-    const dehydratedStateServer = dehydrate(prefetchCache)
+    const prefetchClient = new QueryClient({ queryCache: prefetchCache })
+    const dehydratedStateServer = dehydrate(prefetchClient)
     const renderCache = new QueryCache()
-    hydrate(renderCache, dehydratedStateServer)
-    const renderClient = new QueryClient({ cache: renderCache })
+    const renderClient = new QueryClient({ queryCache: renderCache })
+    hydrate(renderClient, dehydratedStateServer)
     const markup = ReactDOMServer.renderToString(
       <QueryClientProvider client={renderClient}>
         <SuccessComponent />
       </QueryClientProvider>
     )
     const stringifiedState = JSON.stringify(dehydratedStateServer)
-    renderCache.clear()
+    renderClient.clear()
     setIsServer(false)
 
     const expectedMarkup =
@@ -192,12 +193,12 @@ describe('Server side rendering with de/rehydration', () => {
     const el = document.createElement('div')
     el.innerHTML = markup
 
-    const cache = new QueryCache()
-    hydrate(cache, JSON.parse(stringifiedState))
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
+    hydrate(queryClient, JSON.parse(stringifiedState))
 
     ReactDOM.hydrate(
-      <QueryClientProvider client={client}>
+      <QueryClientProvider client={queryClient}>
         <SuccessComponent />
       </QueryClientProvider>,
       el
@@ -215,6 +216,6 @@ describe('Server side rendering with de/rehydration', () => {
 
     ReactDOM.unmountComponentAtNode(el)
     consoleMock.mockRestore()
-    cache.clear()
+    queryClient.clear()
   })
 })
diff --git a/src/react/setBatchUpdatesFn.ts b/src/react/setBatchUpdatesFn.ts
index 32d3df1c20..acd3d0f9b6 100644
--- a/src/react/setBatchUpdatesFn.ts
+++ b/src/react/setBatchUpdatesFn.ts
@@ -1,4 +1,4 @@
-import { setBatchNotifyFn } from '../core'
+import { notifyManager } from '../core'
 import { unstable_batchedUpdates } from './reactBatchedUpdates'
 
-setBatchNotifyFn(unstable_batchedUpdates)
+notifyManager.setBatchNotifyFunction(unstable_batchedUpdates)
diff --git a/src/react/tests/QueryClientProvider.test.tsx b/src/react/tests/QueryClientProvider.test.tsx
index 1f36b0b777..36b80664cb 100644
--- a/src/react/tests/QueryClientProvider.test.tsx
+++ b/src/react/tests/QueryClientProvider.test.tsx
@@ -8,8 +8,8 @@ describe('QueryClientProvider', () => {
   test('sets a specific cache for all queries to use', async () => {
     const key = queryKey()
 
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
 
     function Page() {
       const { data } = useQuery(key, async () => {
@@ -25,25 +25,25 @@ describe('QueryClientProvider', () => {
     }
 
     const rendered = render(
-      <QueryClientProvider client={client}>
+      <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     )
 
     await waitFor(() => rendered.getByText('test'))
 
-    expect(client.getCache().find(key)).toBeDefined()
+    expect(queryCache.find(key)).toBeDefined()
   })
 
   test('allows multiple caches to be partitioned', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
 
-    const cache1 = new QueryCache()
-    const cache2 = new QueryCache()
+    const queryCache1 = new QueryCache()
+    const queryCache2 = new QueryCache()
 
-    const client1 = new QueryClient({ cache: cache1 })
-    const client2 = new QueryClient({ cache: cache2 })
+    const queryClient1 = new QueryClient({ queryCache: queryCache1 })
+    const queryClient2 = new QueryClient({ queryCache: queryCache2 })
 
     function Page1() {
       const { data } = useQuery(key1, async () => {
@@ -72,10 +72,10 @@ describe('QueryClientProvider', () => {
 
     const rendered = render(
       <>
-        <QueryClientProvider client={client1}>
+        <QueryClientProvider client={queryClient1}>
           <Page1 />
         </QueryClientProvider>
-        <QueryClientProvider client={client2}>
+        <QueryClientProvider client={queryClient2}>
           <Page2 />
         </QueryClientProvider>
       </>
@@ -84,18 +84,18 @@ describe('QueryClientProvider', () => {
     await waitFor(() => rendered.getByText('test1'))
     await waitFor(() => rendered.getByText('test2'))
 
-    expect(cache1.find(key1)).toBeDefined()
-    expect(cache1.find(key2)).not.toBeDefined()
-    expect(cache2.find(key1)).not.toBeDefined()
-    expect(cache2.find(key2)).toBeDefined()
+    expect(queryCache1.find(key1)).toBeDefined()
+    expect(queryCache1.find(key2)).not.toBeDefined()
+    expect(queryCache2.find(key1)).not.toBeDefined()
+    expect(queryCache2.find(key2)).toBeDefined()
   })
 
   test("uses defaultOptions for queries when they don't provide their own config", async () => {
     const key = queryKey()
 
-    const cache = new QueryCache()
-    const client = new QueryClient({
-      cache,
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({
+      queryCache,
       defaultOptions: {
         queries: {
           cacheTime: Infinity,
@@ -117,14 +117,14 @@ describe('QueryClientProvider', () => {
     }
 
     const rendered = render(
-      <QueryClientProvider client={client}>
+      <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     )
 
     await waitFor(() => rendered.getByText('test'))
 
-    expect(cache.find(key)).toBeDefined()
-    expect(cache.find(key)?.options.cacheTime).toBe(Infinity)
+    expect(queryCache.find(key)).toBeDefined()
+    expect(queryCache.find(key)?.options.cacheTime).toBe(Infinity)
   })
 })
diff --git a/src/react/tests/QueryResetErrorBoundary.test.tsx b/src/react/tests/QueryResetErrorBoundary.test.tsx
index 2b6efa1112..79069be708 100644
--- a/src/react/tests/QueryResetErrorBoundary.test.tsx
+++ b/src/react/tests/QueryResetErrorBoundary.test.tsx
@@ -11,8 +11,8 @@ import {
 } from '../..'
 
 describe('QueryErrorResetBoundary', () => {
-  const cache = new QueryCache()
-  const client = new QueryClient({ cache })
+  const queryCache = new QueryCache()
+  const queryClient = new QueryClient({ queryCache })
 
   it('should retry fetch if the reset error boundary has been reset', async () => {
     const key = queryKey()
@@ -40,7 +40,7 @@ describe('QueryErrorResetBoundary', () => {
     }
 
     const rendered = renderWithClient(
-      client,
+      queryClient,
       <QueryErrorResetBoundary>
         {({ reset }) => (
           <ErrorBoundary
@@ -95,7 +95,7 @@ describe('QueryErrorResetBoundary', () => {
     }
 
     const rendered = renderWithClient(
-      client,
+      queryClient,
       <QueryErrorResetBoundary>
         {({ reset }) => (
           <ErrorBoundary
diff --git a/src/react/tests/ssr.test.tsx b/src/react/tests/ssr.test.tsx
index 265065310c..ed36c99f52 100644
--- a/src/react/tests/ssr.test.tsx
+++ b/src/react/tests/ssr.test.tsx
@@ -11,8 +11,8 @@ import { useQuery, QueryClient, QueryClientProvider, QueryCache } from '../..'
 
 describe('Server Side Rendering', () => {
   it('should not trigger fetch', () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
     const key = queryKey()
     const queryFn = jest.fn()
 
@@ -29,30 +29,30 @@ describe('Server Side Rendering', () => {
     }
 
     const markup = renderToString(
-      <QueryClientProvider client={client}>
+      <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     )
 
     expect(markup).toContain('status loading')
     expect(queryFn).toHaveBeenCalledTimes(0)
-    cache.clear()
+    queryCache.clear()
   })
 
   it('should add prefetched data to cache', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
     const key = queryKey()
     const fetchFn = () => Promise.resolve('data')
-    const data = await client.fetchQueryData(key, fetchFn)
+    const data = await queryClient.fetchQueryData(key, fetchFn)
     expect(data).toBe('data')
-    expect(client.getCache().find(key)?.state.data).toBe('data')
-    cache.clear()
+    expect(queryCache.find(key)?.state.data).toBe('data')
+    queryCache.clear()
   })
 
   it('should return existing data from the cache', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
     const key = queryKey()
     const queryFn = jest.fn(() => sleep(10))
 
@@ -68,24 +68,24 @@ describe('Server Side Rendering', () => {
       )
     }
 
-    await client.prefetchQuery(key, queryFn)
+    await queryClient.prefetchQuery(key, queryFn)
 
     const markup = renderToString(
-      <QueryClientProvider client={client}>
+      <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     )
 
     expect(markup).toContain('status success')
     expect(queryFn).toHaveBeenCalledTimes(1)
-    cache.clear()
+    queryCache.clear()
   })
 
   it('should add initialData to the cache', () => {
     const key = queryKey()
 
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
 
     function Page() {
       const [page, setPage] = React.useState(1)
@@ -106,14 +106,14 @@ describe('Server Side Rendering', () => {
     }
 
     renderToString(
-      <QueryClientProvider client={client}>
+      <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     )
 
-    const keys = cache.getAll().map(query => query.queryKey)
+    const keys = queryCache.getAll().map(query => query.queryKey)
 
     expect(keys).toEqual([[key, 1]])
-    cache.clear()
+    queryCache.clear()
   })
 })
diff --git a/src/react/tests/suspense.test.tsx b/src/react/tests/suspense.test.tsx
index 4f7e4bb87b..3c8c5df4b2 100644
--- a/src/react/tests/suspense.test.tsx
+++ b/src/react/tests/suspense.test.tsx
@@ -12,8 +12,8 @@ import {
 } from '../..'
 
 describe("useQuery's in Suspense mode", () => {
-  const cache = new QueryCache()
-  const client = new QueryClient({ cache })
+  const queryCache = new QueryCache()
+  const queryClient = new QueryClient({ queryCache })
 
   it('should not call the queryFn twice when used in Suspense mode', async () => {
     const key = queryKey()
@@ -28,7 +28,7 @@ describe("useQuery's in Suspense mode", () => {
     }
 
     const rendered = renderWithClient(
-      client,
+      queryClient,
       <React.Suspense fallback="loading">
         <Page />
       </React.Suspense>
@@ -59,22 +59,22 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    const rendered = renderWithClient(client, <App />)
+    const rendered = renderWithClient(queryClient, <App />)
 
     expect(rendered.queryByText('rendered')).toBeNull()
-    expect(cache.find(key)).toBeFalsy()
+    expect(queryCache.find(key)).toBeFalsy()
 
     fireEvent.click(rendered.getByLabelText('toggle'))
     await waitFor(() => rendered.getByText('rendered'))
 
     // @ts-expect-error
-    expect(cache.find(key)?.observers.length).toBe(1)
+    expect(queryCache.find(key)?.observers.length).toBe(1)
 
     fireEvent.click(rendered.getByLabelText('toggle'))
 
     expect(rendered.queryByText('rendered')).toBeNull()
     // @ts-expect-error
-    expect(cache.find(key)?.observers.length).toBe(0)
+    expect(queryCache.find(key)?.observers.length).toBe(0)
   })
 
   it('should call onSuccess on the first successful call', async () => {
@@ -92,7 +92,7 @@ describe("useQuery's in Suspense mode", () => {
     }
 
     const rendered = renderWithClient(
-      client,
+      queryClient,
       <React.Suspense fallback="loading">
         <Page />
       </React.Suspense>
@@ -128,7 +128,7 @@ describe("useQuery's in Suspense mode", () => {
     }
 
     const rendered = renderWithClient(
-      client,
+      queryClient,
       <React.Suspense fallback="loading">
         <FirstComponent />
         <SecondComponent />
@@ -170,7 +170,7 @@ describe("useQuery's in Suspense mode", () => {
     }
 
     const rendered = renderWithClient(
-      client,
+      queryClient,
       <QueryErrorResetBoundary>
         {({ reset }) => (
           <ErrorBoundary
@@ -236,7 +236,7 @@ describe("useQuery's in Suspense mode", () => {
     }
 
     const rendered = renderWithClient(
-      client,
+      queryClient,
       <QueryErrorResetBoundary>
         {({ reset }) => (
           <ErrorBoundary
@@ -325,7 +325,7 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    const rendered = renderWithClient(client, <App />)
+    const rendered = renderWithClient(queryClient, <App />)
 
     await waitFor(() => rendered.getByText('Loading...'))
     await waitFor(() => rendered.getByText('error boundary'))
@@ -354,7 +354,7 @@ describe("useQuery's in Suspense mode", () => {
     }
 
     const rendered = renderWithClient(
-      client,
+      queryClient,
       <React.Suspense fallback="loading">
         <Page />
       </React.Suspense>
diff --git a/src/react/tests/useInfiniteQuery.test.tsx b/src/react/tests/useInfiniteQuery.test.tsx
index 3eafb5b1f5..d851dfb824 100644
--- a/src/react/tests/useInfiniteQuery.test.tsx
+++ b/src/react/tests/useInfiniteQuery.test.tsx
@@ -40,8 +40,8 @@ const fetchItems = async (
 }
 
 describe('useInfiniteQuery', () => {
-  const cache = new QueryCache()
-  const client = new QueryClient({ cache })
+  const queryCache = new QueryCache()
+  const queryClient = new QueryClient({ queryCache })
 
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
@@ -59,7 +59,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -152,7 +152,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(noThrow).toBe(true))
     consoleMock.mockRestore()
@@ -193,7 +193,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(300)
 
@@ -262,7 +262,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -303,7 +303,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -356,7 +356,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -428,7 +428,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -520,7 +520,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -612,7 +612,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(300)
 
@@ -684,7 +684,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -734,7 +734,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -793,7 +793,7 @@ describe('useInfiniteQuery', () => {
 
       React.useEffect(() => {
         setActTimeout(() => {
-          client.setQueryData(key, [7, 8])
+          queryClient.setQueryData(key, [7, 8])
           setFirstPage(7)
         }, 20)
 
@@ -805,7 +805,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -873,7 +873,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -909,7 +909,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -945,7 +945,7 @@ describe('useInfiniteQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -1042,7 +1042,7 @@ describe('useInfiniteQuery', () => {
                     // makes an actual network request
                     // and calls invalidateQueries in an onSuccess
                     items.splice(4, 1)
-                    client.invalidateQueries(key)
+                    queryClient.invalidateQueries(key)
                   }}
                 >
                   Remove item
@@ -1055,7 +1055,7 @@ describe('useInfiniteQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     rendered.getByText('Loading...')
 
@@ -1182,7 +1182,7 @@ describe('useInfiniteQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     rendered.getByText('Loading...')
 
diff --git a/src/react/tests/useIsFetching.test.tsx b/src/react/tests/useIsFetching.test.tsx
index 629209c8a9..e1b523313e 100644
--- a/src/react/tests/useIsFetching.test.tsx
+++ b/src/react/tests/useIsFetching.test.tsx
@@ -13,8 +13,8 @@ import { useQuery, useIsFetching, QueryClient, QueryCache } from '../..'
 describe('useIsFetching', () => {
   // See https://github.com/tannerlinsley/react-query/issues/105
   it('should update as queries start and stop fetching', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
     const key = queryKey()
 
     function Page() {
@@ -41,7 +41,7 @@ describe('useIsFetching', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('isFetching: 0'))
     fireEvent.click(rendered.getByText('setReady'))
@@ -51,8 +51,8 @@ describe('useIsFetching', () => {
 
   it('should not update state while rendering', async () => {
     const consoleMock = mockConsoleError()
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
 
     const key1 = queryKey()
     const key2 = queryKey()
@@ -99,7 +99,7 @@ describe('useIsFetching', () => {
       )
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
     await waitFor(() => expect(isFetchings).toEqual([0, 0, 1, 2, 1, 0]))
     expect(consoleMock).not.toHaveBeenCalled()
     expect(consoleMock.mock.calls[0]?.[0] ?? '').not.toMatch('setState')
@@ -108,8 +108,8 @@ describe('useIsFetching', () => {
   })
 
   it('should be able to filter', async () => {
-    const cache = new QueryCache()
-    const client = new QueryClient({ cache })
+    const queryCache = new QueryCache()
+    const queryClient = new QueryClient({ queryCache })
     const key1 = queryKey()
     const key2 = queryKey()
 
@@ -154,7 +154,7 @@ describe('useIsFetching', () => {
       )
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
     expect(isFetchings).toEqual([0, 0, 1, 0])
diff --git a/src/react/tests/useMutation.test.tsx b/src/react/tests/useMutation.test.tsx
index 533da13c79..e038c259ca 100644
--- a/src/react/tests/useMutation.test.tsx
+++ b/src/react/tests/useMutation.test.tsx
@@ -1,17 +1,21 @@
 import { fireEvent, waitFor } from '@testing-library/react'
 import React from 'react'
 
-import { useMutation, QueryClient, QueryCache } from '../..'
+import { useMutation, QueryClient, QueryCache, MutationCache } from '../..'
+import { UseMutationResult } from '../types'
 import {
   mockConsoleError,
+  mockNavigatorOnLine,
+  queryKey,
   renderWithClient,
   setActTimeout,
   sleep,
 } from './utils'
 
 describe('useMutation', () => {
-  const cache = new QueryCache()
-  const client = new QueryClient({ cache })
+  const queryCache = new QueryCache()
+  const mutationCache = new MutationCache()
+  const queryClient = new QueryClient({ queryCache, mutationCache })
 
   it('should be able to reset `data`', async () => {
     function Page() {
@@ -28,7 +32,7 @@ describe('useMutation', () => {
       )
     }
 
-    const { getByTestId, getByText } = renderWithClient(client, <Page />)
+    const { getByTestId, getByText } = renderWithClient(queryClient, <Page />)
 
     expect(getByTestId('title').textContent).toBe('')
 
@@ -65,7 +69,7 @@ describe('useMutation', () => {
     }
 
     const { getByTestId, getByText, queryByTestId } = renderWithClient(
-      client,
+      queryClient,
       <Page />
     )
 
@@ -112,7 +116,7 @@ describe('useMutation', () => {
       )
     }
 
-    const { getByTestId, getByText } = renderWithClient(client, <Page />)
+    const { getByTestId, getByText } = renderWithClient(queryClient, <Page />)
 
     expect(getByTestId('title').textContent).toBe('0')
 
@@ -169,7 +173,7 @@ describe('useMutation', () => {
       )
     }
 
-    const { getByTestId, getByText } = renderWithClient(client, <Page />)
+    const { getByTestId, getByText } = renderWithClient(queryClient, <Page />)
 
     expect(getByTestId('title').textContent).toBe('0')
 
@@ -206,7 +210,7 @@ describe('useMutation', () => {
     consoleMock.mockRestore()
   })
 
-  it('should process all success callbacks in the correct order when using mutateAsync', async () => {
+  it('should be able to override the useMutation success callbacks', async () => {
     const callbacks: string[] = []
 
     function Page() {
@@ -238,20 +242,18 @@ describe('useMutation', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
     expect(callbacks).toEqual([
-      'useMutation.onSuccess',
-      'useMutation.onSettled',
       'mutateAsync.onSuccess',
       'mutateAsync.onSettled',
       'mutateAsync.result:todo',
     ])
   })
 
-  it('should process all error callbacks in the correct order when using mutateAsync', async () => {
+  it('should be able to override the error callbacks when using mutateAsync', async () => {
     const consoleMock = mockConsoleError()
 
     const callbacks: string[] = []
@@ -289,13 +291,11 @@ describe('useMutation', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
     expect(callbacks).toEqual([
-      'useMutation.onError',
-      'useMutation.onSettled',
       'mutateAsync.onError',
       'mutateAsync.onSettled',
       'mutateAsync.error:oops',
@@ -303,4 +303,153 @@ describe('useMutation', () => {
 
     consoleMock.mockRestore()
   })
+
+  it('should be able to use mutation defaults', async () => {
+    const key = queryKey()
+
+    queryClient.setMutationDefaults(key, {
+      mutationFn: async (text: string) => text,
+    })
+
+    const states: UseMutationResult<any, any, any, any>[] = []
+
+    function Page() {
+      const state = useMutation<string, unknown, string>(key)
+
+      states.push(state)
+
+      const { mutate } = state
+
+      React.useEffect(() => {
+        setActTimeout(() => {
+          mutate('todo')
+        }, 10)
+      }, [mutate])
+
+      return null
+    }
+
+    renderWithClient(queryClient, <Page />)
+
+    await sleep(100)
+
+    expect(states.length).toBe(3)
+    expect(states[0]).toMatchObject({ data: undefined, isLoading: false })
+    expect(states[1]).toMatchObject({ data: undefined, isLoading: true })
+    expect(states[2]).toMatchObject({ data: 'todo', isLoading: false })
+  })
+
+  it('should be able to retry a failed mutation', async () => {
+    const consoleMock = mockConsoleError()
+
+    let count = 0
+
+    function Page() {
+      const { mutate } = useMutation(
+        (_text: string) => {
+          count++
+          return Promise.reject('oops')
+        },
+        {
+          retry: 1,
+          retryDelay: 5,
+        }
+      )
+
+      React.useEffect(() => {
+        setActTimeout(() => {
+          mutate('todo')
+        }, 10)
+      }, [mutate])
+
+      return null
+    }
+
+    renderWithClient(queryClient, <Page />)
+
+    await sleep(100)
+
+    expect(count).toBe(2)
+
+    consoleMock.mockRestore()
+  })
+
+  it('should be able to retry a mutation when online', async () => {
+    const consoleMock = mockConsoleError()
+    mockNavigatorOnLine(false)
+
+    let count = 0
+    const states: UseMutationResult<any, any, any, any>[] = []
+
+    function Page() {
+      const state = useMutation(
+        (_text: string) => {
+          count++
+          return count > 1 ? Promise.resolve('data') : Promise.reject('oops')
+        },
+        {
+          retry: 1,
+          retryDelay: 5,
+        }
+      )
+
+      states.push(state)
+
+      const { mutate } = state
+
+      React.useEffect(() => {
+        setActTimeout(() => {
+          mutate('todo')
+        }, 10)
+      }, [mutate])
+
+      return null
+    }
+
+    renderWithClient(queryClient, <Page />)
+
+    await sleep(50)
+
+    expect(states.length).toBe(4)
+    expect(states[0]).toMatchObject({
+      isLoading: false,
+      isPaused: false,
+      failureCount: 0,
+    })
+    expect(states[1]).toMatchObject({
+      isLoading: true,
+      isPaused: false,
+      failureCount: 0,
+    })
+    expect(states[2]).toMatchObject({
+      isLoading: true,
+      isPaused: false,
+      failureCount: 1,
+    })
+    expect(states[3]).toMatchObject({
+      isLoading: true,
+      isPaused: true,
+      failureCount: 1,
+    })
+
+    mockNavigatorOnLine(true)
+    window.dispatchEvent(new Event('online'))
+
+    await sleep(50)
+
+    expect(states.length).toBe(6)
+    expect(states[4]).toMatchObject({
+      isLoading: true,
+      isPaused: false,
+      failureCount: 1,
+    })
+    expect(states[5]).toMatchObject({
+      isLoading: false,
+      isPaused: false,
+      failureCount: 1,
+      data: 'data',
+    })
+
+    consoleMock.mockRestore()
+  })
 })
diff --git a/src/react/tests/useQueries.test.tsx b/src/react/tests/useQueries.test.tsx
index e8906a6e83..2a0e6f8257 100644
--- a/src/react/tests/useQueries.test.tsx
+++ b/src/react/tests/useQueries.test.tsx
@@ -4,8 +4,8 @@ import { queryKey, renderWithClient, sleep } from './utils'
 import { useQueries, QueryClient, UseQueryResult, QueryCache } from '../..'
 
 describe('useQueries', () => {
-  const cache = new QueryCache()
-  const client = new QueryClient({ cache })
+  const queryCache = new QueryCache()
+  const queryClient = new QueryClient({ queryCache })
 
   it('should return the correct states', async () => {
     const key1 = queryKey()
@@ -21,7 +21,7 @@ describe('useQueries', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
diff --git a/src/react/tests/useQuery.test.tsx b/src/react/tests/useQuery.test.tsx
index 9f587b6118..3be25f0db3 100644
--- a/src/react/tests/useQuery.test.tsx
+++ b/src/react/tests/useQuery.test.tsx
@@ -13,8 +13,8 @@ import {
 import { useQuery, QueryClient, UseQueryResult, QueryCache } from '../..'
 
 describe('useQuery', () => {
-  const cache = new QueryCache()
-  const client = new QueryClient({ cache })
+  const queryCache = new QueryCache()
+  const queryClient = new QueryClient({ queryCache })
 
   it('should return the correct types', () => {
     const key = queryKey()
@@ -97,7 +97,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     rendered.getByText('default')
 
@@ -120,7 +120,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('Status: success'))
 
@@ -200,7 +200,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('Status: error'))
 
@@ -286,7 +286,7 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    await client.prefetchQuery(key, () => 'prefetched')
+    await queryClient.prefetchQuery(key, () => 'prefetched')
 
     function Page() {
       const state = useQuery(key, () => 'data')
@@ -294,7 +294,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
     expect(states.length).toBe(2)
@@ -322,7 +322,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
     expect(states.length).toBe(2)
@@ -351,7 +351,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(50)
     expect(onSuccess).toHaveBeenCalledTimes(1)
@@ -373,7 +373,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
     expect(states.length).toBe(2)
@@ -393,7 +393,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
     expect(states.length).toBe(2)
@@ -416,7 +416,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
     expect(states.length).toBe(2)
@@ -429,7 +429,7 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    client.setQueryDefaults(key, () => 'data')
+    queryClient.setQueryDefaults(key, { queryFn: () => 'data' })
 
     function Page() {
       const state = useQuery<string>(key)
@@ -437,7 +437,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -458,7 +458,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -471,7 +471,7 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    client.setQueryData(key, 'prefetched')
+    queryClient.setQueryData(key, 'prefetched')
 
     function Page() {
       const state = useQuery(key, () => 'test', {
@@ -481,7 +481,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -501,7 +501,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -524,7 +524,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -556,7 +556,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -590,7 +590,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(20)
 
@@ -631,7 +631,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(20)
 
@@ -681,7 +681,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(states.length).toBe(4))
 
@@ -706,7 +706,7 @@ describe('useQuery', () => {
     const key = queryKey()
     const results: UseQueryResult<string>[] = []
 
-    client.setQueryData(key, 'set')
+    queryClient.setQueryData(key, 'set')
 
     function Page() {
       const result = useQuery(key, () => 'fetched', { enabled: false })
@@ -715,14 +715,14 @@ describe('useQuery', () => {
 
       React.useEffect(() => {
         setActTimeout(() => {
-          client.refetchQueries(key)
+          queryClient.refetchQueries(key)
         }, 10)
       }, [])
 
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(50)
 
@@ -743,14 +743,14 @@ describe('useQuery', () => {
 
       React.useEffect(() => {
         setActTimeout(() => {
-          client.invalidateQueries(key)
+          queryClient.invalidateQueries(key)
         }, 10)
       }, [])
 
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -801,14 +801,14 @@ describe('useQuery', () => {
 
       React.useEffect(() => {
         setActTimeout(() => {
-          client.refetchQueries({ queryKey: key })
+          queryClient.refetchQueries({ queryKey: key })
         }, 20)
       }, [])
 
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -853,14 +853,14 @@ describe('useQuery', () => {
 
       React.useEffect(() => {
         setActTimeout(() => {
-          client.invalidateQueries(key)
+          queryClient.invalidateQueries(key)
         }, 20)
       }, [])
 
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -900,7 +900,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(states.length).toBe(5))
 
@@ -968,7 +968,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(states.length).toBe(5))
 
@@ -1044,7 +1044,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(states.length).toBe(7))
 
@@ -1103,7 +1103,7 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<number>[] = []
 
-    client.setQueryData([key, 10], 10)
+    queryClient.setQueryData([key, 10], 10)
 
     await sleep(10)
 
@@ -1138,7 +1138,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(states.length).toBe(7))
 
@@ -1226,7 +1226,7 @@ describe('useQuery', () => {
       )
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(states.length).toBe(4))
 
@@ -1250,7 +1250,7 @@ describe('useQuery', () => {
     const states1: UseQueryResult<string>[] = []
     const states2: UseQueryResult<string>[] = []
 
-    await client.prefetchQuery(key, () => 'prefetch')
+    await queryClient.prefetchQuery(key, () => 'prefetch')
 
     await sleep(20)
 
@@ -1279,7 +1279,7 @@ describe('useQuery', () => {
       )
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(200)
 
@@ -1340,7 +1340,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -1355,7 +1355,7 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
     const fn = jest.fn()
 
-    const unsubscribe = cache.subscribe(fn)
+    const unsubscribe = queryCache.subscribe(fn)
 
     function Page() {
       const state = useQuery(key, () => 'test', {
@@ -1365,7 +1365,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(20)
     unsubscribe()
@@ -1406,7 +1406,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(30)
 
@@ -1449,7 +1449,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     rendered.getByText('First Data: init')
     rendered.getByText('Second Data: init')
@@ -1476,9 +1476,9 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
-    expect(cache.find(key)!.options.queryFn).toBe(queryFn1)
+    expect(queryCache.find(key)!.options.queryFn).toBe(queryFn1)
   })
 
   it('should batch re-renders', async () => {
@@ -1498,7 +1498,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(20)
 
@@ -1534,7 +1534,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(20)
 
@@ -1564,7 +1564,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     // use "act" to wait for state update and prevent console warning
 
@@ -1586,7 +1586,7 @@ describe('useQuery', () => {
       return <div>status: {status}</div>
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     rendered.getByText('status: loading')
   })
@@ -1605,7 +1605,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     expect(queryFn).toHaveBeenCalledWith(key, variables)
   })
@@ -1626,7 +1626,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('default'))
 
@@ -1651,7 +1651,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -1680,7 +1680,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -1709,7 +1709,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -1730,7 +1730,7 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    await client.prefetchQuery(key, () => 'prefetched')
+    await queryClient.prefetchQuery(key, () => 'prefetched')
 
     function Page() {
       const state = useQuery(key, () => 'data', {
@@ -1741,7 +1741,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -1762,7 +1762,7 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    await client.prefetchQuery(key, () => 'prefetched')
+    await queryClient.prefetchQuery(key, () => 'prefetched')
 
     await sleep(10)
 
@@ -1775,7 +1775,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -1813,7 +1813,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('error'))
     await waitFor(() => rendered.getByText('Error test jaylen'))
@@ -1825,7 +1825,7 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    await client.prefetchQuery(key, () => 'prefetched')
+    await queryClient.prefetchQuery(key, () => 'prefetched')
 
     function Page() {
       const state = useQuery(key, () => 'data', {
@@ -1836,7 +1836,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
     expect(states.length).toBe(3)
@@ -1869,7 +1869,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(50)
 
@@ -1900,7 +1900,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -1938,7 +1938,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(100)
 
@@ -1974,7 +1974,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('loading'))
     await waitFor(() => rendered.getByText('error'))
@@ -2020,7 +2020,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('loading'))
     await waitFor(() => rendered.getByText('error'))
@@ -2067,7 +2067,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     // The query should display the first error result
     await waitFor(() => rendered.getByText('failureCount 1'))
@@ -2103,7 +2103,7 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    client.setQueryData(key, 'prefetched')
+    queryClient.setQueryData(key, 'prefetched')
 
     function Page() {
       const state = useQuery(key, () => 'data')
@@ -2111,7 +2111,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -2140,7 +2140,7 @@ describe('useQuery', () => {
     mockVisibilityState('hidden')
 
     // set data in cache to check if the hook query fn is actually called
-    client.setQueryData(key, 'prefetched')
+    queryClient.setQueryData(key, 'prefetched')
 
     function Page() {
       const state = useQuery(key, () => 'data')
@@ -2148,7 +2148,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(states.length).toBe(2))
 
@@ -2197,7 +2197,7 @@ describe('useQuery', () => {
     const prefetchQueryFn = jest.fn()
     prefetchQueryFn.mockImplementation(() => 'not yet...')
 
-    await client.prefetchQuery(key, prefetchQueryFn, {
+    await queryClient.prefetchQuery(key, prefetchQueryFn, {
       staleTime: 10,
     })
 
@@ -2209,7 +2209,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(states.length).toBe(2))
 
@@ -2229,7 +2229,7 @@ describe('useQuery', () => {
       return 'not yet...'
     })
 
-    await client.prefetchQuery(key, prefetchQueryFn, {
+    await queryClient.prefetchQuery(key, prefetchQueryFn, {
       staleTime: 1000,
     })
 
@@ -2242,7 +2242,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(0)
 
@@ -2279,7 +2279,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('failureCount 2'))
     await waitFor(() => rendered.getByText('failureCount 0'))
@@ -2301,7 +2301,7 @@ describe('useQuery', () => {
 
       React.useEffect(() => {
         async function prefetch() {
-          await client.prefetchQuery(key, () =>
+          await queryClient.prefetchQuery(key, () =>
             Promise.resolve('prefetched data')
           )
           setPrefetched(true)
@@ -2318,7 +2318,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
     await waitFor(() => rendered.getByText('isPrefetched'))
 
     fireEvent.click(rendered.getByText('setKey'))
@@ -2346,7 +2346,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     rendered.getByText('Status: idle')
     rendered.getByText('Data: no data')
@@ -2370,7 +2370,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -2389,7 +2389,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(10)
 
@@ -2422,7 +2422,7 @@ describe('useQuery', () => {
       return null
     }
 
-    renderWithClient(client, <Page />)
+    renderWithClient(queryClient, <Page />)
 
     await sleep(50)
     expect(results.length).toBe(3)
@@ -2445,10 +2445,10 @@ describe('useQuery', () => {
       return <div>status: {status}</div>
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     expect(queryFn).not.toHaveBeenCalled()
-    expect(cache.find(key)).not.toBeUndefined()
+    expect(queryCache.find(key)).not.toBeUndefined()
     rendered.getByText('status: idle')
   })
 
@@ -2468,7 +2468,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('status: idle'))
   })
@@ -2483,13 +2483,13 @@ describe('useQuery', () => {
       return <div>{query.data}</div>
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('fetched data'))
 
     rendered.unmount()
 
-    const query = cache.find(key)
+    const query = queryCache.find(key)
     // @ts-expect-error
     expect(query!.cacheTimeout).toBe(undefined)
   })
@@ -2525,7 +2525,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('status loading'))
     await waitFor(() => rendered.getByText('status success'))
@@ -2555,7 +2555,7 @@ describe('useQuery', () => {
       return <div>count: {data}</div>
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     // mount
     await waitFor(() => rendered.getByText('count: 0'))
@@ -2569,7 +2569,7 @@ describe('useQuery', () => {
       return <>{JSON.stringify(result.data)}</>
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText(''))
   })
@@ -2580,7 +2580,7 @@ describe('useQuery', () => {
       return <>{JSON.stringify(result.data)}</>
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('{"a":"a"}'))
   })
@@ -2607,7 +2607,7 @@ describe('useQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(client, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
     expect(queryFn).toHaveBeenCalledTimes(0)
     fireEvent.click(rendered.getByText('enable'))
     await waitFor(() => rendered.getByText('data'))
diff --git a/src/react/types.ts b/src/react/types.ts
index df47a166da..bac7c7e32b 100644
--- a/src/react/types.ts
+++ b/src/react/types.ts
@@ -1,6 +1,7 @@
+import { RetryValue, RetryDelayValue } from '../core/retryer'
 import {
   MutateOptions,
-  MutationOptions,
+  MutationStatus,
   QueryObserverOptions,
   QueryObserverResult,
 } from '../core/types'
@@ -33,49 +34,64 @@ export interface UseQueryResult<TData = unknown, TError = unknown>
 export interface UseInfiniteQueryResult<TData = unknown, TError = unknown>
   extends UseBaseQueryResult<TData[], TError> {}
 
-export type MutationStatus = 'idle' | 'loading' | 'error' | 'success'
-
-export type MutationFunction<TData = unknown, TVariables = unknown> = (
-  variables: TVariables
-) => Promise<TData>
+export interface UseMutationOptions<TData, TError, TVariables, TContext> {
+  mutationKey?: string | unknown[]
+  onMutate?: (variables: TVariables) => Promise<TContext> | TContext
+  onSuccess?: (
+    data: TData,
+    variables: TVariables,
+    context: TContext | undefined
+  ) => Promise<void> | void
+  onError?: (
+    error: TError,
+    variables: TVariables,
+    context: TContext | undefined
+  ) => Promise<void> | void
+  onSettled?: (
+    data: TData | undefined,
+    error: TError | null,
+    variables: TVariables,
+    context: TContext | undefined
+  ) => Promise<void> | void
+  retry?: RetryValue<TError>
+  retryDelay?: RetryDelayValue
+  useErrorBoundary?: boolean
+}
 
-export type MutateFunction<
+export type UseMutateFunction<
   TData = unknown,
   TError = unknown,
-  TVariables = unknown,
+  TVariables = void,
   TContext = unknown
 > = (
   variables: TVariables,
   options?: MutateOptions<TData, TError, TVariables, TContext>
 ) => void
 
-export type MutateAsyncFunction<
+export type UseMutateAsyncFunction<
   TData = unknown,
   TError = unknown,
-  TVariables = unknown,
+  TVariables = void,
   TContext = unknown
 > = (
   variables: TVariables,
   options?: MutateOptions<TData, TError, TVariables, TContext>
 ) => Promise<TData>
 
-export interface UseMutationOptions<TData, TError, TVariables, TContext>
-  extends MutationOptions<TData, TError, TVariables, TContext> {}
-
 export interface UseMutationResult<
   TData = unknown,
   TError = unknown,
   TVariables = unknown,
   TContext = unknown
 > {
+  context: TContext | undefined
   data: TData | undefined
   error: TError | null
-  isError: boolean
-  isIdle: boolean
-  isLoading: boolean
-  isSuccess: boolean
-  mutate: MutateFunction<TData, TError, TVariables, TContext>
-  mutateAsync: MutateAsyncFunction<TData, TError, TVariables, TContext>
+  failureCount: number
+  isPaused: boolean
+  mutate: UseMutateFunction<TData, TError, TVariables, TContext>
+  mutateAsync: UseMutateAsyncFunction<TData, TError, TVariables, TContext>
   reset: () => void
   status: MutationStatus
+  variables: TVariables | undefined
 }
diff --git a/src/react/useBaseQuery.ts b/src/react/useBaseQuery.ts
index 4c12475553..e315f89d40 100644
--- a/src/react/useBaseQuery.ts
+++ b/src/react/useBaseQuery.ts
@@ -9,10 +9,10 @@ import { UseBaseQueryOptions, UseQueryResult } from './types'
 export function useBaseQuery<TData, TError, TQueryFnData, TQueryData>(
   options: UseBaseQueryOptions<TData, TError, TQueryFnData, TQueryData>
 ): UseQueryResult<TData, TError> {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
   const isMounted = useIsMounted()
   const errorResetBoundary = useQueryErrorResetBoundary()
-  const defaultedOptions = client.defaultQueryObserverOptions(options)
+  const defaultedOptions = queryClient.defaultQueryObserverOptions(options)
 
   // Always set stale time when using suspense
   if (defaultedOptions.suspense && !defaultedOptions.staleTime) {
@@ -24,7 +24,8 @@ export function useBaseQuery<TData, TError, TQueryFnData, TQueryData>(
     QueryObserver<TData, TError, TQueryFnData, TQueryData>
   >()
   const firstRender = !observerRef.current
-  const observer = observerRef.current || client.watchQuery(defaultedOptions)
+  const observer =
+    observerRef.current || new QueryObserver(queryClient, defaultedOptions)
   observerRef.current = observer
 
   // Update options
diff --git a/src/react/useIsFetching.ts b/src/react/useIsFetching.ts
index c2a38d21a8..1a2d13dea1 100644
--- a/src/react/useIsFetching.ts
+++ b/src/react/useIsFetching.ts
@@ -14,10 +14,12 @@ export function useIsFetching(
   arg1?: QueryKey | QueryFilters,
   arg2?: QueryFilters
 ): number {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
   const isMounted = useIsMounted()
   const [filters] = parseFilterArgs(arg1, arg2)
-  const [isFetching, setIsFetching] = React.useState(client.isFetching(filters))
+  const [isFetching, setIsFetching] = React.useState(
+    queryClient.isFetching(filters)
+  )
 
   const filtersRef = React.useRef(filters)
   filtersRef.current = filters
@@ -26,15 +28,15 @@ export function useIsFetching(
 
   React.useEffect(
     () =>
-      client.getCache().subscribe(() => {
+      queryClient.getQueryCache().subscribe(() => {
         if (isMounted()) {
-          const newIsFetching = client.isFetching(filtersRef.current)
+          const newIsFetching = queryClient.isFetching(filtersRef.current)
           if (isFetchingRef.current !== newIsFetching) {
             setIsFetching(newIsFetching)
           }
         }
       }),
-    [client, isMounted]
+    [queryClient, isMounted]
   )
 
   return isFetching
diff --git a/src/react/useMutation.ts b/src/react/useMutation.ts
index 43ab1affd1..39db8a65de 100644
--- a/src/react/useMutation.ts
+++ b/src/react/useMutation.ts
@@ -1,97 +1,26 @@
 import React from 'react'
 
 import { useIsMounted } from './utils'
-import { getStatusProps, noop } from '../core/utils'
-import { getLogger } from '../core/logger'
-import { notifyManager } from '../core/notifyManager'
+import { noop, parseMutationArgs } from '../core/utils'
+import { MutationObserver } from '../core/mutationObserver'
 import { useQueryClient } from './QueryClientProvider'
 import {
-  MutateAsyncFunction,
-  MutateFunction,
-  MutationFunction,
-  MutationStatus,
+  UseMutateFunction,
   UseMutationOptions,
   UseMutationResult,
 } from './types'
-
-// TYPES
-
-type Reducer<S, A> = (prevState: S, action: A) => S
-
-interface State<TData, TError> {
-  status: MutationStatus
-  data: TData | undefined
-  error: TError | null
-  isIdle: boolean
-  isLoading: boolean
-  isSuccess: boolean
-  isError: boolean
-}
-
-interface ResetAction {
-  type: 'reset'
-}
-
-interface LoadingAction {
-  type: 'loading'
-}
-
-interface SuccessAction<TData> {
-  type: 'success'
-  data: TData
-}
-
-interface ErrorAction<TError> {
-  type: 'error'
-  error: TError
-}
-
-type Action<TData, TError> =
-  | ErrorAction<TError>
-  | LoadingAction
-  | ResetAction
-  | SuccessAction<TData>
+import { MutationFunction, MutationKey } from '../core/types'
 
 // HOOK
 
-function getDefaultState<TData, TError>(): State<TData, TError> {
-  return {
-    ...getStatusProps('idle'),
-    data: undefined,
-    error: null,
-  }
-}
-
-function reducer<TData, TError>(
-  state: State<TData, TError>,
-  action: Action<TData, TError>
-): State<TData, TError> {
-  switch (action.type) {
-    case 'reset':
-      return getDefaultState()
-    case 'loading':
-      return {
-        ...getStatusProps('loading'),
-        data: undefined,
-        error: null,
-      }
-    case 'success':
-      return {
-        ...getStatusProps('success'),
-        data: action.data,
-        error: null,
-      }
-    case 'error':
-      return {
-        ...getStatusProps('error'),
-        data: undefined,
-        error: action.error,
-      }
-    default:
-      return state
-  }
-}
-
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+>(
+  options: UseMutationOptions<TData, TError, TVariables, TContext>
+): UseMutationResult<TData, TError, TVariables, TContext>
 export function useMutation<
   TData = unknown,
   TError = unknown,
@@ -99,103 +28,88 @@ export function useMutation<
   TContext = unknown
 >(
   mutationFn: MutationFunction<TData, TVariables>,
-  options: UseMutationOptions<TData, TError, TVariables, TContext> = {}
+  options?: UseMutationOptions<TData, TError, TVariables, TContext>
+): UseMutationResult<TData, TError, TVariables, TContext>
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+>(
+  mutationKey: MutationKey,
+  options?: UseMutationOptions<TData, TError, TVariables, TContext>
+): UseMutationResult<TData, TError, TVariables, TContext>
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+>(
+  mutationKey: MutationKey,
+  mutationFn?: MutationFunction<TData, TVariables>,
+  options?: UseMutationOptions<TData, TError, TVariables, TContext>
+): UseMutationResult<TData, TError, TVariables, TContext>
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+>(
+  arg1:
+    | MutationKey
+    | MutationFunction<TData, TVariables>
+    | UseMutationOptions<TData, TError, TVariables, TContext>,
+  arg2?:
+    | MutationFunction<TData, TVariables>
+    | UseMutationOptions<TData, TError, TVariables, TContext>,
+  arg3?: UseMutationOptions<TData, TError, TVariables, TContext>
 ): UseMutationResult<TData, TError, TVariables, TContext> {
+  const options = parseMutationArgs(arg1, arg2, arg3)
+
   const isMounted = useIsMounted()
-  const [state, dispatch] = React.useReducer(
-    reducer as Reducer<State<TData, TError>, Action<TData, TError>>,
-    null,
-    getDefaultState
+  const queryClient = useQueryClient()
+
+  // Create mutation observer
+  const observerRef = React.useRef<
+    MutationObserver<TData, TError, TVariables, TContext>
+  >()
+  const firstRender = !observerRef.current
+  const observer =
+    observerRef.current || new MutationObserver(queryClient, options)
+  observerRef.current = observer
+
+  // Update options
+  if (!firstRender) {
+    observer.setOptions(options)
+  }
+
+  const [currentResult, setCurrentResult] = React.useState(() =>
+    observer.getCurrentResult()
   )
 
-  const safeDispatch = React.useCallback<typeof dispatch>(
-    action => {
-      notifyManager.schedule(() => {
+  // Subscribe to the observer
+  React.useEffect(
+    () =>
+      observer.subscribe(result => {
         if (isMounted()) {
-          dispatch(action)
+          setCurrentResult(result)
         }
-      })
-    },
-    [dispatch, isMounted]
-  )
-
-  const client = useQueryClient()
-  const defaultedOptions = client.defaultMutationOptions(options)
-  const lastMutationIdRef = React.useRef(0)
-  const lastMutationFnRef = React.useRef(mutationFn)
-  lastMutationFnRef.current = mutationFn
-  const lastOptionsRef = React.useRef(defaultedOptions)
-  lastOptionsRef.current = defaultedOptions
-
-  const mutateAsync = React.useCallback<
-    MutateAsyncFunction<TData, TError, TVariables, TContext>
-  >(
-    (vars, mutateOpts = {}): Promise<TData> => {
-      const mutationId = ++lastMutationIdRef.current
-      const mutationOpts = lastOptionsRef.current
-      const lastMutationFn = lastMutationFnRef.current
-
-      let ctx: TContext | undefined
-      let data: TData
-
-      safeDispatch({ type: 'loading' })
-
-      return Promise.resolve()
-        .then(() => mutationOpts.onMutate?.(vars))
-        .then(context => {
-          ctx = context
-        })
-        .then(() => lastMutationFn(vars))
-        .then(result => {
-          data = result
-        })
-        .then(() => mutationOpts.onSuccess?.(data, vars, ctx))
-        .then(() => mutationOpts.onSettled?.(data, null, vars, ctx))
-        .then(() => mutateOpts.onSuccess?.(data, vars, ctx))
-        .then(() => mutateOpts.onSettled?.(data, null, vars, ctx))
-        .then(() => {
-          if (lastMutationIdRef.current === mutationId) {
-            safeDispatch({ type: 'success', data })
-          }
-          return data
-        })
-        .catch(error => {
-          getLogger().error(error)
-          return Promise.resolve()
-            .then(() => mutationOpts.onError?.(error, vars, ctx))
-            .then(() => mutationOpts.onSettled?.(undefined, error, vars, ctx))
-            .then(() => mutateOpts.onError?.(error, vars, ctx))
-            .then(() => mutateOpts.onSettled?.(undefined, error, vars, ctx))
-            .then(() => {
-              if (lastMutationIdRef.current === mutationId) {
-                safeDispatch({ type: 'error', error })
-              }
-              throw error
-            })
-        })
-    },
-    [safeDispatch]
+      }),
+    [observer, isMounted]
   )
 
   const mutate = React.useCallback<
-    MutateFunction<TData, TError, TVariables, TContext>
+    UseMutateFunction<TData, TError, TVariables, TContext>
   >(
     (variables, mutateOptions) => {
-      mutateAsync(variables, mutateOptions).catch(noop)
+      observer.mutate(variables, mutateOptions).catch(noop)
     },
-    [mutateAsync]
+    [observer]
   )
 
-  const reset = React.useCallback(() => {
-    safeDispatch({ type: 'reset' })
-  }, [safeDispatch])
-
-  React.useEffect(() => {
-    const lastOptions = lastOptionsRef.current
-    if (state.error && (lastOptions.useErrorBoundary || lastOptions.suspense)) {
-      throw state.error
-    }
-  }, [state.error])
+  if (currentResult.error && observer.options.useErrorBoundary) {
+    throw currentResult.error
+  }
 
-  return { ...state, mutate, mutateAsync, reset }
+  return { ...currentResult, mutate, mutateAsync: currentResult.mutate }
 }
diff --git a/src/react/useQueries.ts b/src/react/useQueries.ts
index 8dd6f45979..0d6dbf7bfe 100644
--- a/src/react/useQueries.ts
+++ b/src/react/useQueries.ts
@@ -6,13 +6,14 @@ import { useQueryClient } from './QueryClientProvider'
 import { UseQueryOptions, UseQueryResult } from './types'
 
 export function useQueries(queries: UseQueryOptions[]): UseQueryResult[] {
-  const client = useQueryClient()
+  const queryClient = useQueryClient()
   const isMounted = useIsMounted()
 
   // Create queries observer
   const observerRef = React.useRef<QueriesObserver>()
   const firstRender = !observerRef.current
-  const observer = observerRef.current || client.watchQueries(queries)
+  const observer =
+    observerRef.current || new QueriesObserver(queryClient, queries)
   observerRef.current = observer
 
   // Update queries