How can I use the return values from useFetch, called in an event handler, in my template?

[ShubhamJain7]

This is what my code looks like:

<template>
 	<div class="p-10">
		<div class="d-flex">
			<h1>Products</h1>
			<button class="btn btn-sm btn-primary ms-3" @click="fetchProducts">
				Fetch Products
			</button>
		</div>
		<div class="d-flex">
			<p class="me-1" v-for="product in products">{{ product.title }}</p>
		</div>
	</div>
</template>

<script setup>
	let products = reactive([])

	async function fetchProducts() {
		const {pending, data} = await useFetch('https://fakestoreapi.com/products/')
		// How to use pending and data in template??
	}
</script>

How can I use the values returned from useFetch like pending and data in my template? All the example I've seen seem to use useFetch at the top level and not inside a function.

[Baroshem]

Hey, what about registering two reactive variables with ref like products and pending in your template and the assigning values from the useFetch to them after frtching the products?

At first products will be empty do you should be using ? operator for certain properties like title

[ShubhamJain7]

I tried doing that but it doesn't seem to work. When I console log the result from useFetch it is a proxy object, maybe that's why? If it's not too much trouble could you share code?
At first products will be an empty list so there is nothing to loop over.

[manniL]

It depends on your intention.

If you want to execute the call e.g. on page load

What you did so far is start writing your own wrapper composable for useFetch, which is more than suitable for e.g. using the same headers for API calls and so on.

I'd suggest returning the values and awaiting the function.

See this StackBlitz for a working example.

<script setup>
async function fetchProducts() {
  const { pending, data } = await useFetch('https://api.nuxtjs.dev/mountains');
  return { pending, data };
}
const { data: products, pending } = await fetchProducts();
</script>
<template>
  <div class="p-10">
    <div class="d-flex">
      <h1>Products</h1>
      <button class="btn btn-sm btn-primary ms-3" @click="fetchProducts">
        Fetch Products
      </button>
    </div>
    <div class="d-flex">
      <p class="me-1" v-for="product in products">{{ product.title }}</p>
    </div>
  </div>
</template>

PS: If you want to extract your composable at some point, please be aware of correctly keying it (see docs for more info on that).

---

If you want to execute it after pushing a button (send a form/whatever)

Best would be to use $fetch then and assign the result of the function to a ref.

[manniL]

I'd like it to execute on the push of a button. Does $fetch also return a value akin to pending?

No, as it is no composable. You'll have to handle the loading state on your own here.

[ShubhamJain7]

Ok, thanks!

[basic-ph]

Hello, I'm in the "button pushing" scenario.
What do you guys think about something like this?

const {
  data,
  execute,
  status,
  error,
} = await useFetch(`/auth/login`, {
  immediate: false,
  method: "POST",
  body: {
    email: "user@domain.com",
    password: "secretpassword",
  },
});

async function onSubmit(event) {
  execute();
}

In this way I can "fire" the request when onSubmit function il called (i.e. @click=onSubmit in a button) and get back all the useful data the composable returns (data, status error).

[Amar-Gill]

My thoughts too. Setting immediate: false let's us have access to all the convenient refs provided by useFetch in the template

[manniL]

As long as it is "top-level" and not initialized in a handler, yes, that works.