diff --git a/.yarn/patches/react-scripts__npm_4.0.2.patch b/.yarn/patches/react-scripts__npm_4.0.2.patch deleted file mode 100644 index 61dcd349e4..0000000000 --- a/.yarn/patches/react-scripts__npm_4.0.2.patch +++ /dev/null @@ -1,28 +0,0 @@ -diff --git a/config/webpack.config.js b/config/webpack.config.js -index ba8fd0b9b56a073c6f6173feb9e3154290ceeda2..bf316c8df3b5dd9e862b3b4f02019d449ee06516 100644 ---- a/config/webpack.config.js -+++ b/config/webpack.config.js -@@ -24,7 +24,6 @@ const ManifestPlugin = require('webpack-manifest-plugin'); - const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); - const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); - const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); --const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); - const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); - const ESLintPlugin = require('eslint-webpack-plugin'); - const paths = require('./paths'); -@@ -349,15 +348,6 @@ module.exports = function (webpackEnv) { - // Adds support for installing with Plug'n'Play, leading to faster installs and adding - // guards against forgotten dependencies and such. - PnpWebpackPlugin, -- // Prevents users from importing files from outside of src/ (or node_modules/). -- // This often causes confusion because we only process files within src/ with babel. -- // To fix this, we prevent you from importing files out of src/ -- if you'd like to, -- // please link the files into your node_modules/ and let module-resolution kick in. -- // Make sure your source files are compiled, as they will not be processed in any way. -- new ModuleScopePlugin(paths.appSrc, [ -- paths.appPackageJson, -- reactRefreshOverlayEntry, -- ]), - ], - }, - resolveLoader: { \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index b69edb74af..823c859b91 100644 --- a/docs/package.json +++ b/docs/package.json @@ -4,7 +4,6 @@ "@manaflair/redux-batch": "^1.0.0", "@types/nanoid": "^2.1.0", "@types/react": "^16.9.46", - "@types/react-redux": "^7.1.9", "@types/redux-logger": "^3.0.8", "async-mutex": "^0.3.2", "axios": "^0.20.0", diff --git a/docs/rtk-query/usage/migrating-to-rtk-query.mdx b/docs/rtk-query/usage/migrating-to-rtk-query.mdx index b5343e2bc0..99dd34872c 100644 --- a/docs/rtk-query/usage/migrating-to-rtk-query.mdx +++ b/docs/rtk-query/usage/migrating-to-rtk-query.mdx @@ -210,6 +210,8 @@ export const selectDataByName = (state: RootState, name: string) => state.pokemon.dataByName[name] // file: src/store.ts noEmit +import { useDispatch } from 'react-redux' +import { EnhancedStore } from '@reduxjs/toolkit' interface Pokemon {} type RequestState = 'pending' | 'fulfilled' | 'rejected' @@ -221,10 +223,14 @@ export type RootState = { pokemon: typeof initialPokemonSlice } +export declare const store: EnhancedStore +export type AppDispatch = typeof store.dispatch +export declare const useAppDispatch: () => (...args: any[])=> any; + // file: src/hooks.ts import { useEffect } from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { RootState } from './store' +import { useSelector } from 'react-redux' +import { RootState, useAppDispatch } from './store' import { fetchPokemonByName, selectStatusByName, @@ -233,7 +239,7 @@ import { // highlight-start export function useGetPokemonByNameQuery(name: string) { - const dispatch = useDispatch() + const dispatch = useAppDispatch() // select the current status from the store state for the provided name const status = useSelector((state: RootState) => selectStatusByName(state, name) diff --git a/examples/action-listener/counter/.env b/examples/action-listener/counter/.env index 7d910f1484..e73ecc6cd4 100644 --- a/examples/action-listener/counter/.env +++ b/examples/action-listener/counter/.env @@ -1 +1,3 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/action-listener/counter/package.json b/examples/action-listener/counter/package.json index 2fd65fb97f..2455a10554 100644 --- a/examples/action-listener/counter/package.json +++ b/examples/action-listener/counter/package.json @@ -5,13 +5,13 @@ "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-scripts": "4.0.3", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", + "react-scripts": "5.0.1", "typescript": "~4.2.4" }, "scripts": { @@ -22,9 +22,11 @@ }, "eslintConfig": { "extends": [ - "react-app", - "react-app/jest" - ] + "react-app" + ], + "rules": { + "react/react-in-jsx-scope": "off" + } }, "browserslist": { "production": [ @@ -37,5 +39,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "jest-watch-typeahead": "^1.1.0" } } 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/.env b/examples/query/react/advanced/.env index 7d910f1484..27339e49ea 100644 --- a/examples/query/react/advanced/.env +++ b/examples/query/react/advanced/.env @@ -1 +1,2 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/advanced/package.json b/examples/query/react/advanced/package.json index e7f3b2f271..42b052a03b 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-scripts": "4.0.2" + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", + "react-scripts": "5.0.1" }, "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/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/.env b/examples/query/react/authentication-with-extrareducers/.env index 7d910f1484..e73ecc6cd4 100644 --- a/examples/query/react/authentication-with-extrareducers/.env +++ b/examples/query/react/authentication-with-extrareducers/.env @@ -1 +1,3 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/authentication-with-extrareducers/package.json b/examples/query/react/authentication-with-extrareducers/package.json index 5e403f19a5..1a9624ffdf 100644 --- a/examples/query/react/authentication-with-extrareducers/package.json +++ b/examples/query/react/authentication-with-extrareducers/package.json @@ -12,18 +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-router-dom": "5.2.0", - "react-scripts": "4.0.2" + "react-redux": "^8.0.2", + "react-router-dom": "6.3.0", + "react-scripts": "5.0.1" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", - "@types/react-router-dom": "5.1.6", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "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/.env b/examples/query/react/authentication/.env index 7d910f1484..e73ecc6cd4 100644 --- a/examples/query/react/authentication/.env +++ b/examples/query/react/authentication/.env @@ -1 +1,3 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/authentication/package.json b/examples/query/react/authentication/package.json index 8ee457d511..0f4e2134ca 100644 --- a/examples/query/react/authentication/package.json +++ b/examples/query/react/authentication/package.json @@ -12,18 +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-router-dom": "5.2.0", - "react-scripts": "4.0.2" + "react-redux": "^8.0.2", + "react-router-dom": "6.3.0", + "react-scripts": "5.0.1" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", - "@types/react-router-dom": "5.1.6", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "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..b5a6584be3 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/.env b/examples/query/react/basic/.env index 7d910f1484..e73ecc6cd4 100644 --- a/examples/query/react/basic/.env +++ b/examples/query/react/basic/.env @@ -1 +1,3 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/basic/package.json b/examples/query/react/basic/package.json index b8de55c899..2b12c64043 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-scripts": "4.0.2" + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", + "react-scripts": "5.0.1" }, "devDependencies": { - "@testing-library/react": "^12.0.0", + "@testing-library/react": "^13.3.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/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/.env b/examples/query/react/conditional-fetching/.env index 7d910f1484..e73ecc6cd4 100644 --- a/examples/query/react/conditional-fetching/.env +++ b/examples/query/react/conditional-fetching/.env @@ -1 +1,3 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/conditional-fetching/package.json b/examples/query/react/conditional-fetching/package.json index 5ebeeb7c98..7420186a28 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-scripts": "4.0.2" + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", + "react-scripts": "5.0.1" }, "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/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/.env b/examples/query/react/deduping-queries/.env index 7d910f1484..e73ecc6cd4 100644 --- a/examples/query/react/deduping-queries/.env +++ b/examples/query/react/deduping-queries/.env @@ -1 +1,3 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/deduping-queries/package.json b/examples/query/react/deduping-queries/package.json index 597aac4bdd..9ad3dd5aa8 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-scripts": "4.0.2" + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", + "react-scripts": "5.0.1" }, "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/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/.env b/examples/query/react/graphql-codegen/.env index 7d910f1484..e73ecc6cd4 100644 --- a/examples/query/react/graphql-codegen/.env +++ b/examples/query/react/graphql-codegen/.env @@ -1 +1,3 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/graphql-codegen/package.json b/examples/query/react/graphql-codegen/package.json index 591dfafb89..2931c2f2ed 100644 --- a/examples/query/react/graphql-codegen/package.json +++ b/examples/query/react/graphql-codegen/package.json @@ -16,12 +16,12 @@ "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-router-dom": "5.2.0", - "react-scripts": "4.0.2" + "react-redux": "^8.0.2", + "react-router-dom": "6.3.0", + "react-scripts": "5.0.1" }, "devDependencies": { "@graphql-codegen/add": "^2.0.2", @@ -34,10 +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-router-dom": "5.1.6", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "@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/.env b/examples/query/react/graphql/.env index 7d910f1484..e73ecc6cd4 100644 --- a/examples/query/react/graphql/.env +++ b/examples/query/react/graphql/.env @@ -1 +1,3 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/graphql/package.json b/examples/query/react/graphql/package.json index 9767982c13..309f9a29a3 100644 --- a/examples/query/react/graphql/package.json +++ b/examples/query/react/graphql/package.json @@ -17,19 +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-router-dom": "5.2.0", - "react-scripts": "4.0.2" + "react-redux": "^8.0.2", + "react-router-dom": "6.3.0", + "react-scripts": "5.0.1" }, "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-router-dom": "5.1.6", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "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/.env b/examples/query/react/kitchen-sink/.env index 2260b43de8..14f1433eac 100644 --- a/examples/query/react/kitchen-sink/.env +++ b/examples/query/react/kitchen-sink/.env @@ -1,2 +1,4 @@ SKIP_PREFLIGHT_CHECK=true -NODE_ENV=development \ No newline at end of file +NODE_ENV=development +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/kitchen-sink/package.json b/examples/query/react/kitchen-sink/package.json index 7a942545bb..5709ee2fc7 100644 --- a/examples/query/react/kitchen-sink/package.json +++ b/examples/query/react/kitchen-sink/package.json @@ -8,20 +8,19 @@ "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-router-dom": "5.3.0", - "react-scripts": "4.0.2" + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.2", + "react-router-dom": "6.3.0", + "react-scripts": "5.0.1" }, "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": "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/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/.env b/examples/query/react/mutations/.env index 7d910f1484..e73ecc6cd4 100644 --- a/examples/query/react/mutations/.env +++ b/examples/query/react/mutations/.env @@ -1 +1,3 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file +SKIP_PREFLIGHT_CHECK=true +# https://github.com/facebook/create-react-app/issues/11940 +DISABLE_ESLINT_PLUGIN=true diff --git a/examples/query/react/mutations/package.json b/examples/query/react/mutations/package.json index dcecde0b2a..c32c4111e7 100644 --- a/examples/query/react/mutations/package.json +++ b/examples/query/react/mutations/package.json @@ -13,18 +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-router-dom": "5.2.0", - "react-scripts": "4.0.2" + "react-redux": "^8.0.2", + "react-router-dom": "6.3.0", + "react-scripts": "5.0.1" }, "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "@types/react-redux": "7.1.9", - "@types/react-router-dom": "5.1.6", + "@types/react": "^18.0.5", + "@types/react-dom": "^18.0.5", "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'}