Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CustomList component passes wrong resource parameter #5678

Closed
wmwart opened this issue Dec 16, 2020 · 1 comment · Fixed by #5726
Closed

CustomList component passes wrong resource parameter #5678

wmwart opened this issue Dec 16, 2020 · 1 comment · Fixed by #5726
Assignees

Comments

@wmwart
Copy link

wmwart commented Dec 16, 2020

What you were expecting:
Expected creating a CustomList as in the documentation would work correctly https://marmelab.com/react-admin/List.html#performance

Tip: You can use the component with custom queries, provided you pass the result to a :


import keyBy from 'lodash/keyBy'
import { useQuery, Datagrid, TextField, Pagination, Loading, ListContextProvider } from 'react-admin'

const CustomList = () => {
    const [page, setPage] = useState(1);
    const perPage = 50;
    const { data, total, loading, error } = useQuery({
        type: 'GET_LIST',
        resource: 'posts',
        payload: {
            pagination: { page, perPage },
            sort: { field: 'id', order: 'ASC' },
            filter: {},
        }
    });

    if (loading) {
        return <Loading />
    }
    if (error) {
        return <p>ERROR: {error}</p>
    }
    return (
        <ListContextProvider
            value={{
                resource: 'posts',
                basePath: '/posts',
                data: keyBy(data, 'id'),
                ids: data.map(({ id }) => id),
                currentSort: { field: 'id', order: 'ASC' },
                selectedIds: [],
            }}
        >
            <Datagrid rowClick="edit">
                <TextField source="id" />
                <TextField source="title" />
            </Datagrid>
            <Pagination
                page={page}
                perPage={perPage}
                setPage={setPage}
                total={total}
            />
        </ListContextProvider>
    );
}

What happened instead:

Instead, in the component, everywhere in <Datagrid>, the resource parameter is correct, and <DatagridRow> it is replaced by resource from useResourceContext(props)

Steps to reproduce:
Open DatagridRow.tsx

...
    const resource = useResourceContext(props);
...

Other information:
I don't know how to properly wrap the example in a ResourceContext or do I need to edit the DatagridRow?

Environment

  • React-admin version: 3.11.0
  • Last version that did not exhibit the issue (if applicable): 3.9.6
@djhi
Copy link
Collaborator

djhi commented Dec 16, 2020

Until the documentation is fixed, you can wrap your custom list inside a ResourceContextProvider which take the resource name as its value prop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants