[Bug]: The variables input contains a field name 'modules' that is not defined for input object type 'UpdateRoomInput'

[Niraj-Kamdar]

I am getting this error while updating the form of modules resource.

Here's my schema

type Room
@model
@key(name: "customerIndex", fields: ["customerId"], queryField: "listRoomsByCustomerId")
@auth(rules: [
  { allow: groups, groupsField: "customerId" },
  { allow: groups, groups: ["Admin"] }
]){
  id: ID!
  customerId: ID! # This will be retrieved by scanning
  name: String!
  type: RoomType!
  modules: [Module] @connection(keyName: "byRoom", fields: ["id"])
}

type Module
@model
@key(name: "byRoom", fields: ["roomId"], queryField: "listModulesByRoomId")
@auth(rules: [
  { allow: groups, groupsField: "customerId" },
  { allow: groups, groups: ["Admin"] }
]){
  id: ID! # This will be retrived by scanning
  roomId: ID!
  customerId: ID!
  room: Room @connection(fields: ["roomId"])
  appliances: [Appliance] @connection(keyName: "byModule", fields: ["id"])
}

And here's my RoomEdit script:

function RoomEdit(props) {
    return (
        <RA.Edit {...props}>
            <RA.TabbedForm>
                <RA.FormTab label="Summary">
                    <RA.TextInput disabled label="Id" source="id"/>
                    <RA.TextInput disabled label="Customer ID" source="customerId"/>
                    <RA.TextInput label="Name" source="name"/>
                    <RA.SelectInput
                        source="type"
                        choices={[
                            {id: "LivingRoom", name: "Living Room"},
                            {id: "BedRoom", name: "Bed Room"},
                            {id: "Kitchen", name: "Kitchen"},
                            {id: "BathRoom", name: "BathRoom"}
                        ]}
                    />
                </RA.FormTab>
                <RA.FormTab label="Modules">
                    <RA.ReferenceManyField reference="modules" target="roomId" addLabel={false}>
                        <RA.Datagrid>
                            <RA.TextField source="id"/>
                            <RA.DateField source="createdAt"/>
                            <RA.DateField source="updatedAt"/>
                            <RA.EditButton/>
                        </RA.Datagrid>
                    </RA.ReferenceManyField>
                </RA.FormTab>
            </RA.TabbedForm>
        </RA.Edit>
    );
}

export default RoomEdit;

I am not sure why am I getting this error. Am I doing anything wrong or Is it a bug in the library?

[Niraj-Kamdar]

I also tried simpleform instead of tabbed one but I am still getting this error so I think that's not the root of the bug.

[MrHertal]

Hi @Niraj-Kamdar,

You are using RA.ReferenceManyField instead of an input for editing modules. Try to use a reference input instead.

[Niraj-Kamdar]

I don't want to edit modules here. I just want to display it. Here's the example I referred to for this: https://marmelab.com/react-admin/CreateEdit.html#the-tabbedform-component

ReferenceInput field wouldn't work due to one to many relationship. So, example seems the correct way to implement this.

[Niraj-Kamdar]

I think problem is because of library passing modules field which is a connection to UpdateRoomInput.

[MrHertal]

All right, when exactly do you get the error, is it when the room edit page is displaying (so you cannot see the page) or is it when you submit the form to edit the room?

Can you show me a screenshot of the error in the debug bar?

Thanks.

[MrHertal]

The way you are trying to display the modules is not going to work with the data provider. You need to specify the name of the query in the target attribute like so:

<RA.ReferenceManyField reference="modules" target="listModulesByRoomId.roomId" addLabel={false}>
    <RA.Datagrid>
        <RA.TextField source="id"/>
        <RA.DateField source="createdAt"/>
        <RA.DateField source="updatedAt"/>
        <RA.EditButton/>
    </RA.Datagrid>
</RA.ReferenceManyField>

Check the demo code for more info. It has a complex schema that covers many situations.

[Niraj-Kamdar]

I will test it out.

[Niraj-Kamdar]

I did as you told me to and changed value in target prop but I am still getting this error. Here's the video demo:

[MrHertal]

OK maybe you need to remove the modules field when submitting the form. Try with transform attribute, something like:

const editTransform = ({ modules, ...data }) => ({
  ...data,
});

export const RoomEdit = (props) => (
  <Edit {...props} transform={editTransform}>
    ...
  </Edit>
);

[Niraj-Kamdar]

yeah, it solved the problem. Thanks.