Description
Is your feature request related to a problem? Please describe.
I am building custom list components that utilize useList and ListContextProvider to manage data and state outside of the standard <Admin> and <Resource> component hierarchy. In this setup, I explicitly define the resource name when calling useList (e.g., useList({ data: [], resource: 'Custom Posts' })).
When the custom list data is empty, the Datagrid component, which is wrapped by ListContextProvider, attempts to render its empty state. This leads to the error: "<ListNoResults> must be used inside a <List> component". This error occurs because Datagrid's internal components (like the default Empty component which likely uses ListNoResults) rely on useResourceContext to infer the resource name. However, in this direct ListContextProvider setup, the ResourceContext is null, despite the resource being clearly defined within the list object provided by useList.
This forces me to explicitly Wrapping the ListContextProvider and Datagrid with a ResourceContextProvider (e.g., <ResourceContextProvider value="Custom Posts"> to define resource.
Describe the solution you'd like
I would like any component that is a child of ListContextProvider (such as Datagrid, SimpleList, FilterForm, etc.) to have direct access to and automatically infer the resource name defined in the list object returned by useList.
This enhancement would streamline custom list implementations, making useList and ListContextProvider more powerful and less error-prone for developers working outside of the strict tree.
Describe alternatives you've considered
Working Solution explicitly Wrapping the ListContextProvider and Datagrid with a ResourceContextProvider (e.g., <ResourceContextProvider value="Custom Posts"> to define resource.
Additional context
Here's the minimal example code demonstrating the issue:
import * as React from 'react';
import {
Datagrid,
ListContextProvider,
NumberField,
TextField,
useList,
} from 'react-admin';
const CustomRoute = () => {
const customResourceName = 'Custom Posts';
const list = useList({
data: [], // Empty data to trigger the 'no results' scenario
resource: customResourceName, // Resource is defined here
});
return (
<ListContextProvider value={list}>
{/*
This Datagrid currently throws "<ListNoResults> must be used inside a <List> component"
because its internal useResourceContext cannot find the resource,
even though it's defined in useList.
*/}
<Datagrid>
<NumberField source="id" />
<TextField source="name" />
</Datagrid>
</ListContextProvider>
);
};
export default CustomRoute;