Using Vue Query Hooks For Firebase Database and Image Storage, Mutations and Queries in VueJS

npm init vite@latest

npm install vue-query

npm install vue-router@next

npm install firebase

VITE_APP_PROJECT_ID=image-bahVITE_APP_PROJECT_BUCKET=image-bah.appspot.com

import {  addDoc,  collection,  doc,  getDoc,  getDocs,  getFirestore,  setDoc,} from "firebase/firestore";import { getDownloadURL, getStorage, ref, uploadBytes } from "firebase/storage";

/** * 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;};

/** * 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() };};

/** * 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 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 };};

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 firebaseconst 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");

<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-setupimport ImageList from './components/ImageList.vue'</script><template>  <ImageList  /></template>

<script setup lang="ts">import { useQuery, useQueryClient } from "vue-query";import { getAllImages } from "../firebase-functions";//A QUERY CLIENTconst queryClient = useQueryClient();// A QUERY HOOKconst { 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>

<script setup lang="ts">import { useQuery } from "vue-query";import { getImageDocument } from "./firebase-functions";//* Define Properties used in Componentconst { docId } = defineProps<{ docId: string }>();// query hook for one item, based on the docIdconst { 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>

<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>

// A MUTATION HOOK, call the mutation function and on success// clear all of the images so that they are reloaded with the new// dataconst mutation = useMutation(uploadImageInfo, {  onSuccess: () => {    queryClient.invalidateQueries("images");  },});/** * opens the file dialog when the button is clicked */const openFileDialog = () => {  document?.getElementById("file-upload")?.click();};

// A MUTATION HOOKconst mutation = useMutation(deleteImageDocument, {  onSuccess: () => {    debugger;    queryClient.invalidateQueries("images");    router.replace("/");  },});

<div v-if="mutation.isError.value === true">  An error has occurred: {{ mutation?.error.value }}</div>

<div style="display: flex; justify-content: flex-end">  <button @click="mutation.mutate(docId)" style="margin: 16px">    DELETE  </button></div>