useGetOne response doesn't rerender component

Question

I am feeling quite frustrated at this simple example because either I am not getting something or it is not working the way I expect it and the way it says it should in the documentation.

So I am trying to extend the CloneButton component to actually retrieve the record on each row od the Datagrid and pass it to the create component:

import React from 'react';
import PropTypes from 'prop-types';
import { CloneButton, useGetOne } from 'react-admin';
import CircularProgress from '@material-ui/core/CircularProgress';

const CloneQueryButton = ({
    label = "Duplicate",
    basePath,
    record,
    ...props
}) => {

const { data, loading, error } = useGetOne(basePath, record.id);

if (loading) { return <CircularProgress />; }
if (error) { return <p>ERROR {error.message}</p>; }

if (data) {
    console.log("inside", data);
    data.name = `Copy of ${data.name}`;
}

console.log("outside", data);

return <CloneButton
    basePath={basePath}
    record={data}
    label={label}
    {...props} />
};

What I get on the console is just outside null Also when the button is pressed it redirects to the create page with empty record property.

I can see the network request and they all return valid jsons. I don't understand why the component obviusly doesn't rerender when the response is recieved. If someone can see what am I missing, I will be extremely grateful!

Answer 1

The console succeeds, this means that there is neither an error nor a loading .

After checking the implementation of useGetOne , if it doesn't basically find a resource in your admin state with the given name, it will return null.

So I presume that you don't have the resource being declared in the admin's state (aka <Resource name="your name" /> in an <Admin> tree.

onst useGetOne = (
    resource: string,
    id: Identifier,
    options?: any
): UseGetOneHookValue =>
    useQueryWithStore(
        { type: 'getOne', resource, payload: { id } },
        options,
        (state: ReduxState) =>
            state.admin.resources[resource]
                ? state.admin.resources[resource].data[id]
                : null
    );

Answer 2

I faced the same issue. Here's what I found.

When an action has been dispatched, Redux checks if the state has changed. If the state has not changed then it doesn't have to update the components. When Redux cannot see that the state has changed, it will not update the React components with new data from the state. Reference

The returning data is the same JSON which is why the state is not updating.

Two ways to solve this.

1. If you have access to your API, then create a new resource with a different basePath that returns the same result. Temporary fix. Not the best solution. Ex: <Resource name="cart" /> , <Resource name="cartDetails" />
2. Clear State in React - You can follow this article for clearing state in hooks