Merge branch 'next' into headless-doc

Author: djhi

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 5.10.0
+
+- Upgraded `@tanstack/react-query` to `5.83.0`. You might have duplicate versions if you already had it in your dependencies. Should you have an error mentioning the `QueryContext`, make sure you only have one version in your package manager lock file.
+
 ## 5.9.1
 
 * Fix `<Datagrid>` empty throws error when used in standalone mode ([#10812](https://github.com/marmelab/react-admin/pull/10812)) ([fzaninotto](https://github.com/fzaninotto))

docs/List.md

@@ -1174,6 +1174,42 @@ const ProductList = () => (
 )
 ```
 
+## Enabling Data Fetching Conditionally
+
+You might want to allow data to be fetched only when at least some filters have been set. You can leverage TanStack react-query `enabled` option for that. It accepts a function that receives the query as its only parameter. As react-admin always format the `queryKey` as `[ResourceName, DataProviderMethod, DataProviderParams]`, you can check that there is at least a filter in this function:
+
+{% raw %}
+```tsx
+export const PostList = () => (
+    <List
+        filters={postFilter}
+        queryOptions={{
+            enabled: query => {
+                const listParams = query.queryKey[2] as GetListParams;
+                return listParams.filter.q?.length > 2;
+            }
+        }}
+    >
+        <WithListContext
+            render={context =>
+                context.filterValues.q?.length > 2 ? (
+                    <CardContentInner>
+                        Type a search term to fetch data
+                    </CardContentInner>
+                ) : (
+                    <Datagrid>
+                        {/* your fields */}
+                    </Datagrid>
+                )
+            }
+        />
+    </List>
+)
+```
+{% endraw %}
+
+**Note**: Notice we display some custom UI when there is no filter. This is because otherwise, users would see the loading UI as Tanstack Query will set the `isPending` property of the underlying query to `true` if the query isn't enabled. 
+
 ## Accessing Extra Response Data
 
 If `dataProvider.getList()` returns additional metadata in the response under the `meta` key, you can access it in the list view using the `meta` property of the `ListContext`.

examples/simple/package.json

@@ -12,8 +12,8 @@
     "dependencies": {
         "@mui/icons-material": "^5.16.12",
         "@mui/material": "^5.16.12",
-        "@tanstack/react-query": "^5.21.7",
-        "@tanstack/react-query-devtools": "^5.21.7",
+        "@tanstack/react-query": "^5.83.0",
+        "@tanstack/react-query-devtools": "^5.83.0",
         "jsonexport": "^3.2.0",
         "lodash": "~4.17.5",
         "ra-data-fakerest": "^5.9.1",

packages/ra-core/package.json

@@ -57,8 +57,7 @@
         "react-router-dom": "^6.28.1 || ^7.1.1"
     },
     "dependencies": {
-        "@tanstack/react-query": "^5.21.7",
-        "clsx": "^2.1.1",
+        "@tanstack/react-query": "^5.83.0",
         "date-fns": "^3.6.0",
         "eventemitter3": "^5.0.1",
         "inflection": "^3.0.0",

packages/ra-core/src/auth/useAuthState.ts

@@ -150,7 +150,7 @@ const useAuthState = <ErrorType = Error>(
 
     return authProvider != null
         ? result
-        : (noAuthProviderQueryResult as UseAuthStateResult<ErrorType>);
+        : (noAuthProviderQueryResult as unknown as UseAuthStateResult<ErrorType>);
 };
 
 type UseAuthStateOptions<ErrorType = Error> = Omit<

packages/ra-core/src/auth/useCanAccess.ts

@@ -93,7 +93,7 @@ export const useCanAccess = <
 
     return authProviderHasCanAccess
         ? result
-        : (emptyQueryObserverResult as UseCanAccessResult<ErrorType>);
+        : (emptyQueryObserverResult as unknown as UseCanAccessResult<ErrorType>);
 };
 
 const emptyQueryObserverResult = {

packages/ra-core/src/auth/usePermissions.ts

@@ -108,7 +108,10 @@ const usePermissions = <PermissionsType = any, ErrorType = Error>(
     );
 
     return !authProvider || !authProvider.getPermissions
-        ? (fakeQueryResult as UsePermissionsResult<PermissionsType, ErrorType>)
+        ? (fakeQueryResult as unknown as UsePermissionsResult<
+              PermissionsType,
+              ErrorType
+          >)
         : result;
 };
 

packages/ra-core/src/controller/input/useReferenceInputController.ts

@@ -116,8 +116,8 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
     } = useReference<RecordType>({
         id: currentValue,
         reference,
-        // @ts-ignore the types of the queryOptions for the getMAny and getList are not compatible
         options: {
+            // @ts-ignore the types of the queryOptions for the getMAny and getList are not compatible
             enabled: currentValue != null && currentValue !== '',
             meta,
             ...otherQueryOptions,

packages/ra-core/src/dataProvider/useGetList.ts

@@ -176,7 +176,7 @@ export const useGetList = <
                   }
                 : result,
         [result]
-    ) as UseQueryResult<RecordType[], Error> & {
+    ) as unknown as UseQueryResult<RecordType[], Error> & {
         total?: number;
         pageInfo?: {
             hasNextPage?: boolean;

packages/ra-core/src/dataProvider/useGetManyReference.ts

@@ -155,7 +155,7 @@ export const useGetManyReference = <
                   }
                 : result,
         [result]
-    ) as UseQueryResult<RecordType[], ErrorType> & {
+    ) as unknown as UseQueryResult<RecordType[], ErrorType> & {
         total?: number;
         pageInfo?: {
             hasNextPage?: boolean;