Defer running of mutation so it's not running on component setup

I’m using useAsyncGql to run a mutation. I’m defining it in the component setup, but I want to defer running the mutation until a button is clicked. When the button is clicked, I run the refresh() function.

However, the mutation is also running on component setup. I wish to prevent that because it’s polluting the error ref and making an unneccesary request.

I tried using lazy: true in the configuration:

<script setup>
const { data, error, refresh, pending } = await useAsyncGql("createTodo", {
  todo: addTodo
}, {
  lazy: true
});

const submit = async () => {
  await refresh();
}
</script>

This code will attempt to run the mutation on component load.

How can I prevent it from running on component setup? 😃

[TheDutchCoder]

This solution works, but I think it would be cleaner if there was a native alternative. How about something like:

<script setup lang="ts">
const { data, error, refresh, pending } = await useAsyncGql("createTodo", {
  todo: addTodo
}, {
  defer: true, // would not execute the call until `refresh` was called
});
</script>

This way we wouldn’t need to define custom refs to keep track of data and assign it.

[MrTeapot]

Thanks for getting back to me. Oh nice, I didn’t realize that functions are generated like that! Cool stuff.

I’ll give it a try and then post my solution here. Hopefully I can contribute with adding this to the docs afterwards.