Skip to main content

Supabase

To setup the supabase​

Install the package​

npm install @supabase/supabase-js

Create the client​

  • The location does not matter, I however kept it here in the components file
mkdir utils && touch utils/supabaseClient.js
  • Inside the supabaseClient.js file
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = process.env.SUPABASE_URL;
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Storing the variables​

  • Create the dotenv file
npm i dotenv && touch .env.development
  • Save the keys in the file
SUPABASE_ANON_KEY = 'Keygoeshere'
SUPABASE_URL = 'https://youruniqueurlgoeshere.supabase.co'

Creating Model​

create table product (
    id bigint generated by default as identity primary key,
    display_name text not null,
    is_visible boolean default false not null,
    product_description text,
    product_slug text not null,
    deleted_at timestamp null,
    inserted_at timestamp with time zone default timezone('ist'::text, now()) not null,
    updated_at timestamp with time zone default timezone('ist'::text, now()) not null
);

Creating an API​

mkdir pages/api & touch pages/api/first-api.js
import { supabase } from "../../utils/supabaseClient";
export default async function handler(req, res) {
	// Change from("product") to your object name
	const { data } = await supabase.from("product").select();
	console.log("data", data);
	res.status(200).send(data);
}
  • Add a row in supabase
  • Test by clicking here

Best Practice​

  1. Use the sql editor to create table or make modifications
  2. Store all the queries in a markdown file
mkdir api-lib && touch api-lib/supaQueries.md