Aaron K SaundersVue Query package provides hooks for fetching, caching and updating asynchronous data in Vue. Based on react-query. All main concepts are inherited from the main package. Please also check the react query docs*
I love React Query so I thought it would be great to checkout Vue Query and put together a quick code walkthrough of a simple project. I used Firebase because I already had a project in place, but it could have been any database provider, Supabase might be next !!
Video
High Level Walkthrough of the video including the source code used
Create Vue Project using Vite
npm init vite@latest
install vue-query
npm install vue-query
install vue-router
npm install vue-router@next
install firebase
npm install firebase
Create .env file containing firebase credentials in the root of your project
VITE_APP_PROJECT_ID=image-bah
VITE_APP_PROJECT_BUCKET=image-bah.appspot.com
Firebase Functions - we are using the new version of firebase javascript SDK in this example so things look a bit different.
import {
addDoc,
collection,
doc,
getDoc,
getDocs,
getFirestore,
setDoc,
} from "firebase/firestore";
import { getDownloadURL, getStorage, ref, uploadBytes } from "firebase/storage";
Get All Items
/**
* the function called with the vue-query useQuery hook when the page
* is rendered
*/
export const getAllImages = async (): Promise<any[]> => {
const results: any[] = [];
const snap = await getDocs(collection(getFirestore(), "ImageInfo"));
snap.forEach((doc) => {
results.push({ id: doc.id, ...doc.data() });
});
return results;
};
Get A Single Item
/**
* function to query firebase for the specified document
*/
export const getImageDocument = async (docId) => {
const snap = await getDoc(doc(getFirestore(), "ImageInfo", docId));
if (!snap.exists()) throw `Document ${docId} Not Found`;
return { id: snap.id, ...snap.data() };
};
Delete A Single Item
/**
* function to delete a specified document from firebase
*/
export const deleteImageDocument = async (docId: string): Promise<any> => {
const snap = await deleteDoc(doc(getFirestore(), "ImageInfo", docId));
return true
};
Upload Image Information
/**
* upload image tp storage and save additional information in
* imageData collection
*/
export const uploadImageInfo = async (params: File) => {
console.log(params);
const storageRef = ref(getStorage(), `images/${params.name}`);
// 'file' comes from the Blob or File API
const snapshot = await uploadBytes(storageRef, params, {
contentType: params.type,
});
console.log("Uploaded a blob or file!", snapshot);
const url = await getDownloadURL(storageRef);
await addDoc(collection(getFirestore(), "ImageInfo"), {
imageData: {
size: snapshot.metadata.size,
contentType: snapshot.metadata.contentType,
},
name: snapshot.metadata.name,
url,
});
return { data: snapshot };
};
Set up routes and initialize firebase
import { createApp } from "vue";
import Home from "./Home.vue";
import Detail from "./Detail.vue";
import App from "./App.vue";
import { createRouter, createWebHistory } from "vue-router";
import { initializeApp } from "firebase/app";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/detail/:docId",
name: "Detail",
component: Detail,
props: true,
},
];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: routes as any,
});
// initialize firebase
const app = initializeApp({
projectId: import.meta.env.VITE_APP_PROJECT_ID as string,
storageBucket: import.meta.env.VITE_APP_PROJECT_BUCKET as string,
});
createApp(App).use(router).mount("#app");
Listing All Items In Collection
The home component is just the list component showing the data from the firebase storage collection
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import ImageList from './components/ImageList.vue'
</script>
<template>
<ImageList />
</template>
The ImageList Component, first lets just get a list of date using vue-query, We have imported from firebase-functions the call to query the database getAllImages
<script setup lang="ts">
import { useQuery, useQueryClient } from "vue-query";
import { getAllImages } from "../firebase-functions";
//A QUERY CLIENT
const queryClient = useQueryClient();
// A QUERY HOOK
const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
"images",
getAllImages
);
</script>
<template>
<div v-if="isLoading">Loading...</div>
<div v-else-if="isError">An error has occurred: {{ error }}</div>
</template>
<style scoped>
/* style removed for brevity */
</style>
Getting A Single Item From the Collection
We have created a detail page to demonstrate how to query just one item from the collection. This script import the firebase function getImageDocument. The document id is passed a parameter and it is used in the useQuery hook to query the database for the document
<script setup lang="ts">
import { useQuery } from "vue-query";
import { getImageDocument } from "./firebase-functions";
//* Define Properties used in Component
const { docId } = defineProps<{ docId: string }>();
// query hook for one item, based on the docId
const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
["images", docId],
// call query with parameter
() => getImageDocument(docId as any)
);
</script>
<template>
<section>
<button @click="$router.replace('/')" style="margin: 16px">GO HOME</button>
<div v-if="isLoading">Loading...</div>
<div v-else-if="isError">An error has occurred: {{ error }}</div>
<div v-else-if="data">
<div style="width: 100%">
<img :src="'data.url'"
style="
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
"
/>
</div>
<div style="margin: 16px; overflow-wrap: break-word">
<div>{{ data.name }}</div>
<div>{{ data.imageData.size }}</div>
<div>{{ data.imageData.contentType }}</div>
</div>
</div>
</section>
</template>
Adding An Item To A Collection, or Mutations
We have added a new section to the template in Home.vue where we have a button that displays the input to select a file and we will upload the file to firebase storage and save some information in a collection.
<section>
<!-- if we get a mutation error, display it -->
<div v-if="mutation.isError.value === true">
An error has occurred: {{ mutation?.error.value }}
</div>
<!-- input element to capture new file -->
<input
id="file-upload"
type="file"
style="display: none"
@change="
(e) => {
e?.target?.files?.length && mutation.mutate(e?.target?.files[0]);
}
"
/>
<div>
<button @click="openFileDialog">Upload New Image</button>
</div>
</section>
In the script section we have added a few new functions and introduced the useMutation hook. The mutation object returned has a mutate function that we call to actually upload the file.
// A MUTATION HOOK, call the mutation function and on success
// clear all of the images so that they are reloaded with the new
// data
const mutation = useMutation(uploadImageInfo, {
onSuccess: () => {
queryClient.invalidateQueries("images");
},
});
/**
* opens the file dialog when the button is clicked
*/
const openFileDialog = () => {
document?.getElementById("file-upload")?.click();
};
Deleting An Item
in the Detail component we have a button that will trigger another mutation to delete the document using the firebase function we covered earlier. The delete mutation looks like this
// A MUTATION HOOK
const mutation = useMutation(deleteImageDocument, {
onSuccess: () => {
debugger;
queryClient.invalidateQueries("images");
router.replace("/");
},
});
we also make changes to the template, one is to catch any mutation errors
<div v-if="mutation.isError.value === true">
An error has occurred: {{ mutation?.error.value }}
</div>
the other is the addition of the button to trigger the delete
<div style="display: flex; justify-content: flex-end">
<button @click="mutation.mutate(docId)" style="margin: 16px">
DELETE
</button>
</div>
