Using the VueJS Composition API to Create Hooks for Supabase Database and Storage
Sample application using Composition API to create "hooks" to interact with the supabase api.
This is a work in progress, but wanted to show the approach I used which might inspire some one to go all the way... This isn't using typescript which I think would be a great next step.
Overview
The main objective here is to get isolated the functionality into specific composition functions and take advantage of the reactivity of vue to expose refs for the data, error, and loading.
if you look at one of hooks below
import { ref } from "vue";
import useClient from "./sb-hooks";
/**
*
* @param {*} table - table to execute query against
* @param {*} columns - columns to return
* @param {*} auto - if true, run query at startup
* @returns
*/
export default function (table, columns = "*", auto = true) {
const error = ref(null);
const data = ref([]);
const loading = ref(false);
// get supabase client
const client = useClient();
/**
* this is the function that does the actual query
*/
const doQuery = async () => {
loading.value = true;
console.log(table, columns);
let { data: qData, error: qError } = await client
.from(table)
.select(columns);
loading.value = false;
data.value = qData;
error.value = qError;
};
// if auto flag is set, run a startup
if (auto) {
doQuery();
}
return {
// reactive variables...
error,
data,
loading,
// function to call to execute query
doQuery,
};
}
here is how you might use it in your component
import useQuery from "../hooks/sb-hooks-select";
import { defineComponent } from "vue";
export default defineComponent({
name: "HomePage",
setup() {
const {
loading,
error,
data,
doQuery
} = useQuery("products", "*", true);
return {
loading,
error,
data,
};
},
});
and you template would look like this, utilizing the reactive properties from the hook.
<div v-if="loading">LOADING...</div>
<div v-else-if="error" class="error-panel">{{ error }}</div>
<div v-else-if="data">
<template v-for="item in data" :key="item.id">
<router-link :to="`/detail/${item.id}`">
<item-component :item="item" />
</router-link>
</template>
</div>
Watch the whole video here and check out the full source code here in my GitHub Repository