Update related objects
Hi there,
I’m looking for a way to update nested objects using Refine. Did not yet settle on a data provider but initially thought about using Hasura (GraphQL) on top of postgres. It allowed me to easily query multiple nested related objects and using the Ant Design system I worked out to load the nested objects in an edit form using <Form.List>.
Usecase
I'd like to make a page to create and edit invoices, in which the underlying tasks can be edited within the same form. Using the AntD I was able to create a working frontend (see attachment), but can't yet handle the mutation / creation in the database.
The frontend allows me to remove and add tasks, which returns the correct values.
Below you can see the console.log(values) caught in the onFinish
Task 1 and Task 2 were loaded from the db. Task 3 was added in the frontend:
{
customer_id: 1,
invoice_text: "Invoice text example",
tasks: [
{
name: "Task 1 name",
description: "Description of task 1"
},
{
name: "Task 2 name",
description: "Description of task 2"
},
{
name: "Task 3 name",
description: "Description of task 3 etc. etc."
}
]
}
However, it turns out Hasura does not yet allow nested mutations since it’s still on their roadmap:
https://github.com/hasura/graphql-engine/issues/1573
I was therefor wondering whether another Data Provider would be able to handle these type of mutations?
And if not, would it be possible to handle the mutations/creations of the tasks tasks separately? Any pointers on this?
Thanks in advance!
ThomasGitHub
update nested object · Issue #1573 · hasura/graphql-engine
First, thank you very much for your work on Hasura, its a great product. There is a feature that I would be very happy to have, wanted to know what are your thoughts on it. Currently there Is a nes...
![No description](https://cdn.answeroverflow.com/1066023377782976512/nested_objects.png)
8 Replies
robust-apricot•2y ago
Hİ @prikkel., i will investigate to issue and return you as soon as possible
frozen-sapphire•2y ago
Thanks @alicanerdurmaz !
Hi @prikkel. ,
You can directly use data hooks like useCreate/useUpdate/useDelete, etc for mutation
Example blog post: https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design/
How to Create Dynamic Forms in React CRUD app with Ant Design | refine
Easy way to creating dynamic forms in React CRUD apps with Ant Design
frozen-sapphire•2y ago
Hi Omar,
Thanks for the quick reply. Unfortunately the link you sent doesn’t seem to contain any reference to useCreate or useUpdate, since everything is handled by the useForm component.
Your remark did intrigue me so I went looking for ways to manually input the tasks. After running into some problems with calling hooks in the wrong places I succeeded in added tasks by hand by declaring the useCreate outside the components:
const { mutate } = useCreate<ITaken>();
And calling mutate inside onFinish as shown here https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api :
mutate({
resource: "taken"
, values: { offerte_id: 1, naam: "Task 3", omschrijving: "Description of Taak 3" },
} );
I’ll look into how to handle the different scenarios and get back if I have any further questions or worked out the solution a bit more!FAQ | refine
How can I change the form data before submitting it to the API?
frozen-sapphire•2y ago
<Form {...formProps} layout="vertical" onFinish={(values) => { console.log(values);
if ("taken" in values) {
const { taken } = values;
// check against initialValues:
// if id missing -> useDelete
// if id already existed -> useUpdate
// if id empty -> useCreate
// mutate(
// {
// resource: "taken",
// values: {
// offerte_id: 1,
// naam: "Task 3",
// omschrijving: "Description of Taak 3"
// },
// }
// );
delete values["taken"];
}
return (
formProps.onFinish &&
formProps.onFinish({ ...values })
);
}}>
Did it work? 🙂
frozen-sapphire•2y ago
It did!
To edit the tasks, I would remove the tasks from the submitted values and handle each according to whether or not it already existed or was removed alltogether:
In order to create I first needed to create the project, catch the generated ID and add the tasks afterwards. Still looking into how to handle any exceptions better but works for now.