@Vigilio/vue-fetching
A simple vue Hooks library for data fetching.
Getting Started
useQuery: to consume data fetching GET
<script lang="ts" setup>
function getUsers = async(url:string) => {
const response = await fetch("http://yourhost/api" + url);
const result:Datatype = await response.json();
return result;
}
const { isLoading, data, isSuccess,isError,...rest} = useQuery("/users", getUsers);
</script>
<template>
<p v-if="isLoading">Loading...</p>
<p v-if="isError">error...{{ JSON.stringify(rest, error) }}</p>
<p v-if="isSuccess">{{ JSON.stringify(data, null, 3) }}</p>
</template>- Api reference
const options ={
skipFetching: boolean; // skip the fetch
placeholderData; // before consume fetch show placeholder
transformData:; // custome response data
}
const showUser = useQuery("/users", getUsers,options);
const options = {
skipFetching: false, // skip fetch ->default false
placeholderData: null, //placeholder ->default null
transformData: null, //transform success data ->default null
staleTime: null, // if you want refetch for a seconds 1 = 1000 ms
refetchIntervalInBackground: false, // when the client change the page, it will refetch
onError: null, // callback when the fetch is not success (err)=>{} //default null
onSuccess: null, // callback when the fetch is success (data)=>{} //default null
refetchOnReconnect: false, // when the net back it fetching // default false
delay: null, // delay to consume fetch //default null
clean: true, // it no clean when refetch data //default clean
};useMutation: to consume data fetching POST-PUT-DELETE-PATCH
<script>
interface Body {
name: string;
}
async function addUser(url: string, body: Body) {
const data = await fetch(url, {
method: "POST", // method
body: JSON.stringify(body),
headers: {
"Content-Type": "application/json",
},
});
return data;
}
const { mutate, isLoading, isSuccess, ...rest } = useMutation(
"/users",
addUser
);
const name = ref("");
// mutate
function onSubmit() {
//mutate(body,options) :
mutate(
{ name }, // inputs fields
{
onSuccess: (data) => {
console.log(data);
},
onError: (error) => {
console.log(error);
},
}
);
}
</script>
<template>
<template>
<form @submit.prevent="onSubmit" novalidate>
<div class="">
<label for="name">Nombre</label>
<input
type="text"
id="name"
v-model="name"
placeholder="your name"
/>
</div>
<button type="submit">Enviar</button>
</form>
</template>
</template>You can use Mutate async if you prefer
const { mutateAsync, isLoading, isSuccess, ...rest } = useMutation(
"/users",
addUser
);
// mutateAsync
async function handleSubmit() {
try {
const data = await mutateAsync({ nombre });
//
} catch (err) {
// your error response
}
}- Api reference
// mutate options
{
onSuccess?: (data) => {};
onError?: (error) => {};
transformData?: (data) => Data; // you cand modify response data
}USING AXIOS
const baseurl = axios.create({ baseURL: "http://yourhost/api" });
interface Api {
id: number;
name: string;
}
async function showUsers(url: string) {
const { data } = await baseurl.get<Api[]>(url);
return data;
}
const { isLoading, data, ...rest } = useQuery("/users", showUsers);
//....MORE EXAMPLES
Dinamic Params usando vue-router
<script langs="ts" setup>
interface UserTypeApi {
id: number;
nombre: string;
}
async function showById(url: string) {
const { data } = (await baseurl.get) < UserTypeApi > url;
return data;
}
const { id } = useRoute().params;
const { isLoading, data, isSuccess, isError, error } = useQuery(
`/users/${id}`,
showById
);
</script>