docs: prefer default config of QueryCache (TanStack#1034)

Author: boschni

docs/src/pages/docs/api.md

@@ -689,44 +689,62 @@ const isFetching = useIsFetching()
 `ReactQueryConfigProvider` is an optional provider component and can be used to define defaults for all instances of `useQuery` within it's sub-tree:
 
 ```js
-import { ReactQueryConfigProvider } from 'react-query'
+import {
+  QueryCache,
+  ReactQueryCacheProvider,
+  ReactQueryConfigProvider,
+} from 'react-query'
 
-const queryConfig = {
+const queryCache = new QueryCache({
+  defaultConfig: {
+    queries: {
+      suspense: false,
+      queryKeySerializerFn: defaultQueryKeySerializerFn,
+      queryFn,
+      enabled: true,
+      retry: 3,
+      retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
+      staleTime: 0,
+      cacheTime: 5 * 60 * 1000,
+      refetchOnWindowFocus: true,
+      refetchInterval: false,
+      queryFnParamsFilter: identity,
+      refetchOnMount: true,
+      isDataEqual: deepEqual,
+      onError: noop,
+      onSuccess: noop,
+      onSettled: noop,
+      useErrorBoundary: false, // falls back to suspense
+    },
+    mutations: {
+      suspense: false,
+      throwOnError: false,
+      onMutate: noop,
+      onError: noop,
+      onSuccess: noop,
+      onSettled: noop,
+      useErrorBoundary: false, // falls back to suspense
+    },
+  },
+})
+
+const overrides = {
   queries: {
-    suspense: false,
-    queryKeySerializerFn: defaultQueryKeySerializerFn,
-    queryFn,
-    enabled: true,
-    retry: 3,
-    retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
-    staleTime: 0,
-    cacheTime: 5 * 60 * 1000,
-    refetchOnWindowFocus: true,
-    refetchInterval: false,
-    queryFnParamsFilter: identity,
-    refetchOnMount: true,
-    isDataEqual: deepEqual,
-    onError: noop,
-    onSuccess: noop,
-    onSettled: noop,
-    useErrorBoundary: false, // falls back to suspense
+    suspense: true,
   },
   mutations: {
-    suspense: false,
-    throwOnError: false,
-    onMutate: noop,
-    onError: noop,
-    onSuccess: noop,
-    onSettled: noop,
-    useErrorBoundary: false, // falls back to suspense
+    suspense: true,
   },
 }
 
 function App() {
   return (
-    <ReactQueryConfigProvider config={queryConfig}>
+    <ReactQueryCacheProvider queryCache={queryCache}>
       ...
-    </ReactQueryConfigProvider>
+      <ReactQueryConfigProvider config={overrides}>
+        ...
+      </ReactQueryConfigProvider>
+    </ReactQueryCacheProvider>
   )
 }
 ```

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

@@ -12,18 +12,20 @@ const defaultQueryFn = async key => {
   return data
 }
 
+// provide the default query function to your app with defaultConfig
+const queryCache = new QueryCache({
+  defaultConfig: {
+    queries: {
+      queryFn: defaultQueryFn,
+    },
+  },
+})
+
 function App() {
-  // provide the default query function to your app via the config provider
   return (
-    <ReactQueryConfigProvider
-      config={{
-        queries: {
-          queryFn: defaultQueryFn,
-        },
-      }}
-    >
+    <ReactQueryCacheProvider queryCache={queryCache}>
       <YourApp />
-    </ReactQueryConfigProvider>
+    </ReactQueryCacheProvider>
   )
 }
 

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

@@ -29,19 +29,21 @@ The default `retryDelay` is set to double (starting at `1000`ms) with each attem
 
 ```js
 // Configure for all queries
-import { ReactQueryConfigProvider } from 'react-query'
+import { QueryCache, ReactQueryCacheProvider } from 'react-query'
 
-const queryConfig = {
-  queries: {
-    retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
+const queryCache = new QueryCache({
+  defaultConfig: {
+    queries: {
+      retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
+    },
   },
-}
+})
 
 function App() {
   return (
-    <ReactQueryConfigProvider config={queryConfig}>
+    <ReactQueryCacheProvider queryCache={queryCache}>
       ...
-    </ReactQueryConfigProvider>
+    </ReactQueryCacheProvider>
   )
 }
 ```

docs/src/pages/docs/guides/suspense.md

@@ -11,19 +11,21 @@ Global configuration:
 
 ```js
 // Configure for all queries
-import { ReactQueryConfigProvider } from 'react-query'
+import { QueryCache, ReactQueryCacheProvider } from 'react-query'
 
-const queryConfig = {
-  queries: {
-    suspense: true,
+const queryCache = new QueryCache({
+  defaultConfig: {
+    queries: {
+      suspense: true,
+    },
   },
-}
+})
 
 function App() {
   return (
-    <ReactQueryConfigProvider config={queryConfig}>
+    <ReactQueryCacheProvider queryCache={queryCache}>
       ...
-    </ReactQueryConfigProvider>
+    </ReactQueryCacheProvider>
   )
 }
 ```

docs/src/pages/docs/guides/window-focus-refetching.md

@@ -3,16 +3,22 @@ id: window-focus-refetching
 title: Window Focus Refetching
 ---
 
-If a user leaves your application and returns to stale data, you may want to trigger an update in the background to update any stale queries. Thankfully, **React Query does this automatically for you**, but if you choose to disable it, you can use the `ReactQueryConfigProvider`'s `refetchOnWindowFocus` option to disable it:
+If a user leaves your application and returns to stale data, you may want to trigger an update in the background to update any stale queries. Thankfully, **React Query does this automatically for you**, but if you choose to disable it, you can use the `refetchOnWindowFocus` option to disable it:
 
 ```js
-const queryConfig = { queries: { refetchOnWindowFocus: false } }
+const queryCache = new QueryCache({
+  defaultConfig: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+})
 
 function App() {
   return (
-    <ReactQueryConfigProvider config={queryConfig}>
+    <ReactQueryCacheProvider queryCache={queryCache}>
       ...
-    </ReactQueryConfigProvider>
+    </ReactQueryCacheProvider>
   )
 }
 ```
@@ -53,16 +59,16 @@ 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 { AppState } from 'react-native';
+import { setFocusHandler } from 'react-query'
+import { AppState } from 'react-native'
 
-setFocusHandler((handleFocus) => {
-  const handleAppStateChange = (appState) => {
+setFocusHandler(handleFocus => {
+  const handleAppStateChange = appState => {
     if (appState === 'active') {
-      handleFocus();
+      handleFocus()
     }
-  };
-  AppState.addEventListener('change', handleAppStateChange);
-  return () => AppState.removeEventListener('change', handleAppStateChange);
-});
+  }
+  AppState.addEventListener('change', handleAppStateChange)
+  return () => AppState.removeEventListener('change', handleAppStateChange)
+})
 ```