From cc7bbfda229014ec9c6fe2227e578447165987dd Mon Sep 17 00:00:00 2001 From: FaberVitale Date: Sat, 11 Jun 2022 11:27:24 +0200 Subject: [PATCH 1/9] chore: upgrade /react(-dom)?/ to 18 and react-redux to 8 Changes: 1. updates resolutions of react, react-redux & react-dom 2. adds @types/react & @types/react-dom to resolutions 3. removes @types/react-redux (no longer necessary) 4. upgrages react, react-redux, react-dom, @types/react & @types/react-dom in every workspace --- examples/action-listener/counter/package.json | 18 +- examples/query/react/advanced/package.json | 11 +- .../package.json | 11 +- .../query/react/authentication/package.json | 11 +- examples/query/react/basic/package.json | 11 +- .../react/conditional-fetching/package.json | 11 +- .../query/react/deduping-queries/package.json | 11 +- .../query/react/graphql-codegen/package.json | 11 +- examples/query/react/graphql/package.json | 11 +- .../query/react/kitchen-sink/package.json | 11 +- examples/query/react/mutations/package.json | 11 +- .../react/optimistic-update/package.json | 11 +- examples/query/react/pagination/package.json | 11 +- examples/query/react/polling/package.json | 11 +- .../package.json | 11 +- .../react/prefetching-automatic/package.json | 11 +- examples/query/react/prefetching/package.json | 11 +- .../query/react/with-apiprovider/package.json | 11 +- package.json | 8 +- packages/toolkit/package.json | 5 +- .../toolkit/src/query/react/buildHooks.ts | 4 +- website/package.json | 4 +- yarn.lock | 375 ++++++++---------- 23 files changed, 269 insertions(+), 332 deletions(-) diff --git a/examples/action-listener/counter/package.json b/examples/action-listener/counter/package.json index 2fd65fb97f..162ff26f45 100644 --- a/examples/action-listener/counter/package.json +++ b/examples/action-listener/counter/package.json @@ -5,12 +5,12 @@ "dependencies": { "@reduxjs/toolkit": "^1.8.0", "@types/node": "^12.0.0", - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", + "@types/react": "^18.0.12", + "@types/react-dom": "^18.0.5", "clsx": "1.1.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-redux": "7.2.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-scripts": "4.0.3", "typescript": "~4.2.4" }, @@ -22,9 +22,11 @@ }, "eslintConfig": { "extends": [ - "react-app", - "react-app/jest" - ] + "react-app" + ], + "rules": { + "react/react-in-jsx-scope": "off" + } }, "browserslist": { "production": [ diff --git a/examples/query/react/advanced/package.json b/examples/query/react/advanced/package.json index e7f3b2f271..e81c1438e2 100644 --- a/examples/query/react/advanced/package.json +++ b/examples/query/react/advanced/package.json @@ -7,15 +7,14 @@ "main": "src/index.tsx", "dependencies": { "@reduxjs/toolkit": "^1.6.0-rc.1", - "react": "17.0.0", - "react-dom": "17.0.0", - "react-redux": "7.2.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-scripts": "4.0.2" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "typescript": "~4.2.4" }, "eslintConfig": { diff --git a/examples/query/react/authentication-with-extrareducers/package.json b/examples/query/react/authentication-with-extrareducers/package.json index 5e403f19a5..e2353138a5 100644 --- a/examples/query/react/authentication-with-extrareducers/package.json +++ b/examples/query/react/authentication-with-extrareducers/package.json @@ -12,17 +12,16 @@ "@reduxjs/toolkit": "^1.6.0-rc.1", "framer-motion": "^2.9.5", "msw": "^0.41.1", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, diff --git a/examples/query/react/authentication/package.json b/examples/query/react/authentication/package.json index 8ee457d511..6a08b7e5b9 100644 --- a/examples/query/react/authentication/package.json +++ b/examples/query/react/authentication/package.json @@ -12,17 +12,16 @@ "@reduxjs/toolkit": "^1.6.0-rc.1", "framer-motion": "^2.9.5", "msw": "^0.41.1", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, diff --git a/examples/query/react/basic/package.json b/examples/query/react/basic/package.json index b8de55c899..22e037e05d 100644 --- a/examples/query/react/basic/package.json +++ b/examples/query/react/basic/package.json @@ -7,17 +7,16 @@ "main": "src/index.tsx", "dependencies": { "@reduxjs/toolkit": "^1.6.0-rc.1", - "react": "17.0.0", - "react-dom": "17.0.0", - "react-redux": "7.2.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-scripts": "4.0.2" }, "devDependencies": { "@testing-library/react": "^12.0.0", "@types/jest": "^26.0.23", - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "msw": "^0.41.1", "typescript": "~4.2.4" }, diff --git a/examples/query/react/conditional-fetching/package.json b/examples/query/react/conditional-fetching/package.json index 5ebeeb7c98..dd5d8dded7 100644 --- a/examples/query/react/conditional-fetching/package.json +++ b/examples/query/react/conditional-fetching/package.json @@ -7,15 +7,14 @@ "main": "src/index.tsx", "dependencies": { "@reduxjs/toolkit": "^1.6.0-rc.1", - "react": "17.0.0", - "react-dom": "17.0.0", - "react-redux": "7.2.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-scripts": "4.0.2" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "typescript": "~4.2.4" }, "eslintConfig": { diff --git a/examples/query/react/deduping-queries/package.json b/examples/query/react/deduping-queries/package.json index 597aac4bdd..85abdbcf29 100644 --- a/examples/query/react/deduping-queries/package.json +++ b/examples/query/react/deduping-queries/package.json @@ -7,15 +7,14 @@ "main": "src/index.tsx", "dependencies": { "@reduxjs/toolkit": "^1.6.0-rc.1", - "react": "17.0.0", - "react-dom": "17.0.0", - "react-redux": "7.2.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-scripts": "4.0.2" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "typescript": "~4.2.4" }, "eslintConfig": { diff --git a/examples/query/react/graphql-codegen/package.json b/examples/query/react/graphql-codegen/package.json index 591dfafb89..d538a58db2 100644 --- a/examples/query/react/graphql-codegen/package.json +++ b/examples/query/react/graphql-codegen/package.json @@ -16,10 +16,10 @@ "graphql": "^15.5.0", "graphql-request": "^3.4.0", "msw": "0.28.2", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2" }, @@ -34,9 +34,8 @@ "@graphql-codegen/typescript-rtk-query": "^1.1.0", "@graphql-typed-document-node/core": "^3.1.0", "@types/faker": "^5.5.5", - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "@types/webpack-env": "^1.16.0", "concurrently": "^6.2.0", diff --git a/examples/query/react/graphql/package.json b/examples/query/react/graphql/package.json index 9767982c13..7eab191775 100644 --- a/examples/query/react/graphql/package.json +++ b/examples/query/react/graphql/package.json @@ -17,18 +17,17 @@ "graphql": "^15.5.0", "graphql-request": "^3.4.0", "msw": "0.28.2", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2" }, "devDependencies": { "@types/faker": "^5.5.5", - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, diff --git a/examples/query/react/kitchen-sink/package.json b/examples/query/react/kitchen-sink/package.json index 7a942545bb..b454e2db82 100644 --- a/examples/query/react/kitchen-sink/package.json +++ b/examples/query/react/kitchen-sink/package.json @@ -8,9 +8,9 @@ "dependencies": { "@reduxjs/toolkit": "1.8.1", "msw": "^0.41.1", - "react": "17.0.0", - "react-dom": "17.0.0", - "react-redux": "7.2.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-router-dom": "5.3.0", "react-scripts": "4.0.2" }, @@ -19,9 +19,8 @@ "@testing-library/react": "^12.0.0", "@types/jest": "^26.0.23", "@types/node": "^14.14.6", - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "typescript": "~4.2.4", "whatwg-fetch": "^3.4.1" }, diff --git a/examples/query/react/mutations/package.json b/examples/query/react/mutations/package.json index dcecde0b2a..642c9e8b7c 100644 --- a/examples/query/react/mutations/package.json +++ b/examples/query/react/mutations/package.json @@ -13,17 +13,16 @@ "@reduxjs/toolkit": "^1.6.0-rc.1", "framer-motion": "^2.9.5", "msw": "^0.41.1", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, diff --git a/examples/query/react/optimistic-update/package.json b/examples/query/react/optimistic-update/package.json index d4253f8642..e59f46811a 100644 --- a/examples/query/react/optimistic-update/package.json +++ b/examples/query/react/optimistic-update/package.json @@ -13,18 +13,17 @@ "@reduxjs/toolkit": "^1.6.0-rc.1", "framer-motion": "^2.9.5", "msw": "^0.41.1", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2", "uuid": "^8.3.2" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4", "whatwg-fetch": "^3.4.1" diff --git a/examples/query/react/pagination/package.json b/examples/query/react/pagination/package.json index bc8f2a7874..49a58124ae 100644 --- a/examples/query/react/pagination/package.json +++ b/examples/query/react/pagination/package.json @@ -14,18 +14,17 @@ "faker": "^5.5.3", "framer-motion": "^2.9.5", "msw": "^0.41.1", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2" }, "devDependencies": { "@types/faker": "^5.5.5", - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, diff --git a/examples/query/react/polling/package.json b/examples/query/react/polling/package.json index f87af6875f..1dee99494f 100644 --- a/examples/query/react/polling/package.json +++ b/examples/query/react/polling/package.json @@ -7,15 +7,14 @@ "main": "src/index.tsx", "dependencies": { "@reduxjs/toolkit": "^1.6.0-rc.1", - "react": "17.0.0", - "react-dom": "17.0.0", - "react-redux": "7.2.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-scripts": "4.0.2" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "typescript": "~4.2.4" }, "eslintConfig": { diff --git a/examples/query/react/prefetching-automatic-waterfall/package.json b/examples/query/react/prefetching-automatic-waterfall/package.json index fea385f4bb..9c0a8392e1 100644 --- a/examples/query/react/prefetching-automatic-waterfall/package.json +++ b/examples/query/react/prefetching-automatic-waterfall/package.json @@ -14,18 +14,17 @@ "faker": "^5.5.3", "framer-motion": "^2.9.5", "msw": "^0.41.1", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2" }, "devDependencies": { "@types/faker": "^5.5.5", - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, diff --git a/examples/query/react/prefetching-automatic/package.json b/examples/query/react/prefetching-automatic/package.json index 7967f70934..54866097dc 100644 --- a/examples/query/react/prefetching-automatic/package.json +++ b/examples/query/react/prefetching-automatic/package.json @@ -14,18 +14,17 @@ "faker": "^5.5.3", "framer-motion": "^2.9.5", "msw": "^0.41.1", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2" }, "devDependencies": { "@types/faker": "^5.5.5", - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, diff --git a/examples/query/react/prefetching/package.json b/examples/query/react/prefetching/package.json index 74e8913b67..c0a5a70046 100644 --- a/examples/query/react/prefetching/package.json +++ b/examples/query/react/prefetching/package.json @@ -14,18 +14,17 @@ "faker": "^5.5.3", "framer-motion": "^2.9.5", "msw": "^0.41.1", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-icons": "3.11.0", - "react-redux": "^7.2.4", + "react-redux": "^8.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.2" }, "devDependencies": { "@types/faker": "^5.5.5", - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, diff --git a/examples/query/react/with-apiprovider/package.json b/examples/query/react/with-apiprovider/package.json index 296d84aeef..b22a347e88 100644 --- a/examples/query/react/with-apiprovider/package.json +++ b/examples/query/react/with-apiprovider/package.json @@ -7,15 +7,14 @@ "main": "src/index.tsx", "dependencies": { "@reduxjs/toolkit": "^1.6.0-rc.1", - "react": "17.0.0", - "react-dom": "17.0.0", - "react-redux": "7.2.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-scripts": "4.0.2" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "typescript": "~4.2.4" }, "eslintConfig": { diff --git a/package.json b/package.json index 8499cb840e..bf77ac01a1 100644 --- a/package.json +++ b/package.json @@ -39,9 +39,11 @@ "resolutions": { "react-scripts": "patch:react-scripts@npm:4.0.2#.yarn/patches/react-scripts__npm_4.0.2.patch", "console-testing-library": "patch:console-testing-library@npm:0.3.1#.yarn/patches/console-testing-library__npm_0.3.1.patch", - "react-redux": "npm:7.2.4", - "react": "npm:17.0.2", - "react-dom": "npm:17.0.2", + "react-redux": "npm:8.0.2", + "react": "npm:18.1.0", + "react-dom": "npm:18.1.0", + "@types/react": "npm:18.0.12", + "@types/react-dom": "npm:18.0.5", "@types/inquirer": "npm:8.2.1" }, "scripts": { diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json index 18e59a3af5..d4890bf3fe 100644 --- a/packages/toolkit/package.json +++ b/packages/toolkit/package.json @@ -38,9 +38,8 @@ "@types/nanoid": "^2.1.0", "@types/node": "^10.14.4", "@types/query-string": "^6.3.0", - "@types/react": "^17.0.3", - "@types/react-dom": "^17.0.3", - "@types/react-redux": "^7.1.16", + "@types/react": "^18.0.12", + "@types/react-dom": "^18.0.5", "@types/yargs": "^16.0.1", "@typescript-eslint/eslint-plugin": "^4.22.0", "@typescript-eslint/parser": "^4.22.0", diff --git a/packages/toolkit/src/query/react/buildHooks.ts b/packages/toolkit/src/query/react/buildHooks.ts index 4602b35aa4..f69dcf04c1 100644 --- a/packages/toolkit/src/query/react/buildHooks.ts +++ b/packages/toolkit/src/query/react/buildHooks.ts @@ -818,7 +818,7 @@ export function buildHooks({ shallowEqual ) - const store = useStore() + const store = useStore>() const newLastValue = selectDefaultResult( store.getState(), lastValue.current @@ -886,7 +886,7 @@ export function buildHooks({ ) const triggerMutation = useCallback( - function (arg) { + function (arg: Parameters['0']) { const promise = dispatch(initiate(arg, { fixedCacheKey })) setPromise(promise) return promise diff --git a/website/package.json b/website/package.json index 7fbd6869ed..14b5c820e4 100644 --- a/website/package.json +++ b/website/package.json @@ -12,8 +12,8 @@ "@docusaurus/core": "2.0.0-beta.7", "@docusaurus/preset-classic": "2.0.0-beta.7", "classnames": "^2.2.6", - "react": "17.0.2", - "react-dom": "17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-lite-youtube-embed": "^2.0.3", "remark-typescript-tools": "^1.0.8", "typescript": "~4.2.4" diff --git a/yarn.lock b/yarn.lock index de5997b9cd..5c6d163e8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3674,12 +3674,12 @@ __metadata: dependencies: "@reduxjs/toolkit": ^1.8.0 "@types/node": ^12.0.0 - "@types/react": ^17.0.0 - "@types/react-dom": ^17.0.0 + "@types/react": ^18.0.12 + "@types/react-dom": ^18.0.5 clsx: 1.1.1 - react: ^17.0.2 - react-dom: ^17.0.2 - react-redux: 7.2.2 + react: ^18.1.0 + react-dom: ^18.1.0 + react-redux: ^8.0.2 react-scripts: 4.0.3 typescript: ~4.2.4 languageName: unknown @@ -3690,12 +3690,11 @@ __metadata: resolution: "@examples-query-react/advanced@workspace:examples/query/react/advanced" dependencies: "@reduxjs/toolkit": ^1.6.0-rc.1 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 - react: 17.0.0 - react-dom: 17.0.0 - react-redux: 7.2.2 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 + react: ^18.1.0 + react-dom: ^18.1.0 + react-redux: ^8.0.2 react-scripts: 4.0.2 typescript: ~4.2.4 languageName: unknown @@ -3709,16 +3708,15 @@ __metadata: "@emotion/react": ^11.4.0 "@emotion/styled": ^11.3.0 "@reduxjs/toolkit": ^1.6.0-rc.1 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 framer-motion: ^2.9.5 msw: ^0.41.1 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -3733,16 +3731,15 @@ __metadata: "@emotion/react": ^11.4.0 "@emotion/styled": ^11.3.0 "@reduxjs/toolkit": ^1.6.0-rc.1 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 framer-motion: ^2.9.5 msw: ^0.41.1 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -3756,13 +3753,12 @@ __metadata: "@reduxjs/toolkit": ^1.6.0-rc.1 "@testing-library/react": ^12.0.0 "@types/jest": ^26.0.23 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 msw: ^0.41.1 - react: 17.0.0 - react-dom: 17.0.0 - react-redux: 7.2.2 + react: ^18.1.0 + react-dom: ^18.1.0 + react-redux: ^8.0.2 react-scripts: 4.0.2 typescript: ~4.2.4 languageName: unknown @@ -3773,12 +3769,11 @@ __metadata: resolution: "@examples-query-react/conditional-fetching@workspace:examples/query/react/conditional-fetching" dependencies: "@reduxjs/toolkit": ^1.6.0-rc.1 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 - react: 17.0.0 - react-dom: 17.0.0 - react-redux: 7.2.2 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 + react: ^18.1.0 + react-dom: ^18.1.0 + react-redux: ^8.0.2 react-scripts: 4.0.2 typescript: ~4.2.4 languageName: unknown @@ -3789,12 +3784,11 @@ __metadata: resolution: "@examples-query-react/deduping-queries@workspace:examples/query/react/deduping-queries" dependencies: "@reduxjs/toolkit": ^1.6.0-rc.1 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 - react: 17.0.0 - react-dom: 17.0.0 - react-redux: 7.2.2 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 + react: ^18.1.0 + react-dom: ^18.1.0 + react-redux: ^8.0.2 react-scripts: 4.0.2 typescript: ~4.2.4 languageName: unknown @@ -3820,9 +3814,8 @@ __metadata: "@reduxjs/toolkit": ^1.6.0 "@rtk-query/graphql-request-base-query": ^2.0.0 "@types/faker": ^5.5.5 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 "@types/webpack-env": ^1.16.0 concurrently: ^6.2.0 @@ -3832,10 +3825,10 @@ __metadata: graphql: ^15.5.0 graphql-request: ^3.4.0 msw: 0.28.2 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 ts-node: ^10.0.0 @@ -3854,19 +3847,18 @@ __metadata: "@reduxjs/toolkit": ^1.6.0-rc.1 "@rtk-query/graphql-request-base-query": ^2.0.0 "@types/faker": ^5.5.5 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 faker: ^5.5.3 framer-motion: ^2.9.5 graphql: ^15.5.0 graphql-request: ^3.4.0 msw: 0.28.2 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -3882,13 +3874,12 @@ __metadata: "@testing-library/react": ^12.0.0 "@types/jest": ^26.0.23 "@types/node": ^14.14.6 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 msw: ^0.41.1 - react: 17.0.0 - react-dom: 17.0.0 - react-redux: 7.2.2 + react: ^18.1.0 + react-dom: ^18.1.0 + react-redux: ^8.0.2 react-router-dom: 5.3.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -3905,16 +3896,15 @@ __metadata: "@emotion/styled": ^11.3.0 "@mswjs/data": ^0.3.0 "@reduxjs/toolkit": ^1.6.0-rc.1 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 framer-motion: ^2.9.5 msw: ^0.41.1 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -3930,16 +3920,15 @@ __metadata: "@emotion/styled": ^11.3.0 "@mswjs/data": ^0.3.0 "@reduxjs/toolkit": ^1.6.0-rc.1 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 framer-motion: ^2.9.5 msw: ^0.41.1 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -3958,17 +3947,16 @@ __metadata: "@mswjs/data": ^0.3.0 "@reduxjs/toolkit": ^1.6.0-rc.1 "@types/faker": ^5.5.5 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 faker: ^5.5.3 framer-motion: ^2.9.5 msw: ^0.41.1 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -3980,12 +3968,11 @@ __metadata: resolution: "@examples-query-react/polling@workspace:examples/query/react/polling" dependencies: "@reduxjs/toolkit": ^1.6.0-rc.1 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 - react: 17.0.0 - react-dom: 17.0.0 - react-redux: 7.2.2 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 + react: ^18.1.0 + react-dom: ^18.1.0 + react-redux: ^8.0.2 react-scripts: 4.0.2 typescript: ~4.2.4 languageName: unknown @@ -4001,17 +3988,16 @@ __metadata: "@mswjs/data": ^0.3.0 "@reduxjs/toolkit": ^1.6.0-rc.1 "@types/faker": ^5.5.5 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 faker: ^5.5.3 framer-motion: ^2.9.5 msw: ^0.41.1 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -4028,17 +4014,16 @@ __metadata: "@mswjs/data": ^0.3.0 "@reduxjs/toolkit": ^1.6.0-rc.1 "@types/faker": ^5.5.5 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 faker: ^5.5.3 framer-motion: ^2.9.5 msw: ^0.41.1 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -4055,17 +4040,16 @@ __metadata: "@mswjs/data": ^0.3.0 "@reduxjs/toolkit": ^1.6.0-rc.1 "@types/faker": ^5.5.5 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 "@types/react-router-dom": 5.1.6 faker: ^5.5.3 framer-motion: ^2.9.5 msw: ^0.41.1 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-icons: 3.11.0 - react-redux: ^7.2.4 + react-redux: ^8.0.2 react-router-dom: 5.2.0 react-scripts: 4.0.2 typescript: ~4.2.4 @@ -4077,12 +4061,11 @@ __metadata: resolution: "@examples-query-react/with-apiprovider@workspace:examples/query/react/with-apiprovider" dependencies: "@reduxjs/toolkit": ^1.6.0-rc.1 - "@types/react": 17.0.0 - "@types/react-dom": 17.0.0 - "@types/react-redux": 7.1.9 - react: 17.0.0 - react-dom: 17.0.0 - react-redux: 7.2.2 + "@types/react": ^18.0.5 + "@types/react-dom": ^18.0.5 + react: ^18.1.0 + react-dom: ^18.1.0 + react-redux: ^8.0.2 react-scripts: 4.0.2 typescript: ~4.2.4 languageName: unknown @@ -5511,9 +5494,8 @@ __metadata: "@types/nanoid": ^2.1.0 "@types/node": ^10.14.4 "@types/query-string": ^6.3.0 - "@types/react": ^17.0.3 - "@types/react-dom": ^17.0.3 - "@types/react-redux": ^7.1.16 + "@types/react": ^18.0.12 + "@types/react-dom": ^18.0.5 "@types/yargs": ^16.0.1 "@typescript-eslint/eslint-plugin": ^4.22.0 "@typescript-eslint/parser": ^4.22.0 @@ -6431,7 +6413,7 @@ __metadata: languageName: node linkType: hard -"@types/hoist-non-react-statics@npm:^3.3.0": +"@types/hoist-non-react-statics@npm:^3.3.0, @types/hoist-non-react-statics@npm:^3.3.1": version: 3.3.1 resolution: "@types/hoist-non-react-statics@npm:3.3.1" dependencies: @@ -6783,46 +6765,16 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:17.0.0": - version: 17.0.0 - resolution: "@types/react-dom@npm:17.0.0" +"@types/react-dom@npm:18.0.5": + version: 18.0.5 + resolution: "@types/react-dom@npm:18.0.5" dependencies: "@types/react": "*" - checksum: d0f989e12fabb2572a38d79630c209499afa2edc865cc3ebc50333845715bd73d88ac88e24274977cd62433e46e91ddf94c30c2c12f89e427bbb739682caf677 + checksum: cd48b81950f499b52a3f0c08261f00046f9b7c96699fa249c9664e257e820daf6ecac815cd1028cebc9d105094adc39d047d1efd79214394b8b2d515574c0787 languageName: node linkType: hard -"@types/react-dom@npm:>=16.9.0, @types/react-dom@npm:^17.0.3": - version: 17.0.6 - resolution: "@types/react-dom@npm:17.0.6" - dependencies: - "@types/react": "*" - checksum: cc167c24a77cef2be8dcabd1bbe8b95c0d713b943b2f1c8a1468c8009c50daad51a46859a217a8383b89bb4ea499937d405699ce8db164f70c871f9d22d703f0 - languageName: node - linkType: hard - -"@types/react-dom@npm:^17.0.0": - version: 17.0.11 - resolution: "@types/react-dom@npm:17.0.11" - dependencies: - "@types/react": "*" - checksum: 4d5730dffbef86c887cecad7e3cecda424ce6a64d0b5441c63b5b015d48219868660a2bb1aa15e897e565ad8867fa6b885d4358b04e1c4e589ba4c07c3fda55c - languageName: node - linkType: hard - -"@types/react-redux@npm:7.1.9": - version: 7.1.9 - resolution: "@types/react-redux@npm:7.1.9" - dependencies: - "@types/hoist-non-react-statics": ^3.3.0 - "@types/react": "*" - hoist-non-react-statics: ^3.3.0 - redux: ^4.0.0 - checksum: 9de7513cdb2105798168208c57878bc14539b51ba45639b4b9e1e99544dea506cc0bf4e24e4a25ef2845c1169bc51932462799a4bf763bd9c109232f6516af69 - languageName: node - linkType: hard - -"@types/react-redux@npm:^7.1.16, @types/react-redux@npm:^7.1.9": +"@types/react-redux@npm:^7.1.9": version: 7.1.16 resolution: "@types/react-redux@npm:7.1.16" dependencies: @@ -6864,46 +6816,14 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:>=16.9.0, @types/react@npm:^17.0.3": - version: 17.0.9 - resolution: "@types/react@npm:17.0.9" - dependencies: - "@types/prop-types": "*" - "@types/scheduler": "*" - csstype: ^3.0.2 - checksum: c626e3ca42b6173b0617102af6c1c8c6068f69fafeba51f5d614962cabaf98a5706295081941ece93da04117268cb0aad471be87e76dde7e0d5f79a46280c586 - languageName: node - linkType: hard - -"@types/react@npm:17.0.0": - version: 17.0.0 - resolution: "@types/react@npm:17.0.0" - dependencies: - "@types/prop-types": "*" - csstype: ^3.0.2 - checksum: 0767d1c635613cb08de1ad6b8f73e3ee01ae0069733fa56382c72a8dbed741849e74f62a17756c7b76ccd2b57dd9891d5767c3134f35788720c6bb9c186a933b - languageName: node - linkType: hard - -"@types/react@npm:^16.9.46": - version: 16.14.8 - resolution: "@types/react@npm:16.14.8" - dependencies: - "@types/prop-types": "*" - "@types/scheduler": "*" - csstype: ^3.0.2 - checksum: c24ddc95282358db7c26d3fba7d7e8cdfb768d6a4489386772c5fb0d30aa6bf8c22b04b55bf9ee0b9057278839dad5b22d24eaccc4ec352e77d8a05ce116623a - languageName: node - linkType: hard - -"@types/react@npm:^17.0.0": - version: 17.0.34 - resolution: "@types/react@npm:17.0.34" +"@types/react@npm:18.0.12": + version: 18.0.12 + resolution: "@types/react@npm:18.0.12" dependencies: "@types/prop-types": "*" "@types/scheduler": "*" csstype: ^3.0.2 - checksum: 16729ad7d50922ccbf8eb93874d7781dc2f1c64edc78134b5edc7154839d41e9fe320eb1c11ad2d1c9bf28b99cb1febda344509c1fda025955a5c2b43c688c8f + checksum: 526ea13b3adf7fe4b475e55b7426510a7861ef2910664a9014ef42cba0c699d5167dc378eb161e2ec26c07a3b6fde9b6bdcbbb6f4b5580612246bc289395ef03 languageName: node linkType: hard @@ -7044,6 +6964,13 @@ __metadata: languageName: node linkType: hard +"@types/use-sync-external-store@npm:^0.0.3": + version: 0.0.3 + resolution: "@types/use-sync-external-store@npm:0.0.3" + checksum: 161ddb8eec5dbe7279ac971531217e9af6b99f7783213566d2b502e2e2378ea19cf5e5ea4595039d730aa79d3d35c6567d48599f69773a02ffcff1776ec2a44e + languageName: node + linkType: hard + "@types/uuid@npm:^8.3.0": version: 8.3.0 resolution: "@types/uuid@npm:8.3.0" @@ -22184,16 +22111,15 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-dom@npm:17.0.2": - version: 17.0.2 - resolution: "react-dom@npm:17.0.2" +"react-dom@npm:18.1.0": + version: 18.1.0 + resolution: "react-dom@npm:18.1.0" dependencies: loose-envify: ^1.1.0 - object-assign: ^4.1.1 - scheduler: ^0.20.2 + scheduler: ^0.22.0 peerDependencies: - react: 17.0.2 - checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c + react: ^18.1.0 + checksum: bb0d48eeb0b297c79c2a03978baa29f5b3ff7ba3d070b21e34c9af1a6e7fdf0ca8b8d73e41f9214d91ad40eeb6d1f3559f884cbbc338713374a51320637c23df languageName: node linkType: hard @@ -22270,7 +22196,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1, react-is@npm:^16.8.4": +"react-is@npm:^16.6.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1, react-is@npm:^16.8.4": version: 16.13.1 resolution: "react-is@npm:16.13.1" checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f @@ -22284,6 +22210,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"react-is@npm:^18.0.0": + version: 18.1.0 + resolution: "react-is@npm:18.1.0" + checksum: d206a0fe6790851bff168727bfb896de02c5591695afb0c441163e8630136a3e13ee1a7ddd59fdccddcc93968b4721ae112c10f790b194b03b35a3dc13a355ef + languageName: node + linkType: hard + "react-json-view@npm:^1.21.3": version: 1.21.3 resolution: "react-json-view@npm:1.21.3" @@ -22339,24 +22272,35 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-redux@npm:7.2.4": - version: 7.2.4 - resolution: "react-redux@npm:7.2.4" +"react-redux@npm:8.0.2": + version: 8.0.2 + resolution: "react-redux@npm:8.0.2" dependencies: "@babel/runtime": ^7.12.1 - "@types/react-redux": ^7.1.16 + "@types/hoist-non-react-statics": ^3.3.1 + "@types/use-sync-external-store": ^0.0.3 hoist-non-react-statics: ^3.3.2 - loose-envify: ^1.4.0 - prop-types: ^15.7.2 - react-is: ^16.13.1 - peerDependencies: - react: ^16.8.3 || ^17 + react-is: ^18.0.0 + use-sync-external-store: ^1.0.0 + peerDependencies: + "@types/react": ^16.8 || ^17.0 || ^18.0 + "@types/react-dom": ^16.8 || ^17.0 || ^18.0 + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + react-native: ">=0.59" + redux: ^4 peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true react-dom: optional: true react-native: optional: true - checksum: 214fa1a4811f95090b77d96ec7114c322adf388b6d086ebebf50cdaf03549758037283f953d2b920cf6ee2f6ffad8f35e92f1ab959b3f2c957f5075d00e16d0a + redux: + optional: true + checksum: 44c1739c45dad04ecc65a290897c73828ff0bf43f2b7618ed5ef6d4ceecedae38e76cecd189a5ecedf579c28ead05427bc000fb45ad30b9fcd5c2be27cd3ac73 languageName: node linkType: hard @@ -22683,13 +22627,12 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react@npm:17.0.2": - version: 17.0.2 - resolution: "react@npm:17.0.2" +"react@npm:18.1.0": + version: 18.1.0 + resolution: "react@npm:18.1.0" dependencies: loose-envify: ^1.1.0 - object-assign: ^4.1.1 - checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b + checksum: 5bb296b561b43ef2220395da4faac86c14a087c8c80e1a7598a5740f01ee605c11eaf249985c1e2000971c4cd32ccb46d40f00479bbd9fb6b1c7cf857393b7d4 languageName: node linkType: hard @@ -23974,13 +23917,12 @@ resolve@~1.19.0: languageName: node linkType: hard -"scheduler@npm:^0.20.2": - version: 0.20.2 - resolution: "scheduler@npm:0.20.2" +"scheduler@npm:^0.22.0": + version: 0.22.0 + resolution: "scheduler@npm:0.22.0" dependencies: loose-envify: ^1.1.0 - object-assign: ^4.1.1 - checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc + checksum: a8ef5cab769c020cd6382ad9ecc3f72dbde56a50a36639b3a42ad9c11f7724f03700bcad373044059b8067d4a6365154dc7c0ca8027ef20ff4900cf58a0fc2c5 languageName: node linkType: hard @@ -26876,6 +26818,15 @@ resolve@~1.19.0: languageName: node linkType: hard +"use-sync-external-store@npm:^1.0.0": + version: 1.1.0 + resolution: "use-sync-external-store@npm:1.1.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 8993a0b642f91d7fcdbb02b7b3ac984bd3af4769686f38291fe7fcfe73dfb73d6c64d20dfb7e5e7fbf5a6da8f5392d6f8e5b00c243a04975595946e82c02b883 + languageName: node + linkType: hard + "use@npm:^3.1.0": version: 3.1.1 resolution: "use@npm:3.1.1" @@ -27550,8 +27501,8 @@ resolve@~1.19.0: "@docusaurus/preset-classic": 2.0.0-beta.7 classnames: ^2.2.6 netlify-plugin-cache: ^1.0.3 - react: 17.0.2 - react-dom: 17.0.2 + react: ^18.1.0 + react-dom: ^18.1.0 react-lite-youtube-embed: ^2.0.3 remark-typescript-tools: ^1.0.8 typescript: ~4.2.4 From 5620e3651a98c11d084e3e39f3a354d17dae9738 Mon Sep 17 00:00:00 2001 From: FaberVitale Date: Sat, 11 Jun 2022 14:04:23 +0200 Subject: [PATCH 2/9] chore: upgrade react, react-18 & react-router-dom of examples workspaces --- .../ChangeThemeForm/ChangeThemeForm.tsx | 3 +- .../action-listener/counter/src/index.tsx | 6 +- examples/query/react/advanced/src/index.tsx | 11 +- .../package.json | 3 +- .../src/App.tsx | 16 +- .../src/features/auth/Login.tsx | 6 +- .../src/index.tsx | 7 +- .../src/utils/PrivateOutlet.tsx | 13 ++ .../src/utils/PrivateRoute.tsx | 23 -- .../query/react/authentication/package.json | 3 +- .../query/react/authentication/src/App.tsx | 16 +- .../src/features/auth/Login.tsx | 6 +- .../query/react/authentication/src/index.tsx | 38 ++-- .../src/utils/PrivateOutlet.tsx | 13 ++ .../authentication/src/utils/PrivateRoute.tsx | 23 -- examples/query/react/basic/package.json | 2 +- examples/query/react/basic/src/index.tsx | 11 +- .../react/conditional-fetching/src/index.tsx | 11 +- .../react/deduping-queries/src/index.tsx | 12 +- .../query/react/graphql-codegen/package.json | 3 +- .../query/react/graphql-codegen/src/App.tsx | 8 +- .../query/react/graphql-codegen/src/index.tsx | 9 +- examples/query/react/graphql/package.json | 3 +- examples/query/react/graphql/src/App.tsx | 8 +- examples/query/react/graphql/src/index.tsx | 12 +- .../query/react/kitchen-sink/package.json | 4 +- examples/query/react/kitchen-sink/src/App.tsx | 35 +-- .../src/features/common/Container.tsx | 10 +- .../src/features/posts/PostDetail.tsx | 89 +++++--- .../src/features/posts/PostsManager.tsx | 102 +++++---- .../query/react/kitchen-sink/src/index.tsx | 12 +- .../kitchen-sink/src/mocks/setupTests.tsx | 57 +++-- examples/query/react/mutations/package.json | 3 +- examples/query/react/mutations/src/App.tsx | 8 +- .../src/features/posts/PostDetail.tsx | 6 +- .../src/features/posts/PostsManager.tsx | 24 ++- examples/query/react/mutations/src/index.tsx | 7 +- .../react/mutations/src/mocks/browser.ts | 2 +- .../query/react/mutations/src/mocks/db.ts | 4 +- .../react/optimistic-update/package.json | 3 +- .../query/react/optimistic-update/src/App.tsx | 8 +- .../src/features/posts/PostDetail.tsx | 6 +- .../src/features/posts/PostsManager.tsx | 29 +-- .../react/optimistic-update/src/index.tsx | 7 +- .../optimistic-update/src/mocks/browser.ts | 2 +- .../react/optimistic-update/src/mocks/db.ts | 5 +- examples/query/react/pagination/package.json | 3 +- examples/query/react/pagination/src/App.tsx | 8 +- examples/query/react/pagination/src/index.tsx | 7 +- .../react/pagination/src/mocks/browser.ts | 2 +- examples/query/react/polling/src/index.tsx | 9 +- .../package.json | 3 +- .../src/App.tsx | 8 +- .../src/index.tsx | 7 +- .../src/mocks/browser.ts | 2 +- .../react/prefetching-automatic/package.json | 3 +- .../react/prefetching-automatic/src/App.tsx | 8 +- .../react/prefetching-automatic/src/index.tsx | 7 +- .../src/mocks/browser.ts | 2 +- examples/query/react/prefetching/package.json | 3 +- examples/query/react/prefetching/src/App.tsx | 8 +- .../query/react/prefetching/src/index.tsx | 7 +- .../react/prefetching/src/mocks/browser.ts | 2 +- .../react/with-apiprovider/src/index.tsx | 8 +- packages/toolkit/package.json | 2 +- yarn.lock | 200 +++++++----------- 66 files changed, 494 insertions(+), 494 deletions(-) create mode 100644 examples/query/react/authentication-with-extrareducers/src/utils/PrivateOutlet.tsx delete mode 100644 examples/query/react/authentication-with-extrareducers/src/utils/PrivateRoute.tsx create mode 100644 examples/query/react/authentication/src/utils/PrivateOutlet.tsx delete mode 100644 examples/query/react/authentication/src/utils/PrivateRoute.tsx diff --git a/examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx b/examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx index c85dccbc8f..3157b6936f 100644 --- a/examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx +++ b/examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx @@ -1,5 +1,4 @@ -import { FormEvent } from 'react' -import { ChangeEvent } from 'react-redux/node_modules/@types/react' +import { FormEvent, ChangeEvent } from 'react' import { useAppDispatch, useAppSelector } from '../../store' import { themeActions, ThemeState } from '../../services/theme/slice' import styles from './changeThemeForm.module.css' diff --git a/examples/action-listener/counter/src/index.tsx b/examples/action-listener/counter/src/index.tsx index ededcf300a..39faca33d1 100644 --- a/examples/action-listener/counter/src/index.tsx +++ b/examples/action-listener/counter/src/index.tsx @@ -1,4 +1,4 @@ -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import './index.css' import { store } from './store' import { themeActions } from './services/theme/slice' @@ -8,4 +8,6 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { store.dispatch(themeActions.changeColorScheme('dark')) } -ReactDOM.render(, document.getElementById('root')) +const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) + +root.render() diff --git a/examples/query/react/advanced/src/index.tsx b/examples/query/react/advanced/src/index.tsx index 9c54540773..b5a9e97285 100644 --- a/examples/query/react/advanced/src/index.tsx +++ b/examples/query/react/advanced/src/index.tsx @@ -1,13 +1,14 @@ -import { render } from 'react-dom' +import ReactDOM from 'react-dom/client' import { ApiProvider } from '@reduxjs/toolkit/query/react' - import App from './App' import { pokemonApi } from './services/pokemon' const rootElement = document.getElementById('root') -render( + +const reactRoot = ReactDOM.createRoot(rootElement as HTMLElement) + +reactRoot.render( - , - rootElement + ) diff --git a/examples/query/react/authentication-with-extrareducers/package.json b/examples/query/react/authentication-with-extrareducers/package.json index e2353138a5..edf3a9d31b 100644 --- a/examples/query/react/authentication-with-extrareducers/package.json +++ b/examples/query/react/authentication-with-extrareducers/package.json @@ -16,13 +16,12 @@ "react-dom": "^18.1.0", "react-icons": "3.11.0", "react-redux": "^8.0.2", - "react-router-dom": "5.2.0", + "react-router-dom": "6.3.0", "react-scripts": "4.0.2" }, "devDependencies": { "@types/react": "^18.0.5", "@types/react-dom": "^18.0.5", - "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, "scripts": { diff --git a/examples/query/react/authentication-with-extrareducers/src/App.tsx b/examples/query/react/authentication-with-extrareducers/src/App.tsx index 349aa3ffa4..9a8fbd70ca 100644 --- a/examples/query/react/authentication-with-extrareducers/src/App.tsx +++ b/examples/query/react/authentication-with-extrareducers/src/App.tsx @@ -1,8 +1,8 @@ -import { Switch, Route } from 'react-router-dom' +import { Routes, Route } from 'react-router-dom' import { Box, Center, VStack } from '@chakra-ui/react' import { Login } from './features/auth/Login' -import { PrivateRoute } from './utils/PrivateRoute' +import { PrivateOutlet } from './utils/PrivateOutlet' import { ProtectedComponent } from './features/auth/ProtectedComponent' function Hooray() { @@ -21,12 +21,12 @@ function Hooray() { function App() { return ( - - - - - - + + } /> + }> + } /> + + ) } diff --git a/examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx b/examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx index ffde30cc42..ce36f9bbf0 100644 --- a/examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx +++ b/examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx @@ -10,7 +10,7 @@ import { Box, useToast, } from '@chakra-ui/react' -import { useHistory } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import { useDispatch } from 'react-redux' import { ProtectedComponent } from './ProtectedComponent' @@ -47,7 +47,7 @@ function PasswordInput({ export const Login = () => { const dispatch = useDispatch() - const { push } = useHistory() + const navigate = useNavigate() const toast = useToast() const [formState, setFormState] = React.useState({ @@ -86,7 +86,7 @@ export const Login = () => { // Being that the result is handled in extraReducers in authSlice, // we know that we're authenticated after this, so the user // and token will be present in the store - push('/') + navigate('/') } catch (err) { toast({ status: 'error', diff --git a/examples/query/react/authentication-with-extrareducers/src/index.tsx b/examples/query/react/authentication-with-extrareducers/src/index.tsx index 7b3484cab8..2bf5b85aa3 100644 --- a/examples/query/react/authentication-with-extrareducers/src/index.tsx +++ b/examples/query/react/authentication-with-extrareducers/src/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import { BrowserRouter } from 'react-router-dom' import { ChakraProvider } from '@chakra-ui/react' @@ -11,7 +11,7 @@ import { Provider } from 'react-redux' // Initialize the msw worker, wait for the service worker registration to resolve, then mount worker.start({ quiet: true }).then(() => - ReactDOM.render( + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( @@ -20,7 +20,6 @@ worker.start({ quiet: true }).then(() => - , - document.getElementById('root') + ) ) diff --git a/examples/query/react/authentication-with-extrareducers/src/utils/PrivateOutlet.tsx b/examples/query/react/authentication-with-extrareducers/src/utils/PrivateOutlet.tsx new file mode 100644 index 0000000000..7ef1120b4c --- /dev/null +++ b/examples/query/react/authentication-with-extrareducers/src/utils/PrivateOutlet.tsx @@ -0,0 +1,13 @@ +import { Navigate, Outlet, useLocation } from 'react-router-dom' +import { useAuth } from '../hooks/useAuth' + +export function PrivateOutlet() { + const auth = useAuth() + const location = useLocation() + + return auth.user ? ( + + ) : ( + + ) +} diff --git a/examples/query/react/authentication-with-extrareducers/src/utils/PrivateRoute.tsx b/examples/query/react/authentication-with-extrareducers/src/utils/PrivateRoute.tsx deleted file mode 100644 index 71511ce1ee..0000000000 --- a/examples/query/react/authentication-with-extrareducers/src/utils/PrivateRoute.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Redirect, Route, RouteProps } from 'react-router-dom' -import { useAuth } from '../hooks/useAuth' - -export function PrivateRoute({ children, ...rest }: RouteProps) { - const { user } = useAuth() - return ( - - user ? ( - children - ) : ( - - ) - } - /> - ) -} diff --git a/examples/query/react/authentication/package.json b/examples/query/react/authentication/package.json index 6a08b7e5b9..23d493f0e7 100644 --- a/examples/query/react/authentication/package.json +++ b/examples/query/react/authentication/package.json @@ -16,13 +16,12 @@ "react-dom": "^18.1.0", "react-icons": "3.11.0", "react-redux": "^8.0.2", - "react-router-dom": "5.2.0", + "react-router-dom": "6.3.0", "react-scripts": "4.0.2" }, "devDependencies": { "@types/react": "^18.0.5", "@types/react-dom": "^18.0.5", - "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, "scripts": { diff --git a/examples/query/react/authentication/src/App.tsx b/examples/query/react/authentication/src/App.tsx index 349aa3ffa4..9a8fbd70ca 100644 --- a/examples/query/react/authentication/src/App.tsx +++ b/examples/query/react/authentication/src/App.tsx @@ -1,8 +1,8 @@ -import { Switch, Route } from 'react-router-dom' +import { Routes, Route } from 'react-router-dom' import { Box, Center, VStack } from '@chakra-ui/react' import { Login } from './features/auth/Login' -import { PrivateRoute } from './utils/PrivateRoute' +import { PrivateOutlet } from './utils/PrivateOutlet' import { ProtectedComponent } from './features/auth/ProtectedComponent' function Hooray() { @@ -21,12 +21,12 @@ function Hooray() { function App() { return ( - - - - - - + + } /> + }> + } /> + + ) } diff --git a/examples/query/react/authentication/src/features/auth/Login.tsx b/examples/query/react/authentication/src/features/auth/Login.tsx index 70cdaae016..9089dee33e 100644 --- a/examples/query/react/authentication/src/features/auth/Login.tsx +++ b/examples/query/react/authentication/src/features/auth/Login.tsx @@ -10,7 +10,7 @@ import { Box, useToast, } from '@chakra-ui/react' -import { useHistory } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import { useDispatch } from 'react-redux' import { setCredentials } from './authSlice' @@ -48,7 +48,7 @@ function PasswordInput({ export const Login = () => { const dispatch = useDispatch() - const { push } = useHistory() + const navigate = useNavigate() const toast = useToast() const [formState, setFormState] = React.useState({ @@ -85,7 +85,7 @@ export const Login = () => { try { const user = await login(formState).unwrap() dispatch(setCredentials(user)) - push('/') + navigate('/') } catch (err) { toast({ status: 'error', diff --git a/examples/query/react/authentication/src/index.tsx b/examples/query/react/authentication/src/index.tsx index 7b3484cab8..b55e344e50 100644 --- a/examples/query/react/authentication/src/index.tsx +++ b/examples/query/react/authentication/src/index.tsx @@ -1,26 +1,30 @@ import React from 'react' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import { BrowserRouter } from 'react-router-dom' import { ChakraProvider } from '@chakra-ui/react' - import App from './App' import { store } from './app/store' - import { worker } from './mocks/browser' import { Provider } from 'react-redux' // Initialize the msw worker, wait for the service worker registration to resolve, then mount -worker.start({ quiet: true }).then(() => - ReactDOM.render( - - - - - - - - - , - document.getElementById('root') - ) -) +worker + .start({ quiet: true }) + .then(() => { + const rootNode = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ) + + return rootNode.render( + + + + + + + + + + ) + }) + .catch(console.error) diff --git a/examples/query/react/authentication/src/utils/PrivateOutlet.tsx b/examples/query/react/authentication/src/utils/PrivateOutlet.tsx new file mode 100644 index 0000000000..7ef1120b4c --- /dev/null +++ b/examples/query/react/authentication/src/utils/PrivateOutlet.tsx @@ -0,0 +1,13 @@ +import { Navigate, Outlet, useLocation } from 'react-router-dom' +import { useAuth } from '../hooks/useAuth' + +export function PrivateOutlet() { + const auth = useAuth() + const location = useLocation() + + return auth.user ? ( + + ) : ( + + ) +} diff --git a/examples/query/react/authentication/src/utils/PrivateRoute.tsx b/examples/query/react/authentication/src/utils/PrivateRoute.tsx deleted file mode 100644 index 71511ce1ee..0000000000 --- a/examples/query/react/authentication/src/utils/PrivateRoute.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Redirect, Route, RouteProps } from 'react-router-dom' -import { useAuth } from '../hooks/useAuth' - -export function PrivateRoute({ children, ...rest }: RouteProps) { - const { user } = useAuth() - return ( - - user ? ( - children - ) : ( - - ) - } - /> - ) -} diff --git a/examples/query/react/basic/package.json b/examples/query/react/basic/package.json index 22e037e05d..af887482d9 100644 --- a/examples/query/react/basic/package.json +++ b/examples/query/react/basic/package.json @@ -13,7 +13,7 @@ "react-scripts": "4.0.2" }, "devDependencies": { - "@testing-library/react": "^12.0.0", + "@testing-library/react": "^13.3.0", "@types/jest": "^26.0.23", "@types/react": "^18.0.5", "@types/react-dom": "^18.0.5", diff --git a/examples/query/react/basic/src/index.tsx b/examples/query/react/basic/src/index.tsx index e5db94fc4b..970d6ba2b4 100644 --- a/examples/query/react/basic/src/index.tsx +++ b/examples/query/react/basic/src/index.tsx @@ -1,4 +1,4 @@ -import { render } from 'react-dom' +import ReactDOM from 'react-dom/client' import { Provider } from 'react-redux' import App from './App' @@ -6,10 +6,11 @@ import { setupStore } from './store' const store = setupStore() -const rootElement = document.getElementById('root') -render( +const reactRoot = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +) +reactRoot.render( - , - rootElement + ) diff --git a/examples/query/react/conditional-fetching/src/index.tsx b/examples/query/react/conditional-fetching/src/index.tsx index ccb5944c13..1af4cef9e5 100644 --- a/examples/query/react/conditional-fetching/src/index.tsx +++ b/examples/query/react/conditional-fetching/src/index.tsx @@ -1,13 +1,14 @@ -import { render } from 'react-dom' +import ReactDOM from 'react-dom/client' import { Provider } from 'react-redux' import App from './App' import { store } from './store' -const rootElement = document.getElementById('root') -render( +const reactRoot = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +) +reactRoot.render( - , - rootElement + ) diff --git a/examples/query/react/deduping-queries/src/index.tsx b/examples/query/react/deduping-queries/src/index.tsx index ccb5944c13..0924558a7d 100644 --- a/examples/query/react/deduping-queries/src/index.tsx +++ b/examples/query/react/deduping-queries/src/index.tsx @@ -1,13 +1,15 @@ -import { render } from 'react-dom' +import ReactDOM from 'react-dom/client' import { Provider } from 'react-redux' import App from './App' import { store } from './store' -const rootElement = document.getElementById('root') -render( +const reactRoot = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +) + +reactRoot.render( - , - rootElement + ) diff --git a/examples/query/react/graphql-codegen/package.json b/examples/query/react/graphql-codegen/package.json index d538a58db2..d4c5c52bb5 100644 --- a/examples/query/react/graphql-codegen/package.json +++ b/examples/query/react/graphql-codegen/package.json @@ -20,7 +20,7 @@ "react-dom": "^18.1.0", "react-icons": "3.11.0", "react-redux": "^8.0.2", - "react-router-dom": "5.2.0", + "react-router-dom": "6.3.0", "react-scripts": "4.0.2" }, "devDependencies": { @@ -36,7 +36,6 @@ "@types/faker": "^5.5.5", "@types/react": "^18.0.5", "@types/react-dom": "^18.0.5", - "@types/react-router-dom": "5.1.6", "@types/webpack-env": "^1.16.0", "concurrently": "^6.2.0", "cross-env": "^7.0.3", diff --git a/examples/query/react/graphql-codegen/src/App.tsx b/examples/query/react/graphql-codegen/src/App.tsx index aaf8248328..d2c53f79bc 100644 --- a/examples/query/react/graphql-codegen/src/App.tsx +++ b/examples/query/react/graphql-codegen/src/App.tsx @@ -1,11 +1,11 @@ -import { Route, Switch } from 'react-router' +import { Route, Routes } from 'react-router-dom' import { PostsManager } from './features/posts/PostsManager' function App() { return ( - - - + + } /> + ) } diff --git a/examples/query/react/graphql-codegen/src/index.tsx b/examples/query/react/graphql-codegen/src/index.tsx index 1f57e6134f..88e4ff607c 100644 --- a/examples/query/react/graphql-codegen/src/index.tsx +++ b/examples/query/react/graphql-codegen/src/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import App from './App' import { api } from './app/services/baseApi' import { ChakraProvider } from '@chakra-ui/react' @@ -10,7 +10,9 @@ import { ApiProvider } from '@reduxjs/toolkit/query/react' // Initialize the msw worker, wait for the service worker registration to resolve, then mount worker.start({ quiet: true }).then(() => { - return ReactDOM.render( + return ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ).render( @@ -19,7 +21,6 @@ worker.start({ quiet: true }).then(() => { - , - document.getElementById('root') + ) }) diff --git a/examples/query/react/graphql/package.json b/examples/query/react/graphql/package.json index 7eab191775..a23e8179f7 100644 --- a/examples/query/react/graphql/package.json +++ b/examples/query/react/graphql/package.json @@ -21,14 +21,13 @@ "react-dom": "^18.1.0", "react-icons": "3.11.0", "react-redux": "^8.0.2", - "react-router-dom": "5.2.0", + "react-router-dom": "6.3.0", "react-scripts": "4.0.2" }, "devDependencies": { "@types/faker": "^5.5.5", "@types/react": "^18.0.5", "@types/react-dom": "^18.0.5", - "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, "scripts": { diff --git a/examples/query/react/graphql/src/App.tsx b/examples/query/react/graphql/src/App.tsx index aaf8248328..d2c53f79bc 100644 --- a/examples/query/react/graphql/src/App.tsx +++ b/examples/query/react/graphql/src/App.tsx @@ -1,11 +1,11 @@ -import { Route, Switch } from 'react-router' +import { Route, Routes } from 'react-router-dom' import { PostsManager } from './features/posts/PostsManager' function App() { return ( - - - + + } /> + ) } diff --git a/examples/query/react/graphql/src/index.tsx b/examples/query/react/graphql/src/index.tsx index 1e809ff67d..a7429fe087 100644 --- a/examples/query/react/graphql/src/index.tsx +++ b/examples/query/react/graphql/src/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import App from './App' import { api } from './app/services/posts' import { ChakraProvider } from '@chakra-ui/react' @@ -10,7 +10,9 @@ import { ApiProvider } from '@reduxjs/toolkit/query/react' // Initialize the msw worker, wait for the service worker registration to resolve, then mount worker.start({ quiet: true }).then(() => { - return ReactDOM.render( + return ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ).render( @@ -19,8 +21,6 @@ worker.start({ quiet: true }).then(() => { - , - document.getElementById('root') + ) -} -) +}) diff --git a/examples/query/react/kitchen-sink/package.json b/examples/query/react/kitchen-sink/package.json index b454e2db82..1745300592 100644 --- a/examples/query/react/kitchen-sink/package.json +++ b/examples/query/react/kitchen-sink/package.json @@ -11,12 +11,12 @@ "react": "^18.1.0", "react-dom": "^18.1.0", "react-redux": "^8.0.2", - "react-router-dom": "5.3.0", + "react-router-dom": "6.3.0", "react-scripts": "4.0.2" }, "devDependencies": { "@testing-library/jest-dom": "^5.11.5", - "@testing-library/react": "^12.0.0", + "@testing-library/react": "^13.3.0", "@types/jest": "^26.0.23", "@types/node": "^14.14.6", "@types/react": "^18.0.5", diff --git a/examples/query/react/kitchen-sink/src/App.tsx b/examples/query/react/kitchen-sink/src/App.tsx index 6d34d4e0eb..be5102d89f 100644 --- a/examples/query/react/kitchen-sink/src/App.tsx +++ b/examples/query/react/kitchen-sink/src/App.tsx @@ -1,11 +1,11 @@ -import React from 'react'; -import { Switch, Route, Link } from 'react-router-dom'; -import { PostsManager } from './features/posts/PostsManager'; -import { CounterList } from './features/counter/CounterList'; -import { TimeList } from './features/time/TimeList'; -import { PollingToggles } from './features/polling/PollingToggles'; -import { Lazy } from './features/bundleSplitting'; -import './App.css'; +import React from 'react' +import { Routes, Route, Link } from 'react-router-dom' +import { PostsManager } from './features/posts/PostsManager' +import { CounterList } from './features/counter/CounterList' +import { TimeList } from './features/time/TimeList' +import { PollingToggles } from './features/polling/PollingToggles' +import { Lazy } from './features/bundleSplitting' +import './App.css' function App() { return ( @@ -13,7 +13,8 @@ function App() {
- Times | Posts | Counter |{' '} + Times | Posts |{' '} + Counter |{' '} Bundle Splitting
@@ -23,15 +24,15 @@ function App() {
- - - - - - + + } /> + } /> + } /> + } /> +
- ); + ) } -export default App; +export default App diff --git a/examples/query/react/kitchen-sink/src/features/common/Container.tsx b/examples/query/react/kitchen-sink/src/features/common/Container.tsx index 00c639997c..ff3f2748d3 100644 --- a/examples/query/react/kitchen-sink/src/features/common/Container.tsx +++ b/examples/query/react/kitchen-sink/src/features/common/Container.tsx @@ -1,5 +1,7 @@ -import * as React from 'react'; +import { FC, ReactNode } from 'react' -export const Container: React.FC = ({ children }) => ( -
{children}
-); +export const Container: FC<{ children: ReactNode }> = ({ children }) => ( +
+ {children} +
+) diff --git a/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx b/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx index ed35e7b11e..c7a1af36af 100644 --- a/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx +++ b/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx @@ -1,8 +1,12 @@ -import * as React from 'react'; -import { useHistory, useParams } from 'react-router-dom'; -import { useTypedSelector } from '../../app/store'; -import { useDeletePostMutation, useGetPostQuery, useUpdatePostMutation } from '../../app/services/posts'; -import { selectGlobalPollingEnabled } from '../polling/pollingSlice'; +import * as React from 'react' +import { useNavigate, useParams } from 'react-router-dom' +import { useTypedSelector } from '../../app/store' +import { + useDeletePostMutation, + useGetPostQuery, + useUpdatePostMutation, +} from '../../app/services/posts' +import { selectGlobalPollingEnabled } from '../polling/pollingSlice' const EditablePostName = ({ name: initialName, @@ -10,21 +14,28 @@ const EditablePostName = ({ onCancel, loading = false, }: { - name: string; - onUpdate: (name: string) => void; - onCancel: () => void; - loading?: boolean; + name: string + onUpdate: (name: string) => void + onCancel: () => void + loading?: boolean }) => { - const [name, setName] = React.useState(initialName); + const [name, setName] = React.useState(initialName) - const handleChange = ({ target: { value } }: React.ChangeEvent) => setName(value); + const handleChange = ({ + target: { value }, + }: React.ChangeEvent) => setName(value) - const handleUpdate = () => onUpdate(name); - const handleCancel = () => onCancel(); + const handleUpdate = () => onUpdate(name) + const handleCancel = () => onCancel() return (
- + @@ -32,37 +43,41 @@ const EditablePostName = ({ Cancel
- ); -}; + ) +} const PostJsonDetail = ({ id }: { id: number }) => { - const { data: post } = useGetPostQuery(id); + const { data: post } = useGetPostQuery(id) return ( 
{JSON.stringify(post, null, 2)}
- ); -}; + ) +} export const PostDetail = () => { - const { id } = useParams<{ id: any }>(); - const { push } = useHistory(); - const globalPolling = useTypedSelector(selectGlobalPollingEnabled); + const { id } = useParams<{ id: any }>() + const navigate = useNavigate() + const globalPolling = useTypedSelector(selectGlobalPollingEnabled) - const [isEditing, setIsEditing] = React.useState(false); + const [isEditing, setIsEditing] = React.useState(false) - const { data: post, isFetching, isLoading } = useGetPostQuery(id, { pollingInterval: globalPolling ? 3000 : 0 }); + const { + data: post, + isFetching, + isLoading, + } = useGetPostQuery(id, { pollingInterval: globalPolling ? 3000 : 0 }) - const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation(); - const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation(); + const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation() + const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation() if (isLoading) { - return
Loading...
; + return
Loading...
} if (!post) { - return
Missing post!
; + return
Missing post!
} return ( @@ -74,8 +89,8 @@ export const PostDetail = () => { updatePost({ id, name }) .then((result) => { // handle the success! - console.log('Update Result', result); - setIsEditing(false); + console.log('Update Result', result) + setIsEditing(false) }) .catch((error) => console.error('Update Error', error)) } @@ -90,10 +105,16 @@ export const PostDetail = () => { {post.name} {isFetching ? '...refetching' : ''} - - @@ -101,5 +122,5 @@ export const PostDetail = () => { )} - ); -}; + ) +} diff --git a/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx b/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx index 0bbd0b84e8..2ea7dcb822 100644 --- a/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx +++ b/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx @@ -1,35 +1,41 @@ -import React, { useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { Route, Switch, useHistory } from 'react-router-dom'; +import React, { useState } from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { Route, Routes, useNavigate } from 'react-router-dom' import { Post, useAddPostMutation, useGetPostsQuery, useLoginMutation, useGetErrorProneQuery, -} from '../../app/services/posts'; -import { selectIsAuthenticated, logout } from '../auth/authSlice'; -import { PostDetail } from './PostDetail'; -import './PostsManager.css'; +} from '../../app/services/posts' +import { selectIsAuthenticated, logout } from '../auth/authSlice' +import { PostDetail } from './PostDetail' +import './PostsManager.css' const AddPost = () => { - const initialValue = { name: '' }; - const [post, setPost] = useState>(initialValue); - const [addPost, { isLoading }] = useAddPostMutation(); + const initialValue = { name: '' } + const [post, setPost] = useState>(initialValue) + const [addPost, { isLoading }] = useAddPostMutation() const handleChange = ({ target }: React.ChangeEvent) => { setPost((prev) => ({ ...prev, [target.name]: target.value, - })); - }; + })) + } - const handleAddPost = () => addPost(post).then(() => setPost(initialValue)); + const handleAddPost = () => addPost(post).then(() => setPost(initialValue)) return (
- +
- ); -}; + ) +} -const PostListItem = ({ data: { name, id }, onSelect }: { data: Post; onSelect: (id: number) => void }) => { +const PostListItem = ({ + data: { name, id }, + onSelect, +}: { + data: Post + onSelect: (id: number) => void +}) => { return (
  • onSelect(id)}> {name}
    • - ); -}; + ) +} const PostList = () => { - const { data: posts, isLoading } = useGetPostsQuery(); - const { push } = useHistory(); + const { data: posts, isLoading } = useGetPostsQuery() + const navigate = useNavigate() if (isLoading) { - return
    Loading
    ; + return
    Loading
    } if (!posts) { - return
    No posts :(
    ; + return
    No posts :(
    } return (
    {posts.map((post) => ( - push(`/posts/${id}`)} /> + navigate(`/posts/${id}`)} + /> ))}
    - ); -}; + ) +} export const PostsManager = () => { - const [login] = useLoginMutation(); - const [initRetries, setInitRetries] = useState(false); - const { data, error, isFetching } = useGetErrorProneQuery(undefined, { skip: !initRetries }); - const dispatch = useDispatch(); - const isAuthenticated = useSelector(selectIsAuthenticated); + const [login] = useLoginMutation() + const [initRetries, setInitRetries] = useState(false) + const { data, error, isFetching } = useGetErrorProneQuery(undefined, { + skip: !initRetries, + }) + const dispatch = useDispatch() + const isAuthenticated = useSelector(selectIsAuthenticated) return (

    Posts

    {!isAuthenticated ? ( - + ) : ( )} - +
    @@ -99,13 +123,13 @@ export const PostsManager = () => {
    - - - + + } /> +
    - ); -}; + ) +} -export default PostsManager; +export default PostsManager diff --git a/examples/query/react/kitchen-sink/src/index.tsx b/examples/query/react/kitchen-sink/src/index.tsx index af083b4b64..6df77c3e0a 100644 --- a/examples/query/react/kitchen-sink/src/index.tsx +++ b/examples/query/react/kitchen-sink/src/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import App from './App' import { store } from './app/store' import { Provider } from 'react-redux' @@ -11,15 +11,19 @@ async function render() { if (process.env.NODE_ENV === 'development') { await worker.start() } - ReactDOM.render( + + const rootNode = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ) + + rootNode.render( - , - document.getElementById('root') + ) } diff --git a/examples/query/react/kitchen-sink/src/mocks/setupTests.tsx b/examples/query/react/kitchen-sink/src/mocks/setupTests.tsx index 7bbca3f13e..899d316d61 100644 --- a/examples/query/react/kitchen-sink/src/mocks/setupTests.tsx +++ b/examples/query/react/kitchen-sink/src/mocks/setupTests.tsx @@ -1,31 +1,46 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { Provider } from 'react-redux'; -import { store } from '../app/store'; -import { Router, Route } from 'react-router-dom'; -import { createMemoryHistory } from 'history'; -import { mockServer } from './mockServer'; -import 'whatwg-fetch'; +import React from 'react' +import { render } from '@testing-library/react' +import { Provider } from 'react-redux' +import { store } from '../app/store' +import { + unstable_HistoryRouter as HistoryRouter, + Route, + Routes, +} from 'react-router-dom' +import { createMemoryHistory } from 'history' +import { mockServer } from './mockServer' +import 'whatwg-fetch' export const setupTests = () => { - const { server, state: serverState } = mockServer(); + const { server, state: serverState } = mockServer() - beforeAll(() => server.listen({ onUnhandledRequest: 'warn' })); - afterEach(() => server.resetHandlers()); - afterAll(() => server.close()); + beforeAll(() => server.listen({ onUnhandledRequest: 'warn' })) + afterEach(() => server.resetHandlers()) + afterAll(() => server.close()) interface RenderOptions { - route: string; - path?: string; + route: string + path?: string } - function renderWithProvider(children: React.ReactChild, { route, path }: RenderOptions = { route: '/', path: '' }) { - const history = createMemoryHistory(); - history.push(route); + function renderWithProvider( + children: React.ReactChild, + { route, path }: RenderOptions = { route: '/', path: '' } + ) { + const history = createMemoryHistory() + history.push(route) return render( - {path ? {children} : children} + + {path ? ( + + {children} + + ) : ( + children + )} + - ); + ) } return { @@ -33,5 +48,5 @@ export const setupTests = () => { serverState, server, renderWithProvider, - }; -}; + } +} diff --git a/examples/query/react/mutations/package.json b/examples/query/react/mutations/package.json index 642c9e8b7c..0e001c1585 100644 --- a/examples/query/react/mutations/package.json +++ b/examples/query/react/mutations/package.json @@ -17,13 +17,12 @@ "react-dom": "^18.1.0", "react-icons": "3.11.0", "react-redux": "^8.0.2", - "react-router-dom": "5.2.0", + "react-router-dom": "6.3.0", "react-scripts": "4.0.2" }, "devDependencies": { "@types/react": "^18.0.5", "@types/react-dom": "^18.0.5", - "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, "scripts": { diff --git a/examples/query/react/mutations/src/App.tsx b/examples/query/react/mutations/src/App.tsx index 7754640ff4..a105e83a04 100644 --- a/examples/query/react/mutations/src/App.tsx +++ b/examples/query/react/mutations/src/App.tsx @@ -1,13 +1,13 @@ -import { Switch, Route } from 'react-router-dom' +import { Routes, Route } from 'react-router-dom' import { PostsManager } from './features/posts/PostsManager' import { Box } from '@chakra-ui/react' function App() { return ( - - - + + } /> + ) } diff --git a/examples/query/react/mutations/src/features/posts/PostDetail.tsx b/examples/query/react/mutations/src/features/posts/PostDetail.tsx index 9855aa2607..5a55f1b15d 100644 --- a/examples/query/react/mutations/src/features/posts/PostDetail.tsx +++ b/examples/query/react/mutations/src/features/posts/PostDetail.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { useHistory, useParams } from 'react-router-dom' +import { useNavigate, useParams } from 'react-router-dom' import { useDeletePostMutation, useGetPostQuery, @@ -73,7 +73,7 @@ const PostJsonDetail = ({ id }: { id: string }) => { export const PostDetail = () => { const { id } = useParams<{ id: any }>() - const { push } = useHistory() + const navigate = useNavigate() const toast = useToast() @@ -137,7 +137,7 @@ export const PostDetail = () => { {isUpdating ? 'Updating...' : 'Edit'}