onSettled error when creating a child item

Hey, so we've overriden the save on click handler with our own function to create an "item", then once that "item" is created, we the create an "artwork" that belongs to that item. We capture all the details in one form. How we've done it is like this:
const { mutate } = useCreate();
const onSave = () => {
mutate({
resource: "item",
values: {
...itemValues,
},
},
{
onSuccess: (data) => {
const id = data.data.id;
const formData = new FormData();
formData.append('file', artworks[0]);

Object.keys(artworkValues).forEach((k, i) => {
var d = Object.values(artworkValues)[i];
formData.append(k, d);
})

mutate({
resource: `item/${id}/artwork`,
values: formData,
});
},
});
};
const { mutate } = useCreate();
const onSave = () => {
mutate({
resource: "item",
values: {
...itemValues,
},
},
{
onSuccess: (data) => {
const id = data.data.id;
const formData = new FormData();
formData.append('file', artworks[0]);

Object.keys(artworkValues).forEach((k, i) => {
var d = Object.values(artworkValues)[i];
formData.append(k, d);
})

mutate({
resource: `item/${id}/artwork`,
values: formData,
});
},
});
};
<Create isLoading={formLoading} saveButtonProps={{ ...saveButtonProps, disabled: isSaveDisabled, onClick: onSave }}>
<Create isLoading={formLoading} saveButtonProps={{ ...saveButtonProps, disabled: isSaveDisabled, onClick: onSave }}>
This works, it created an item, then creates an artwork for us, no problem. However, we get the following error, which is caused by the artwork mutate, as when we comment it out the error doesn't happen.
mutation.ts:261 TypeError: Cannot read properties of undefined (reading 'onSettled')
at mutationObserver.ts:177:1
at Object.batch (notifyManager.ts:25:1)
at MutationObserver.notify (mutationObserver.ts:168:1)
at MutationObserver.onMutationUpdate (mutationObserver.ts:100:1)
at mutation.ts:356:1
at Array.forEach (<anonymous>)
at mutation.ts:355:1
at Object.batch (notifyManager.ts:25:1)
at Mutation.dispatch (mutation.ts:354:1)
at Mutation.execute (mutation.ts:248:1)
mutation.ts:261 TypeError: Cannot read properties of undefined (reading 'onSettled')
at mutationObserver.ts:177:1
at Object.batch (notifyManager.ts:25:1)
at MutationObserver.notify (mutationObserver.ts:168:1)
at MutationObserver.onMutationUpdate (mutationObserver.ts:100:1)
at mutation.ts:356:1
at Array.forEach (<anonymous>)
at mutation.ts:355:1
at Object.batch (notifyManager.ts:25:1)
at Mutation.dispatch (mutation.ts:354:1)
at Mutation.execute (mutation.ts:248:1)
Is there a better more refine way of doing what we are doing here?
5 Replies
kapa.ai
kapa.ai2y ago
Hi @johnwards. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai2y ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation for more information on how to use hooks and mutations effectively: - useCreate Hook (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/) - useForm Hook (https://refine.dev/docs/api-reference/core/hooks/useForm) These resources might help you find a better way to handle your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
useCreate | refine
useCreate is an extended version of TanStack Query's useMutation. It supports all the features of useMutation and adds some extra features.
useForm | refine
useForm is a hook that allows to manage forms. It has some action methods that create, edit and clone the form. The hook return value comes to according to the called action and it can run different logic depending on the action.
kapa.ai
kapa.ai2y ago
<@128446913274970112> kapa.ai is still learning and improving, please let us how it did by reacting below
foreign-sapphire
foreign-sapphire2y ago
Hmm so playing around a bit more after reading https://tanstack.com/query/v4/docs/react/guides/mutations#consecutive-mutations I created an artwork mutate like this and used it:
const { mutate:artworkMutate } = useCreate();
const { mutate:artworkMutate } = useCreate();
artworkMutate({
resource: `item/${id}/artwork`,
values: formData,
});
artworkMutate({
resource: `item/${id}/artwork`,
values: formData,
});
Is this valid? Am I doing bad things/hacks??
Omer
Omer2y ago
Hey @johnwards , It seems right to me, congratulations