foreign-sapphire•2y ago

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•2y 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•2y 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•2y ago

<@128446913274970112> kapa.ai is still learning and improving, please let us how it did by reacting below

foreign-sapphire•2y 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•2y ago

Hey @johnwards , It seems right to me, congratulations