From 8d3640655ced5789eb2f44c36e4d9e2fc16590bb Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Sun, 3 Apr 2022 17:03:04 +0200 Subject: [PATCH 1/6] tests: really assert that filtering works by checking that we never had two isFetchings --- src/reactjs/tests/useIsFetching.test.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/reactjs/tests/useIsFetching.test.tsx b/src/reactjs/tests/useIsFetching.test.tsx index 78fdfcfae5..d5920b91cf 100644 --- a/src/reactjs/tests/useIsFetching.test.tsx +++ b/src/reactjs/tests/useIsFetching.test.tsx @@ -1,5 +1,4 @@ -import { fireEvent, waitFor, screen } from '@testing-library/react' -import '@testing-library/jest-dom' +import { fireEvent, waitFor } from '@testing-library/react' import React from 'react' import { ErrorBoundary } from 'react-error-boundary' @@ -109,6 +108,8 @@ describe('useIsFetching', () => { const key1 = queryKey() const key2 = queryKey() + const isFetchings: number[] = [] + function One() { useQuery(key1, async () => { await sleep(10) @@ -129,6 +130,8 @@ describe('useIsFetching', () => { const [started, setStarted] = React.useState(false) const isFetching = useIsFetching(key1) + isFetchings.push(isFetching) + return (
@@ -148,10 +151,9 @@ describe('useIsFetching', () => { await findByText('isFetching: 0') fireEvent.click(getByRole('button', { name: /setStarted/i })) await findByText('isFetching: 1') - await waitFor(() => { - expect(screen.queryByText('isFetching: 2')).not.toBeInTheDocument() - }) await findByText('isFetching: 0') + // at no point should we have isFetching: 2 + expect(isFetchings).toEqual(expect.not.arrayContaining([2])) }) describe('with custom context', () => { From 8956bdf68dd687471ce7e5d7c50789094813f02a Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Sun, 3 Apr 2022 17:15:00 +0200 Subject: [PATCH 2/6] docs(examples): update react-scripts based examples to react18 and rq v4-beta --- examples/basic-graphql-request/package.json | 8 ++++---- examples/basic-graphql-request/src/index.js | 6 +++--- examples/basic-typescript/package.json | 8 ++++---- examples/basic-typescript/src/index.tsx | 4 ++-- examples/basic/package.json | 6 +++--- examples/basic/src/index.js | 16 +++++++++------- examples/custom-hooks/package.json | 8 ++++---- examples/custom-hooks/src/index.js | 4 ++-- examples/default-query-function/package.json | 8 ++++---- examples/default-query-function/src/index.js | 6 +++--- examples/offline/package.json | 6 +++--- examples/offline/src/index.js | 14 ++++++-------- examples/playground/package.json | 6 +++--- examples/playground/src/index.js | 8 ++++---- examples/rick-morty/package.json | 6 +++--- examples/rick-morty/src/index.js | 4 ++-- examples/simple/package.json | 8 ++++---- examples/simple/src/index.js | 10 +++++----- examples/star-wars/package.json | 8 ++++---- examples/star-wars/src/index.js | 4 ++-- 20 files changed, 74 insertions(+), 74 deletions(-) diff --git a/examples/basic-graphql-request/package.json b/examples/basic-graphql-request/package.json index d8081ff1ec..2e2c674cab 100644 --- 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 index e8724bfd47..0445031b73 100644 --- 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(, rootElement); +ReactDOM.createRoot(rootElement).render(); diff --git a/examples/basic-typescript/package.json b/examples/basic-typescript/package.json index 868a58d9f9..cb61d697aa 100644 --- 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 index 4a969879e7..595681b4c7 100644 --- a/examples/basic-typescript/src/index.tsx +++ b/examples/basic-typescript/src/index.tsx @@ -1,6 +1,6 @@ /* 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, @@ -150,4 +150,4 @@ function App() { } const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +ReactDOM.createRoot(rootElement).render(); diff --git a/examples/basic/package.json b/examples/basic/package.json index 14809056df..df287f9ed9 100644 --- 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 index 638eef5425..a084addf4a 100644 --- 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,8 +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' +import { persistQueryClient } from "react-query/persistQueryClient"; +import { createWebStoragePersister } from "react-query/createWebStoragePersister"; const queryClient = new QueryClient({ defaultOptions: { @@ -18,14 +18,16 @@ const queryClient = new QueryClient({ cacheTime: 1000 * 60 * 60 * 24, // 24 hours }, }, -}) +}); -const localStoragePersister = createWebStoragePersister({storage: window.localStorage}) +const localStoragePersister = createWebStoragePersister({ + storage: window.localStorage, +}); persistQueryClient({ queryClient, persister: localStoragePersister, -}) +}); function App() { const [postId, setPostId] = React.useState(-1); @@ -146,4 +148,4 @@ function Post({ postId, setPostId }) { } const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +ReactDOM.createRoot(rootElement).render(); diff --git a/examples/custom-hooks/package.json b/examples/custom-hooks/package.json index 4dddacc1ac..252af56563 100644 --- 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 index 6483010550..2246ef7400 100644 --- 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(, rootElement); +ReactDOM.createRoot(rootElement).render(); diff --git a/examples/default-query-function/package.json b/examples/default-query-function/package.json index 487cfbe41b..dc0b4e337a 100644 --- 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 index 51836d9698..5f37c4da52 100644 --- 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 (
@@ -129,4 +129,4 @@ function Post({ postId, setPostId }) { } const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +ReactDOM.createRoot(rootElement).render(); diff --git a/examples/offline/package.json b/examples/offline/package.json index 47018fb3a1..9175eacd09 100644 --- 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 index 3160f091bb..98b53092e8 100644 --- 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( - -
- -
- , - document.getElementById("root") +const rootElement = document.getElementById("root"); +ReactDOM.createRoot(rootElement).render( +
+ +
); diff --git a/examples/playground/package.json b/examples/playground/package.json index b6526bf337..e58a8744ee 100644 --- 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" diff --git a/examples/playground/src/index.js b/examples/playground/src/index.js index 8ae322a4f2..38adf7222d 100644 --- a/examples/playground/src/index.js +++ b/examples/playground/src/index.js @@ -1,5 +1,5 @@ import React from "react"; -import ReactDOM from "react-dom"; +import ReactDOM from "react-dom/client"; import { QueryClient, @@ -254,7 +254,7 @@ function EditTodo({ editingIndex, setEditingIndex }) { const saveMutation = useMutation(patchTodo, { onSuccess: (data) => { // Update `todos` and the individual todo queries when this mutation succeeds - queryClient.invalidateQueries(['todos']); + queryClient.invalidateQueries(["todos"]); queryClient.setQueryData(["todo", { id: editingIndex }], data); }, }); @@ -340,7 +340,7 @@ function AddTodo() { const addMutation = useMutation(postTodo, { onSuccess: () => { - queryClient.invalidateQueries(['todos']); + queryClient.invalidateQueries(["todos"]); }, }); @@ -440,4 +440,4 @@ function patchTodo(todo) { } const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +ReactDOM.createRoot(rootElement).render(); diff --git a/examples/rick-morty/package.json b/examples/rick-morty/package.json index 959c7cbc85..97a4f99f81 100644 --- a/examples/rick-morty/package.json +++ b/examples/rick-morty/package.json @@ -8,9 +8,9 @@ }, "dependencies": { "@material-ui/core": "^4.9.7", - "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-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-scripts": "3.0.1", diff --git a/examples/rick-morty/src/index.js b/examples/rick-morty/src/index.js index 232352416b..bb0b9407de 100644 --- a/examples/rick-morty/src/index.js +++ b/examples/rick-morty/src/index.js @@ -1,7 +1,7 @@ import React from "react"; -import ReactDOM from "react-dom"; +import ReactDOM from "react-dom/client"; import App from "./App"; const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +ReactDOM.createRoot(rootElement).render(); diff --git a/examples/simple/package.json b/examples/simple/package.json index 487cfbe41b..dc0b4e337a 100644 --- a/examples/simple/package.json +++ b/examples/simple/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/simple/src/index.js b/examples/simple/src/index.js index 7f0e64c0f9..aa594cf4ff 100644 --- a/examples/simple/src/index.js +++ b/examples/simple/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, useQuery } from "react-query"; import { ReactQueryDevtools } from "react-query/devtools"; import axios from "axios"; @@ -17,9 +17,9 @@ export default function App() { function Example() { const { isLoading, error, data, isFetching } = useQuery(["repoData"], () => - axios.get( - "https://api.github.com/repos/tannerlinsley/react-query" - ).then((res) => res.data) + axios + .get("https://api.github.com/repos/tannerlinsley/react-query") + .then((res) => res.data) ); if (isLoading) return "Loading..."; @@ -40,4 +40,4 @@ function Example() { } const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +ReactDOM.createRoot(rootElement).render(); diff --git a/examples/star-wars/package.json b/examples/star-wars/package.json index f5c1f60724..b31e7053b8 100644 --- a/examples/star-wars/package.json +++ b/examples/star-wars/package.json @@ -8,10 +8,10 @@ }, "dependencies": { "@material-ui/core": "^4.9.7", - "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-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-scripts": "3.0.1", diff --git a/examples/star-wars/src/index.js b/examples/star-wars/src/index.js index 232352416b..bb0b9407de 100644 --- a/examples/star-wars/src/index.js +++ b/examples/star-wars/src/index.js @@ -1,7 +1,7 @@ import React from "react"; -import ReactDOM from "react-dom"; +import ReactDOM from "react-dom/client"; import App from "./App"; const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +ReactDOM.createRoot(rootElement).render(); From f42cbf4ecab2e7ac96e10f18e42e425f4602539e Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Sun, 3 Apr 2022 17:18:05 +0200 Subject: [PATCH 3/6] docs(examples): use react-query v4 in all examples --- examples/auto-refetching/package.json | 2 +- examples/focus-refetching/package.json | 2 +- examples/load-more-infinite-scroll/package.json | 2 +- examples/nextjs/package.json | 2 +- examples/optimistic-updates-typescript/package.json | 2 +- examples/optimistic-updates/package.json | 2 +- examples/pagination/package.json | 2 +- examples/prefetching/package.json | 2 +- examples/react-native/package.json | 2 +- examples/suspense/package.json | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/examples/auto-refetching/package.json b/examples/auto-refetching/package.json index 925d81daac..4c41d139fe 100644 --- 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/focus-refetching/package.json b/examples/focus-refetching/package.json index 1dd00ef7c0..671c5f00ee 100644 --- 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 index 142754b0af..ca756c669b 100644 --- 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 index a502e07e62..a1a4100b9d 100644 --- 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/optimistic-updates-typescript/package.json b/examples/optimistic-updates-typescript/package.json index f064328efc..e172cdf5a7 100755 --- 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 index 2cea50b31e..24c66a6cd6 100755 --- 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 index c420f68359..5dc8dad27c 100644 --- 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/prefetching/package.json b/examples/prefetching/package.json index 283051e58a..62f16f6e0d 100644 --- a/examples/prefetching/package.json +++ b/examples/prefetching/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/react-native/package.json b/examples/react-native/package.json index 1f9aefd342..9ef3bac895 100644 --- a/examples/react-native/package.json +++ b/examples/react-native/package.json @@ -24,7 +24,7 @@ "react-dom": "17.0.1", "react-native": "0.64.3", "react-native-web": "0.17.1", - "react-query": "^3.34.7", + "react-query": "^4.0.0-beta.1", "expo-constants": "~12.1.3", "react-native-paper": "4.9.2", "react-native-screens": "~3.8.0", diff --git a/examples/suspense/package.json b/examples/suspense/package.json index a8187d6e19..4ed73b61e7 100644 --- a/examples/suspense/package.json +++ b/examples/suspense/package.json @@ -9,7 +9,7 @@ "react": "^18.0.0", "react-dom": "^18.0.0", "react-error-boundary": "^2.2.3", - "react-query": "^3.5.0", + "react-query": "^4.0.0-beta.1", "react-scripts": "3.0.1" }, "devDependencies": { From e1e1476a2d9e0b6254f42285010a4d0d8bb63e97 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Sun, 3 Apr 2022 17:24:44 +0200 Subject: [PATCH 4/6] docs(examples): remove old version of persistence and use the dedicated provider instead --- examples/basic-typescript/src/index.tsx | 28 ++++++++++++++++++------- examples/basic/src/index.js | 19 +---------------- 2 files changed, 21 insertions(+), 26 deletions(-) diff --git a/examples/basic-typescript/src/index.tsx b/examples/basic-typescript/src/index.tsx index 595681b4c7..fcf80c46a9 100644 --- a/examples/basic-typescript/src/index.tsx +++ b/examples/basic-typescript/src/index.tsx @@ -2,15 +2,24 @@ import * as React from "react"; import ReactDOM from "react-dom/client"; import axios from "axios"; +import { useQuery, useQueryClient, QueryClient } from "react-query"; import { - useQuery, - useQueryClient, - QueryClient, - QueryClientProvider, -} from "react-query"; + PersistQueryClientProvider, + createWebStoragePersister, +} from "react-query/persistQueryClient"; 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 +137,10 @@ function App() { const [postId, setPostId] = React.useState(-1); return ( - +

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,7 +157,7 @@ function App() { )} - + ); } diff --git a/examples/basic/src/index.js b/examples/basic/src/index.js index a084addf4a..cb8c992dc1 100644 --- a/examples/basic/src/index.js +++ b/examples/basic/src/index.js @@ -9,25 +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); From 84d523f3544c8021d32eba4d41ad0d4f1518658c Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Sun, 3 Apr 2022 17:38:34 +0200 Subject: [PATCH 5/6] docs: use createRoot in the docs --- docs/src/pages/plugins/persistQueryClient.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/docs/src/pages/plugins/persistQueryClient.md b/docs/src/pages/plugins/persistQueryClient.md index cbd29513f5..c0af288d32 100644 --- 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(, rootElement) +ReactDOM.createRoot(rootElement).render() ``` ### PeristQueryClientProvider @@ -199,14 +199,13 @@ const persister = createWebStoragePersister({ storage: window.localStorage, }) -ReactDOM.render( +ReactDOM.createRoot(rootElement).render( - , - rootElement + ) ``` From b9dd2feedcde8f4bad290db9d2f2f70797838ac8 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Sun, 3 Apr 2022 17:43:21 +0200 Subject: [PATCH 6/6] docs(examples): fix import of createWebStoragePersister --- examples/basic-typescript/src/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/basic-typescript/src/index.tsx b/examples/basic-typescript/src/index.tsx index fcf80c46a9..a7233acb52 100644 --- a/examples/basic-typescript/src/index.tsx +++ b/examples/basic-typescript/src/index.tsx @@ -3,10 +3,8 @@ import * as React from "react"; import ReactDOM from "react-dom/client"; import axios from "axios"; import { useQuery, useQueryClient, QueryClient } from "react-query"; -import { - PersistQueryClientProvider, - createWebStoragePersister, -} from "react-query/persistQueryClient"; +import { PersistQueryClientProvider } from "react-query/persistQueryClient"; +import { createWebStoragePersister } from "react-query/createWebStoragePersister"; import { ReactQueryDevtools } from "react-query/devtools"; const queryClient = new QueryClient({