How to hook multiple times in component in Vue 3 - vue.js

Question

I saw in one lesson that we can create with composition api hook usePromise but the problem that I have simple crud app with to-do list, where I have create, delete, get API calls and I don't understand how I can use this hook for all api in one component. All call works correct but the loading is not, it works only at first call PostService.getAll() and then loader isn't triggered. Thanks for response.
usePromise.js
import { ref } from 'vue';
export default function usePromise(fn) {
const results = ref(null);
const error = ref(null);
const loading = ref(false);
const createPromise = async (...args) => {
loading.value = true;
error.value = null;
results.value = null;
try {
results.value = await fn(...args);
} catch (err) {
error.value = err;
} finally {
loading.value = false;
}
};
return { results, loading, error, createPromise };
}
apiClient.js
import axios from 'axios';
export default axios.create({
baseURL: 'https://jsonplaceholder.typicode.com/',
withCredentials: false,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
PostService.js
import apiClient from './apiClient';
const urlPath = '/posts';
export default {
getAll() {
return apiClient.get(urlPath);
},
add(post) {
return apiClient.post(urlPath, post);
},
delete(id) {
return apiClient.delete(`${urlPath}/${id}`);
},
};
List.vue
<template>
<div>
<VLoader v-if="loading" />
<template v-else>
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts" :key="post.id">
<td>{{ post.id }}</td>
<td>{{ post.title }}</td>
<td>
<button class="btn btn-danger ml-1" #click="deletePost(post.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</template>
</div>
</template>
<script>
import { ref, computed, watch, unref } from 'vue';
import PostService from '#/services/PostService';
import usePromise from '#/use/usePromise';
export default {
setup() {
const posts = ref([]);
const post = ref({
title: '',
body: '',
});
const {
results: postsResultRef,
loading: postsLoadingRef,
createPromise: getAllPosts,
} = usePromise(() => PostService.getAll());
getAllPosts(); //get all posts by initialize component
const {
results: postDeleteResultRef,
loading: postDeleteLoadingRef,
createPromise: deletePost,
} = usePromise((id) => PostService.delete(id).then((result) => ({ ...result, removedId: id })));
watch(postsResultRef, (postsResult) => {
posts.value = postsResult.data;
});
watch(postDeleteResultRef, (postDeleteResult) => {
if (postDeleteResult.status === 200) {
posts.value = posts.value.filter((item) => item.id != postDeleteResult.removeId);
// unref(posts).splice(/* remove postDeleteResult.removedId */);
}
});
const loading = computed(() => [postsLoadingRef, postDeleteLoadingRef].map(unref).some(Boolean));
return { posts, post, loading };
},
};
</script>

Answer 1

A ref keeps reactive reference to a value that is supposed to exist through the entire component lifecycle. It stays reactive on other places of a component - a template, computed properties, watchers, etc.
Hooks like usePromise are supposed to be set up inside setup function (hence the name):
const { results, loading, createPromise } = usePromise(() => PostService.getAll()
For multiple requests, multiple hook results can be composed:
const posts = ref([]);
const { results: postsResultRef, loading: postsLoadingRef, createPromise: getAllPosts } = usePromise(() =>
PostService.getAll()
);
const { results: postDeleteResultRef, loading: postDeleteLoadingRef, createPromise: deletePost } = usePromise(id =>
PostService.delete(id).then(result => ({...result, removedId: id }))
);
...
watch(postsResultRef, postsResult => {
posts.value = postsResult.data
});
watch(postDeleteResultRef, postDeleteResult => {
if (postDeleteResult.status === 200)
unref(posts).splice(/* remove postDeleteResult.removedId */)
});
...
const loading = computed(() => [postsLoadingRef, postDeleteLoadingRef, ...].map(unref).some(Boolean))
getAllPosts, etc are supposed to be used as a callback, e.g. in a template, a promise it returns doesn't need to be handled explicitly and chained in general, as its current state is already reflected in hook results. This indicates a potential flaw in the hook, as createPromise arguments are unknown at the time when a result is available, this requires to provide a parameter explicitly for delete result.

Answer 2

The problem is only the first loading ref is returned from setup(). The others are hidden and unused inside each method.
One solution is to track the active loading ref in state, returned from setup():
Declare state.loading.
export default {
setup() {
const state = reactive({
//...
loading: null,
})
//...
}
}
Set state.loading to the loading ref within each method.
const fetchPosts = () => {
const { results, loading, createPromise } = usePromise(/*...*/)
state.loading = loading
//...
}
const deletePost = (id) => {
const { results, loading, createPromise } = usePromise(/*...*/)
state.loading = loading;
//...
}
const onSubmit = () => {
const { results, loading, createPromise } = usePromise(/*...*/)
state.loading = loading
//...
}
Remove the loading ref that was originally returned from setup(), since we already have state.loading, and toRefs(state) would expose loading to the template already:
export default {
setup() {
//...
//return { toRefs(state), loading }
// ^^^^^^^
return { toRefs(state) }
}
}
demo