Pass options to useFetch execute()

Clear and concise description of the problem

Suppose I want to save a User.

<input v-model="user.id" />
<button @click="onSave(user)">

const user = ref({ firstname: '', lastName: '', id: '1' });

const useSaveUser = (user: Ref<User>) => {
  return useFetch(computed(() => `/api/user/${user.id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user.value) // this is not reactive :(
  }));
}

const { data, isFetching error, execute: onSave } = useSaveUser(user);

The URL is reactive, so when I call execute() it will call the endpoint /api/user/2 after I change the id into 2 with the input field. However the options are not reactive so I cannot PUT the updated user.

Am I missing something or is it pretty hard to use usefetch except for when you are fetching things?

Suggested solution

It would be nice if you can pass options to the execute method. These will be merged with the options that you already passed when calling useFetch.

const useSaveUser = (user: Ref<User>) => {
  return useFetch(computed(() => `/api/user/${user.id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
  }));
}

const { data, isFetching error, execute } = useSaveUser(user);

const onSave = (user) => {
  execute(undefined, {
    url: `/api/user/${user.id}`,
    body: JSON.stringify(user)
  });
}

Alternative

As a workaround I can do something like this:

const isFetching = ref(false);
const showError = ref(false);
const onSave = (user) =>
  isFetching.value = true;
  showError.value = false;

  const { data, error } = await useFetch(`/api/user/${user.id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  }));

  isFetching.value = false;
  showError = !!error.value;
}

However then I don’t make use of hooks and I need to keep redundant state. Then I can also use fetch or one of the available vanilla JS API clients.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[fvanwijk]

In the mean time I created this full example, including error handling.

So the main differences with your example are:

1. Supports PUT and POST depending on which button you click
2. The userRef should not be updated when we click Save as. It should create a copy that is POSTed. Hence the need for passing a different payload to execute 😃

https://stackblitz.com/edit/vue-hbnfxy?file=src/App.vue

This the same example but then fully working as expected, because everything is reactive. The code however is horrible.

https://stackblitz.com/edit/vue-hcwdn3?file=src%2FApp.vue

[fvanwijk]

I mean options like headers and method