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

[djhi]

Problems

• React-query v3 isn't compatible with React 18
• We are locked on react-query v3, because the library was renamed to tanstack query after that, and upgrading would be a breaking change
• No new features are pushed to react-query v3.

Solution

• Upgrade to tanstack query v5.
• Upgrade React to v18
• Upgrade Yarn (for internal use) to v4
• use isPending for mutations
• Change signature of auth provider hooks so that they always return data
• Stabilize tests for react 18
• Update demos

Breaking changes

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 to help you upgrade. On most projects, this should be a matter of updating the root file of your application:

-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.

Rename isLoading to isPending in mutations

In the return state of data provider mutation hooks, isLoading has been renamed to isPending to be consistent with the same change in react-query.

The following hooks are impacted by this change:

• useCreate
• useDelete
• useDeleteMany
• useUpdate
• useUpdateMany
• useDeleteWithUndoController
• useDeleteWithConfirmController

If you use these hooks, replace isLoading by isPending:

import { useUpdate, useRecordContext, Button } from 'react-admin';

const ApproveButton = () => {
    const record = useRecordContext();
-    const [approve, { isLoading }] = useUpdate('comments', { id: record.id, data: { isApproved: true }, previousData: record });
+    const [approve, { isPending }] = useUpdate('comments', { id: record.id, data: { isApproved: true }, previousData: record });
-    return <Button label="Approve" onClick={() => approve()} disabled={isLoading} />;
+    return <Button label="Approve" onClick={() => approve()} disabled={isPending} />;
};

Use data in Authentication hooks return value

Hooks that call the authProvider now return the data property of the result instead of a variable named after the hook.

The following hooks are impacted by this change:

• useAuthState
• useIdentity
• usePermissions

If you use these hooks, replace the variable name by data:

-const { isLoading, authenticated }       = useAuthState();
+const { isLoading, data: authenticated } = useAuthState();

-const { isLoading, identity }       = useIdentity();
+const { isLoading, data: identity } = useIdentity();

-const { isLoading, permissions }       = usePermissions();
+const { isLoading, data: permissions } = usePermissions();

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
• From @transtack/query v4 to @transtack/query 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:

-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:

- 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.

[fzaninotto]

Review status: 25%

[fzaninotto]

There are mentions of 'react-query' in the doc that you must change, too:

[fzaninotto]

Review status: 50%

[fzaninotto]

Why do we need it? getPermissions should be able to return undefined

[djhi]

Then we must handle the undefined case in the hook

[djhi]

Handled at the hook level

[fzaninotto]

Then you need to revert this change

[djhi]

There are mentions of 'react-query' in the doc that you must change, too:

As discussed, will be done in a dedicated PR

[fzaninotto]

Wow, this is impressive! Kudos for this PR.

[fzaninotto]

Congrats, this PR is 💯

[slax57]

Review still in progress, but making a save point here bc my screen starts to freeze to much 😅

[slax57]

Suggested change

	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).
	React-admin now uses `tanstack-query` v5 instead of `react-query` v3. The library name has changed to `@tanstack/react-query` (but it's almost the same API).

Shouldn't we use the name tanstack-query instead of react-query from now on?

[slax57]

Still WIP...

[slax57]

Review status: 70%

[slax57]

Review complete! Now to do some testing...

[slax57]

🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉