docs(examples): update examples to use react18 (#3466)

* tests: really assert that filtering works

by checking that we never had two isFetchings

* docs(examples): update react-scripts based examples to react18 and rq v4-beta

* docs(examples): use react-query v4 in all examples

* docs(examples): remove old version of persistence

and use the dedicated provider instead

* docs: use createRoot in the docs

* docs(examples): fix import of createWebStoragePersister

Author: TkDodo

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>
 )
 ```
 

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",

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"

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 />);

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",

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 />);

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"

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 />);

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"

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 />);