Upgrade react-query to v5, react 18 and yarn v4

.github/workflows/test.yml

@@ -20,7 +20,7 @@ jobs:
     - name: Use Node.js LTS
       uses: actions/setup-node@v1
       with:
-        node-version: '16.x'
+        node-version: '18.x'
     - uses: bahmutov/npm-install@v1
       with:
         install-command: yarn --immutable
@@ -37,7 +37,7 @@ jobs:
     - name: Use Node.js LTS
       uses: actions/setup-node@v1
       with:
-        node-version: '16.x'
+        node-version: '18.x'
     - uses: bahmutov/npm-install@v1
       with:
         install-command: yarn --immutable
@@ -54,7 +54,7 @@ jobs:
     - name: Use Node.js LTS
       uses: actions/setup-node@v1
       with:
-        node-version: '16.x'
+        node-version: '18.x'
     - uses: bahmutov/npm-install@v1
       with:
         install-command: yarn --immutable
@@ -71,7 +71,7 @@ jobs:
     - name: Use Node.js LTS
       uses: actions/setup-node@v1
       with:
-        node-version: '16.x'
+        node-version: '18.x'
     - uses: bahmutov/npm-install@v1
       with:
         install-command: yarn --immutable
@@ -100,7 +100,7 @@ jobs:
     - name: Use Node.js LTS
       uses: actions/setup-node@v1
       with:
-        node-version: '16.x'
+        node-version: '18.x'
     - uses: bahmutov/npm-install@v1
       with:
         install-command: yarn --immutable

.yarnrc.yml

@@ -1,11 +1,8 @@
 compressionLevel: 0
 
 enableGlobalCache: true
+enableHardenedMode: false
 
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-3.1.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

cypress/e2e/list.cy.js

@@ -106,6 +106,9 @@ describe('List Page', () => {
             LoginPage.login('admin', 'password');
             ListPagePosts.navigate();
             ListPagePosts.showFilter('title');
+            cy.get(ListPagePosts.elements.filter('title')).should(el =>
+                expect(el).to.have.value('Qui tempore rerum et voluptates')
+            );
             ListPagePosts.setFilterValue(
                 'title',
                 'Omnis voluptate enim similique est possimus'

cypress/e2e/mobile.cy.js

@@ -9,12 +9,12 @@ describe('Mobile UI', () => {
     });
 
     describe('Infinite Scroll', () => {
-        it.only('should load more items when scrolling to the bottom of the page', () => {
+        it('should load more items when scrolling to the bottom of the page', () => {
             ListPagePosts.navigate();
+            cy.contains('Sint dignissimos in architecto aut');
             cy.contains('Sed quo et et fugiat modi').should('not.exist');
-            cy.scrollTo('bottom');
             cy.wait(500);
-            cy.scrollTo('bottom');
+            cy.contains('Sint dignissimos in architecto aut').scrollIntoView();
             cy.contains('Sed quo et et fugiat modi');
         });
     });

cypress/support/CustomFormPage.js

@@ -8,7 +8,7 @@ export default url => ({
             "[data-testid='dialog-add-post'] button[type='submit']",
         submitAndAddButton:
             ".create-page form>div:last-child button[type='button']",
-        postSelect: '.ra-input-post_id [role="button"]',
+        postSelect: '.ra-input-post_id',
         postItem: id => `li[data-value="${id}"]`,
         showPostCreateModalButton: '[data-value="@@ra-create"]',
         showPostPreviewModalButton: '[data-testid="button-show-post"]',

cypress/support/ListPage.js

@@ -6,7 +6,7 @@ export default url => ({
         filter: name => `.filter-field[data-source='${name}'] input`,
         filterButton: name => `.filter-field[data-source='${name}']`,
         filterMenuItems: `.new-filter-item`,
-        menuItems: `[role=menuitem]`,
+        menuItems: `a[role=menuitem]`,
         filterMenuItem: source => `.new-filter-item[data-key="${source}"]`,
         hideFilterButton: source =>
             `.filter-field[data-source="${source}"] .hide-filter`,

docs/Upgrade.md

@@ -5,6 +5,99 @@ title: "Upgrading to v5"
 
 # Upgrading to v5
 
+## React 18
+
+React-admin v5 uses React 18. If you use react-admin as a library in your own application, you'll have to upgrade to React 18 as well.
+
+The React team has published a [migration guide](https://react.dev/blog/2022/03/08/react-18-upgrade-guide) to help you upgrade. On most projects, this should be a matter of updating the root file of your application:
+
+```diff
+-import { render } from 'react-dom';
+-const container = document.getElementById('app');
+-render(<App tab="home" />, container);
++import { createRoot } from 'react-dom/client';
++const container = document.getElementById('app');
++const root = createRoot(container); // createRoot(container!) if you use TypeScript
++root.render(<App tab="home" />);
+```
+
+React 18 adds out-of-the-box performance improvements by doing more batching by default. 
+
+## Drop support for IE11
+
+React-admin v5 uses React 18, which dropped support for Internet Explorer. If you need to support IE11, you'll have to stay on react-admin v4.
+
+## Use `@tanstack/react-query` instead of `react-query`
+
+React-admin now uses `react-query` v5 instead of v3. The library name has changed to `@tanstack/react-query` (but it's almost the same API).
+
+If you used `react-query` directly in your code, you'll have to update it, following their migration guides:
+
+- [From react-query v3 to @transtack/query v4](https://tanstack.com/query/v5/docs/react/guides/migrating-to-react-query-4) 
+- [From @transtack/query v4 to @transtack/query v5](https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5).
+
+Here is a focus of the most important changes. 
+
+The package has been renamed to `@tanstack/react-query` so you'll have to change your imports:
+
+```diff
+-import { useQuery } from 'react-query';
++import { useQuery } from '@tanstack/react-query';
+```
+
+All react-query hooks, `queryClient` and `queryCache` methods now accept a single object argument:
+
+```diff
+- useQuery(key, fn, options)
++ useQuery({ queryKey, queryFn, ...options })
+- useInfiniteQuery(key, fn, options)
++ useInfiniteQuery({ queryKey, queryFn, ...options })
+- useMutation(fn, options)
++ useMutation({ mutationFn, ...options })
+- useIsFetching(key, filters)
++ useIsFetching({ queryKey, ...filters })
+- useIsMutating(key, filters)
++ useIsMutating({ mutationKey, ...filters })
+
+- queryClient.isFetching(key, filters)
++ queryClient.isFetching({ queryKey, ...filters })
+- queryClient.ensureQueryData(key, filters)
++ queryClient.ensureQueryData({ queryKey, ...filters })
+- queryClient.getQueriesData(key, filters)
++ queryClient.getQueriesData({ queryKey, ...filters })
+- queryClient.setQueriesData(key, updater, filters, options)
++ queryClient.setQueriesData({ queryKey, ...filters }, updater, options)
+- queryClient.removeQueries(key, filters)
++ queryClient.removeQueries({ queryKey, ...filters })
+- queryClient.resetQueries(key, filters, options)
++ queryClient.resetQueries({ queryKey, ...filters }, options)
+- queryClient.cancelQueries(key, filters, options)
++ queryClient.cancelQueries({ queryKey, ...filters }, options)
+- queryClient.invalidateQueries(key, filters, options)
++ queryClient.invalidateQueries({ queryKey, ...filters }, options)
+- queryClient.refetchQueries(key, filters, options)
++ queryClient.refetchQueries({ queryKey, ...filters }, options)
+- queryClient.fetchQuery(key, fn, options)
++ queryClient.fetchQuery({ queryKey, queryFn, ...options })
+- queryClient.prefetchQuery(key, fn, options)
++ queryClient.prefetchQuery({ queryKey, queryFn, ...options })
+- queryClient.fetchInfiniteQuery(key, fn, options)
++ queryClient.fetchInfiniteQuery({ queryKey, queryFn, ...options })
+- queryClient.prefetchInfiniteQuery(key, fn, options)
++ queryClient.prefetchInfiniteQuery({ queryKey, queryFn, ...options })
+
+- queryCache.find(key, filters)
++ queryCache.find({ queryKey, ...filters })
+- queryCache.findAll(key, filters)
++ queryCache.findAll({ queryKey, ...filters })
+```
+
+## Removed deprecated hooks
+
+The following deprecated hooks have been removed
+
+- `usePermissionsOptimized`. Use `usePermissions` instead.
+
 ## `<Datagrid rowClick>` is no longer `false` by default
 
 `<Datagrid>` will now make the rows clickable as soon as a Show or Edit view is declared on the resource (using the [resource definition](https://marmelab.com/react-admin/Resource.html)).
@@ -20,4 +113,4 @@ If you previously relied on the fact that the rows were not clickable by default
 
 ## Upgrading to v4
 
-If you are on react-admin v3, follow the [Upgrading to v4](https://marmelab.com/react-admin/doc/4.16/Upgrade.html) guide before upgrading to v5. 
+If you are on react-admin v3, follow the [Upgrading to v4](https://marmelab.com/react-admin/doc/4.16/Upgrade.html) guide before upgrading to v5. 

examples/crm/package.json

@@ -4,32 +4,32 @@
     "private": true,
     "dependencies": {
         "@hello-pangea/dnd": "^16.3.0",
-        "@mui/icons-material": "^5.0.1",
-        "@mui/material": "^5.0.2",
+        "@mui/icons-material": "^5.14.18",
+        "@mui/material": "^5.14.18",
         "@nivo/bar": "^0.80.0",
         "@nivo/core": "^0.80.0",
         "clsx": "^1.1.1",
         "date-fns": "^2.19.0",
         "faker": "~5.4.0",
         "lodash": "~4.17.5",
-        "prop-types": "^15.7.2",
+        "prop-types": "^15.8.1",
         "ra-data-fakerest": "^4.12.0",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "react-admin": "^4.12.0",
-        "react-dom": "^17.0.0",
+        "react-dom": "^18.2.0",
         "react-error-boundary": "^3.1.4",
         "react-router": "^6.1.0",
         "react-router-dom": "^6.1.0"
     },
     "devDependencies": {
-        "@testing-library/jest-dom": "^5.11.4",
-        "@testing-library/react": "^11.1.0",
-        "@testing-library/user-event": "^12.1.10",
+        "@testing-library/jest-dom": "^6.1.4",
+        "@testing-library/react": "^14.1.2",
+        "@testing-library/user-event": "^14.5.1",
         "@types/faker": "^5.1.7",
         "@types/jest": "^29.5.2",
         "@types/lodash": "~4.14.168",
-        "@types/react": "^17.0.20",
-        "@types/react-dom": "^17.0.9",
+        "@types/react": "^18.2.37",
+        "@types/react-dom": "^18.2.16",
         "@vitejs/plugin-react": "^2.2.0",
         "rollup-plugin-visualizer": "^5.9.2",
         "typescript": "^5.1.3",

examples/crm/src/index.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
     <React.StrictMode>
         <App />
-    </React.StrictMode>,
-    document.getElementById('root')
+    </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

examples/crm/src/notes/NewNote.tsx

@@ -27,7 +27,7 @@ export const NewNote = ({
     const [text, setText] = useState('');
     const [status, setStatus] = useState(record && record.status);
     const [date, setDate] = useState(getCurrentDate());
-    const [create, { isLoading }] = useCreate();
+    const [create, { isPending }] = useCreate();
     const [update] = useUpdate();
     const notify = useNotify();
     const { identity } = useGetIdentity();
@@ -124,7 +124,7 @@ export const NewNote = ({
                         type="submit"
                         variant="contained"
                         color="primary"
-                        disabled={!text || isLoading}
+                        disabled={!text || isPending}
                     >
                         Add this note
                     </Button>

examples/crm/src/notes/Note.tsx

@@ -40,7 +40,7 @@ export const Note = ({
     const record = useRecordContext();
     const notify = useNotify();
 
-    const [update, { isLoading }] = useUpdate();
+    const [update, { isPending }] = useUpdate();
 
     const [deleteNote] = useDelete(
         resource,
@@ -150,7 +150,7 @@ export const Note = ({
                             type="submit"
                             color="primary"
                             variant="contained"
-                            disabled={isLoading}
+                            disabled={isPending}
                         >
                             Update Note
                         </Button>

examples/crm/vite.config.ts

@@ -46,7 +46,7 @@ export default defineConfig({
         preserveSymlinks: true,
         alias: [
             // allow profiling in production
-            { find: 'react-dom', replacement: 'react-dom/profiling' },
+            // { find: 'react-dom', replacement: 'react-dom/profiling' },
             {
                 find: 'scheduler/tracing',
                 replacement: 'scheduler/tracing-profiling',

examples/demo/package.json

@@ -4,8 +4,8 @@
     "private": true,
     "dependencies": {
         "@apollo/client": "^3.3.19",
-        "@mui/icons-material": "^5.0.1",
-        "@mui/material": "^5.0.2",
+        "@mui/icons-material": "^5.14.18",
+        "@mui/material": "^5.14.18",
         "@types/inflection": "^1.5.28",
         "@types/recharts": "^1.8.10",
         "@vitejs/plugin-react": "^2.2.0",
@@ -18,7 +18,7 @@
         "graphql-tag": "^2.12.6",
         "inflection": "~1.12.0",
         "json-graphql-server": "~2.3.0",
-        "prop-types": "^15.6.1",
+        "prop-types": "^15.8.1",
         "proxy-polyfill": "^0.3.0",
         "query-string": "^7.1.1",
         "ra-data-fakerest": "^4.12.0",
@@ -29,10 +29,10 @@
         "ra-input-rich-text": "^4.12.0",
         "ra-language-english": "^4.12.0",
         "ra-language-french": "^4.12.0",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "react-admin": "^4.12.0",
         "react-app-polyfill": "^2.0.0",
-        "react-dom": "^17.0.0",
+        "react-dom": "^18.2.0",
         "react-router": "^6.1.0",
         "react-router-dom": "^6.1.0",
         "recharts": "^2.1.15"
@@ -46,9 +46,9 @@
         "@types/fetch-mock": "^7.3.2",
         "@types/jest": "^29.5.2",
         "@types/node": "^12.12.14",
-        "@types/prop-types": "^15.6.0",
-        "@types/react": "^17.0.20",
-        "@types/react-dom": "^17.0.9",
+        "@types/prop-types": "^15.7.11",
+        "@types/react": "^18.2.37",
+        "@types/react-dom": "^18.2.16",
         "@vitejs/plugin-react": "^2.2.0",
         "rewire": "^5.0.0",
         "rollup-plugin-visualizer": "^5.9.2",

examples/demo/src/index.tsx

@@ -1,8 +1,11 @@
-import 'proxy-polyfill';
-
-import * as React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+if (!container) {
+    throw new Error('No container found');
+}
+const root = createRoot(container);
+
+root.render(<App />);

examples/demo/src/reviews/AcceptButton.tsx

@@ -20,7 +20,7 @@ const AcceptButton = () => {
     const redirectTo = useRedirect();
     const record = useRecordContext<Review>();
 
-    const [approve, { isLoading }] = useUpdate(
+    const [approve, { isPending }] = useUpdate(
         'reviews',
         { id: record.id, data: { status: 'accepted' }, previousData: record },
         {
@@ -49,7 +49,7 @@ const AcceptButton = () => {
             startIcon={
                 <ThumbUp sx={{ color: theme => theme.palette.success.main }} />
             }
-            disabled={isLoading}
+            disabled={isPending}
         >
             {translate('resources.reviews.action.accept')}
         </Button>