DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Aaron K Saunders
Aaron K Saunders

Posted on

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

Enter fullscreen mode Exit 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 mode Exit 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 mode Exit fullscreen mode

More

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

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!