A new way to use createMutation (at least with Svelte)?

[frederikhors]

I'm trying to use for the first time @tanstack/svelte-query today.

The query part works good.

What I find inconvenient is the use of mutations with svelte.

<script lang="ts">
    import { createMutation } from "@tanstack/svelte-query";
    import { prepare_from } from "./form";

    let isSubmitting;

    const create = createMutation({
        mutationFn: async (input: PlayerInput) => console.log("execute real mutation here", input)
    });

    async function submit(form: OrderForm) {
        try {
            isSubmitting = true; // Just an example...

            const input = prepare_from(form); // Just an example...
            if (input.error) throw input.error;

            // Using $create.mutate here obviously gives me no error and there is no way for me to "rollback"
            // neither to "wait" for the executed mutation
            const result = $create.mutate(input);

            // Using $create.mutateAsync gives me the error but it directly throws without letting me "inspect"
            // the possible error. I'm forced to use the very verbose `.catch(()=>())` syntax
            // and in the browser console the error is written using console.error() and I think there is no need for this:
            // first because the error is handled
            // second because it can be an application / business logic error
            const result = await $create.mutateAsync(input);

            // I would like to use it like this instead:
            const result = await $create.mutateWithResult(input);
            if (result.error) {
                // understand what the error is and do something appropriate, e.g.:
                throw result.error.message;
            }

            notify.ok("Submitted!")

            // Do other things here...
        } catch (err) {
            notify.err("Something bad happened:", err)
        } finally {
            isSubmitting = false; // Just an example
        }
    }
</script>

If you read the comments you can understand the annoying problem that makes using it very annoying right now.

Thank you for your work!

[bkuhn25]

Hi Frederick :)

I came across your code which actually helped me a lot (I'm coming from previous versions where it was called useMutation).

I believe what you're trying to do is possible, however you do it in a slightly different way then you showed.

To access the isLoading or isError that results from the mutation you do it like so:

$create.isPending

Then if you want to show a loading modal or something while it's loading you can do:
{#if $create.isPending} <Spinner /> {/if}

Same goes for error so if there's an error you can show the error message.

Hope it helps!