2

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

 3 years ago
source link: https://dev.to/aaronksaunders/using-the-vuejs-composition-api-to-create-hooks-for-supabase-database-and-storage-4b14
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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,
  };
}
Enter fullscreen modeExit fullscreen mode

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,
    };
  },
});
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode
  • Tons more content on my Youtube Channel here
  • Udemy Courses here
  • GumRoad Content here

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK