feat: move mutations into the core

Author: boschni

docs/src/pages/guides/default-query-function.md

@@ -13,9 +13,7 @@ const defaultQueryFn = async key => {
 }
 
 // provide the default query function to your app with defaultOptions
-const cache = new QueryCache()
 const client = new QueryClient({
-  cache,
   defaultOptions: {
     queries: {
       queryFn: defaultQueryFn,

docs/src/pages/guides/migrating-to-react-query-3.md

@@ -23,10 +23,9 @@ This has some benefits:
 Use the `QueryClientProvider` component to connect a `QueryClient` to your application:
 
 ```js
-import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
+import { QueryClient, QueryClientProvider } from 'react-query'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const client = new QueryClient()
 
 function App() {
   return <QueryClientProvider client={client}>...</QueryClientProvider>
@@ -58,7 +57,6 @@ The `ReactQueryConfigProvider` component has been removed. Default options for q
 
 ```js
 const client = new QueryClient({
-  cache,
   defaultOptions: {
     queries: {
       staleTime: Infinity,
@@ -370,7 +368,7 @@ const unsubscribe = observer.subscribe(result => {
 The `client.setQueryDefaults()` method to set default options for a specific query. If the query does not exist yet it will create it.
 
 ```js
-client.setQueryDefaults('posts', fetchPosts)
+client.setQueryDefaults('posts', { queryFn: fetchPosts })
 
 function Component() {
   const { data } = useQuery('posts')

docs/src/pages/guides/query-retries.md

@@ -29,11 +29,9 @@ The default `retryDelay` is set to double (starting at `1000`ms) with each attem
 
 ```js
 // Configure for all queries
-import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient, QueryClientProvider } from 'react-query'
 
-const cache = new QueryCache()
 const client = new QueryClient({
-  cache,
   defaultOptions: {
     queries: {
       retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),

docs/src/pages/guides/ssr.md

@@ -49,7 +49,7 @@ React Query supports prefetching multiple queries on the server in Next.js and t
 
 To support caching queries on the server and set up hydration:
 
-- Create a new `QueryCache` and `QueryClient` instance
+- Create a new `QueryClient` instance
 - Wrap your app component with `<QueryClientProvider>` and pass it the client instance
 - Wrapp your app component with `<Hydrate>` and pass it the `dehydratedState` prop from `pageProps`
 
@@ -58,8 +58,7 @@ 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 client = new QueryClient()
 
 export default function MyApp({ Component, pageProps }) {
   return (
@@ -74,18 +73,17 @@ export default function MyApp({ Component, pageProps }) {
 
 Now you are ready to prefetch some data in your pages with either [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) (for SSG) or [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering) (for SSR). From React Query's perspective, these integrate in the same way, `getStaticProps` is shown below.
 
-- Create a new `QueryCache` and `QueryClient` instance for each page request
+- Create a `QueryClient` instance for each page request
 - Prefetch the data using the clients `prefetchQuery` method and wait for it to complete
 - Use `dehydrate` to dehydrate the query cache and pass it to the page via the `dehydratedState` prop. This is the same prop that the cache will be picked up from in your `_app.js`
 
 ```js
 // pages/posts.jsx
-import { QueryCache, QueryClient, useQuery } from 'react-query'
+import { 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 client = new QueryClient()
 
   await client.prefetchQuery('posts', getPosts)
 
@@ -119,10 +117,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,10 +129,9 @@ 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 })
+const client = new QueryClient()
 await client.prefetchQuery('key', fn)
-const dehydratedState = dehydrate(cache)
+const dehydratedState = dehydrate(client)
 
 const html = ReactDOM.renderToString(
   <ReactQueryClientProvider client={client}>
@@ -162,18 +158,16 @@ res.send(`
 ### Client
 
 - Parse the dehydrated cache state that was sent to the client with the HTML
-- Create a new `QueryCache` instance
 - Create a new `QueryClient` instance
 - 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.**
 
 ```js
-import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient, QueryClientProvider } from 'react-query'
 import { Hydrate } from 'react-query/hydration'
 
 const dehydratedState = JSON.parse(window.__REACT_QUERY_INITIAL_QUERIES__)
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const client = new QueryClient()
 
 ReactDOM.hydrate(
   <ReactQueryClientProvider client={client}>

docs/src/pages/guides/suspense.md

@@ -11,11 +11,9 @@ Global configuration:
 
 ```js
 // Configure for all queries
-import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient, QueryClientProvider } from 'react-query'
 
-const cache = new QueryCache()
 const client = new QueryClient({
-  cache,
   defaultOptions: {
     queries: {
       suspense: true,

docs/src/pages/overview.md

@@ -47,15 +47,9 @@ In the example below, you can see React Query in its most basic and simple form
 [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/simple)
 
 ```js
-import {
-  useQuery,
-  QueryCache,
-  QueryClient,
-  QueryClientProvider,
-} from 'react-query'
-
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+import { useQuery, QueryClient, QueryClientProvider } from 'react-query'
+
+const client = new QueryClient()
 
 export default function App() {
   return (

docs/src/pages/quick-start.md

@@ -20,11 +20,8 @@ import {
 } from 'react-query'
 import { getTodos, postTodo } from '../my-api'
 
-// Create a cache
-const cache = new QueryCache()
-
 // Create a client
-const client = new QueryClient({ cache })
+const client = new QueryClient()
 
 function App() {
   return (

docs/src/pages/reference/QueryClient.md

@@ -8,11 +8,9 @@ title: QueryClient
 The `QueryClient` can be used to interact with a cache:
 
 ```js
-import { QueryClient, QueryCache } from 'react-query'
+import { QueryClient } from 'react-query'
 
-const cache = new QueryCache()
 const client = new QueryClient({
-  cache,
   defaultOptions: {
     queries: {
       staleTime: Infinity,
@@ -43,11 +41,13 @@ Its available methods are:
 
 **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 client.
 
 ## `client.fetchQueryData`
 
@@ -176,7 +176,7 @@ console.log(state.updatedAt)
 `setQueryDefaults` is a synchronous method to set default options for a specific query. If the query does not exist yet it will create it.
 
 ```js
-client.setQueryDefaults('posts', fetchPosts)
+client.setQueryDefaults('posts', { queryFn: fetchPosts })
 
 function Component() {
   const { data } = useQuery('posts')

docs/src/pages/reference/QueryClientProvider.md

@@ -6,10 +6,9 @@ title: QueryClientProvider
 Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application:
 
 ```js
-import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
+import { QueryClient, QueryClientProvider } from 'react-query'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const client = new QueryClient()
 
 function App() {
   return <QueryClientProvider client={client}>...</QueryClientProvider>

examples/auto-refetching/pages/index.js

@@ -7,14 +7,12 @@ import {
   useQuery,
   useQueryClient,
   useMutation,
-  QueryCache,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
 import { ReactQueryDevtools } from 'react-query-devtools'
 
-const cache = new QueryCache()
-const client = new QueryClient({ cache })
+const client = new QueryClient()
 
 export default function App() {
   return (