TanStack · TkDodo · Apr 3, 2022 · Apr 3, 2022 · Apr 3, 2022 · Apr 3, 2022
diff --git a/docs/src/pages/plugins/persistQueryClient.md b/docs/src/pages/plugins/persistQueryClient.md
@@ -59,8 +59,8 @@ the persister `removeClient()` is called and the cache is immediately discarded.
 
 ### `persistQueryClientSave`
 
-- Your query/mutation are [`dehydrated`](../reference/hydration#dehydrate) and stored by the persister you provided. 
-- `createWebStoragePersister` and `createAsyncStoragePersister` throttle this action to happen at most every 1 second to save on potentially expensive writes.  Review their documentation to see how to customize their throttle timing. 
+- Your query/mutation are [`dehydrated`](../reference/hydration#dehydrate) and stored by the persister you provided.
+- `createWebStoragePersister` and `createAsyncStoragePersister` throttle this action to happen at most every 1 second to save on potentially expensive writes.  Review their documentation to see how to customize their throttle timing.
 
 You can use this to explicitly persist the cache at the moment(s) you choose.
 
@@ -148,13 +148,13 @@ interface PersistQueryClientOptions {
   /** The options passed to the hydrate function
    * Not used on `persistQueryClientSave` or `persistQueryClientSubscribe` */
   hydrateOptions?: HydrateOptions
-  /** The options passed to the dehydrate function 
+  /** The options passed to the dehydrate function
   * Not used on `persistQueryClientRestore` */
   dehydrateOptions?: DehydrateOptions
 }
 ```
 
-There are actually three interfaces available: 
+There are actually three interfaces available:
 - `PersistedQueryClientSaveOptions` is used for `persistQueryClientSave` and `persistQueryClientSubscribe` (doesn't use `hydrateOptions`).
 - `PersistedQueryClientRestoreOptions` is used for `persistQueryClientRestore` (doesn't use `dehydrateOptions`).
 - `PersistQueryClientOptions` is used for `persistQueryClient`
@@ -175,7 +175,7 @@ persistQueryClient({
 })
 
 // 🚨 happens at the same time as restoring
-ReactDOM.render(<App />, rootElement)
+ReactDOM.createRoot(rootElement).render(<App />)
 ```
 
 ### PeristQueryClientProvider
@@ -199,14 +199,13 @@ const persister = createWebStoragePersister({
   storage: window.localStorage,
 })
 
-ReactDOM.render(
+ReactDOM.createRoot(rootElement).render(
   <PersistQueryClientProvider
     client={queryClient}
     persistOptions={{ persister }}
   >
     <App />
-  </PersistQueryClientProvider>,
-  rootElement
+  </PersistQueryClientProvider>
 )
 ```
 

diff --git a/examples/auto-refetching/package.json b/examples/auto-refetching/package.json
@@ -9,7 +9,7 @@
     "next": "9.3.2",
     "react": "16.13.0",
     "react-dom": "16.13.0",
-    "react-query": "^3.5.0"
+    "react-query": "^4.0.0-beta.1"
   },
   "scripts": {
     "dev": "next",

diff --git a/examples/basic-graphql-request/package.json b/examples/basic-graphql-request/package.json
@@ -7,12 +7,12 @@
     "eject": "rescripts eject"
   },
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.26.1",
     "graphql": "^15.3.0",
     "graphql-request": "^3.1.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-query": "^3.5.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-query": "^4.0.0-beta.1",
     "react-scripts": "3.0.1",
     "stop-runaway-react-effects": "^1.2.0",
     "styled-components": "^4.3.2"

diff --git a/examples/basic-graphql-request/src/index.js b/examples/basic-graphql-request/src/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import {
   useQuery,
   useQueryClient,
@@ -40,7 +40,7 @@ function App() {
 }
 
 function usePosts() {
-  return useQuery(['posts'], async () => {
+  return useQuery(["posts"], async () => {
     const {
       posts: { data },
     } = await request(
@@ -157,4 +157,4 @@ function Post({ postId, setPostId }) {
 }
 
 const rootElement = document.getElementById("root");
-ReactDOM.render(<App />, rootElement);
+ReactDOM.createRoot(rootElement).render(<App />);
diff --git a/examples/basic-typescript/package.json b/examples/basic-typescript/package.json
@@ -7,11 +7,11 @@
     "eject": "rescripts eject"
   },
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.26.1",
     "broadcast-channel": "^3.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-query": "^3.13.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-query": "^4.0.0-beta.1",
     "react-scripts": "3.0.1",
     "stop-runaway-react-effects": "^1.2.0",
     "styled-components": "^4.3.2",

diff --git a/examples/basic-typescript/src/index.tsx b/examples/basic-typescript/src/index.tsx
@@ -1,16 +1,23 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import axios from "axios";
-import {
-  useQuery,
-  useQueryClient,
-  QueryClient,
-  QueryClientProvider,
-} from "react-query";
+import { useQuery, useQueryClient, QueryClient } from "react-query";
+import { PersistQueryClientProvider } from "react-query/persistQueryClient";
+import { createWebStoragePersister } from "react-query/createWebStoragePersister";
 import { ReactQueryDevtools } from "react-query/devtools";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+});
+
+const persister = createWebStoragePersister({
+  storage: window.localStorage,
+});
 
 type Post = {
   id: number;
@@ -128,7 +135,10 @@ function App() {
   const [postId, setPostId] = React.useState(-1);
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister }}
+    >
       <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
@@ -145,9 +155,9 @@ function App() {
         <Posts setPostId={setPostId} />
       )}
       <ReactQueryDevtools initialIsOpen />
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   );
 }
 
 const rootElement = document.getElementById("root");
-ReactDOM.render(<App />, rootElement);
+ReactDOM.createRoot(rootElement).render(<App />);
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -9,9 +9,9 @@
   "dependencies": {
     "axios": "^0.21.1",
     "broadcast-channel": "^3.4.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-query": "^3.5.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-query": "^4.0.0-beta.1",
     "react-scripts": "3.0.1",
     "stop-runaway-react-effects": "^1.2.0",
     "styled-components": "^4.3.2"

diff --git a/examples/basic/src/index.js b/examples/basic/src/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import axios from "axios";
 import {
   useQuery,
@@ -9,23 +9,8 @@ import {
   QueryClientProvider,
 } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
-import { persistQueryClient } from 'react-query/persistQueryClient';
-import { createWebStoragePersister } from 'react-query/createWebStoragePersister'
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
-    },
-  },
-})
-
-const localStoragePersister = createWebStoragePersister({storage: window.localStorage})
-
-persistQueryClient({
-  queryClient,
-  persister: localStoragePersister,
-})
+const queryClient = new QueryClient();
 
 function App() {
   const [postId, setPostId] = React.useState(-1);
@@ -146,4 +131,4 @@ function Post({ postId, setPostId }) {
 }
 
 const rootElement = document.getElementById("root");
-ReactDOM.render(<App />, rootElement);
+ReactDOM.createRoot(rootElement).render(<App />);
diff --git a/examples/custom-hooks/package.json b/examples/custom-hooks/package.json
@@ -7,10 +7,10 @@
     "eject": "rescripts eject"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-query": "^3.5.0",
+    "axios": "^0.26.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-query": "^4.0.0-beta.1",
     "react-scripts": "3.0.1",
     "stop-runaway-react-effects": "^1.2.0",
     "styled-components": "^4.3.2"

diff --git a/examples/custom-hooks/src/index.js b/examples/custom-hooks/src/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import { QueryClient, QueryClientProvider, useQueryClient } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 
@@ -102,4 +102,4 @@ function Post({ postId, setPostId }) {
 }
 
 const rootElement = document.getElementById("root");
-ReactDOM.render(<App />, rootElement);
+ReactDOM.createRoot(rootElement).render(<App />);
diff --git a/examples/default-query-function/package.json b/examples/default-query-function/package.json
@@ -7,10 +7,10 @@
     "eject": "rescripts eject"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-query": "^3.5.0",
+    "axios": "^0.26.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-query": "^4.0.0-beta.1",
     "react-scripts": "3.0.1",
     "stop-runaway-react-effects": "^1.2.0",
     "styled-components": "^4.3.2"

diff --git a/examples/default-query-function/src/index.js b/examples/default-query-function/src/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import axios from "axios";
 import {
   useQuery,
@@ -56,7 +56,7 @@ function Posts({ setPostId }) {
   const queryClient = useQueryClient();
 
   // All you have to do now is pass a key!
-  const { status, data, error, isFetching } = useQuery(['/posts']);
+  const { status, data, error, isFetching } = useQuery(["/posts"]);
 
   return (
     <div>
@@ -129,4 +129,4 @@ function Post({ postId, setPostId }) {
 }
 
 const rootElement = document.getElementById("root");
-ReactDOM.render(<App />, rootElement);
+ReactDOM.createRoot(rootElement).render(<App />);
diff --git a/examples/focus-refetching/package.json b/examples/focus-refetching/package.json
@@ -9,7 +9,7 @@
     "next": "9.3.2",
     "react": "16.13.0",
     "react-dom": "16.13.0",
-    "react-query": "^3.5.0"
+    "react-query": "^4.0.0-beta.1"
   },
   "scripts": {
     "dev": "next",

diff --git a/examples/load-more-infinite-scroll/package.json b/examples/load-more-infinite-scroll/package.json
@@ -10,7 +10,7 @@
     "react": "16.13.0",
     "react-dom": "16.13.0",
     "react-intersection-observer": "^8.33.1",
-    "react-query": "^3.5.0"
+    "react-query": "^4.0.0-beta.1"
   },
   "scripts": {
     "dev": "next",

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -12,7 +12,7 @@
     "next": "latest",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-query": "^3.5.0",
+    "react-query": "^4.0.0-beta.1",
     "resolve-from": "^5.0.0",
     "web-streams-polyfill": "^3.0.3"
   },

diff --git a/examples/offline/package.json b/examples/offline/package.json
@@ -10,10 +10,10 @@
     "@tanstack/react-location": "^3.7.0",
     "ky": "^0.30.0",
     "msw": "^0.39.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-hot-toast": "^2.2.0",
-    "react-query": "^4.0.0-alpha.19",
+    "react-query": "^4.0.0-beta.1",
     "react-scripts": "3.0.1"
   },
   "devDependencies": {

diff --git a/examples/offline/src/index.js b/examples/offline/src/index.js
@@ -1,15 +1,13 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import App from "./App";
 import { worker } from "./api";
 
 worker.start();
 
-ReactDOM.render(
-  <React.StrictMode>
-    <div style={{ padding: "16px" }}>
-      <App />
-    </div>
-  </React.StrictMode>,
-  document.getElementById("root")
+const rootElement = document.getElementById("root");
+ReactDOM.createRoot(rootElement).render(
+  <div style={{ padding: "16px" }}>
+    <App />
+  </div>
 );
diff --git a/examples/optimistic-updates-typescript/package.json b/examples/optimistic-updates-typescript/package.json
@@ -11,7 +11,7 @@
     "next": "9.2.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-query": "^3.5.1",
+    "react-query": "^4.0.0-beta.1",
     "typescript": "^4.1.2"
   },
   "scripts": {

diff --git a/examples/optimistic-updates/package.json b/examples/optimistic-updates/package.json
@@ -9,7 +9,7 @@
     "next": "9.2.2",
     "react": "16.13.0",
     "react-dom": "16.13.0",
-    "react-query": "^3.5.0"
+    "react-query": "^4.0.0-beta.1"
   },
   "scripts": {
     "dev": "next",

diff --git a/examples/pagination/package.json b/examples/pagination/package.json
@@ -9,7 +9,7 @@
     "next": "9.3.2",
     "react": "16.13.0",
     "react-dom": "16.13.0",
-    "react-query": "^3.5.0"
+    "react-query": "^4.0.0-beta.1"
   },
   "scripts": {
     "dev": "next",

diff --git a/examples/playground/package.json b/examples/playground/package.json
@@ -7,9 +7,9 @@
     "eject": "rescripts eject"
   },
   "dependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-query": "^3.5.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-query": "^4.0.0-beta.1",
     "react-scripts": "3.0.1",
     "stop-runaway-react-effects": "^1.2.0",
     "styled-components": "^4.3.2"