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>

More

• Tons more content on my Youtube Channel here
• Udemy Courses here
• GumRoad Content here