Using the VueJS Composition API to Create Hooks for Supabase Database and Storage

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,
  };
}

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,
    };
  },
});

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