Supabase Client

Supabase JavaScript Client

JavaScript Client Library: @supabase/supabase-js

$ npm install @supabase/supabase-js
$ npm install @supabase/supabase-js

Exemplo:

import { createClient } from '@supabase/supabase-js';
 
const supabase = createClient(
  'https://xyz.supabase.co',
  'public-anon-key'
);
 
const { data, error } = await supabase
  .from('investments')
  .select();
 
console.log(data);
import { createClient } from '@supabase/supabase-js';
 
const supabase = createClient(
  'https://xyz.supabase.co',
  'public-anon-key'
);
 
const { data, error } = await supabase
  .from('investments')
  .select();
 
console.log(data);

Invest-app (CRUD)

Código Fonte

Arquivos
invest-app
├── css
│   └── style.css
├── index.html
├── js
│   ├── components
│   │   ├── InvestmentCard.js
│   │   ├── InvestmentForm.js
│   │   └── Modal.js
│   ├── lib
│   │   ├── dom.js
│   │   ├── format.js
│   │   └── investments.js
│   ├── main.js
│   └── services
│       └── storage.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   └── vite.svg
└── tailwind.config.js
Arquivos
invest-app
├── css
│   └── style.css
├── index.html
├── js
│   ├── components
│   │   ├── InvestmentCard.js
│   │   ├── InvestmentForm.js
│   │   └── Modal.js
│   ├── lib
│   │   ├── dom.js
│   │   ├── format.js
│   │   └── investments.js
│   ├── main.js
│   └── services
│       └── storage.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   └── vite.svg
└── tailwind.config.js
/codes/package/supabase-client/invest-app/js/services/storage.js
import { createClient } from '@supabase/supabase-js';
 
const API_KEY = import.meta.env.VITE_APP_SUPABASE_KEY;
const API_URL = import.meta.env.VITE_APP_SUPABASE_URL;
 
const supabase = createClient(API_URL, API_KEY);
 
async function create(resource, data) {}
async function read(resource, id) {}
async function update(resource, id, data) {}
async function remove(resource, id) {}
 
export default { create, read, update, remove };
/codes/package/supabase-client/invest-app/js/services/storage.js
import { createClient } from '@supabase/supabase-js';
 
const API_KEY = import.meta.env.VITE_APP_SUPABASE_KEY;
const API_URL = import.meta.env.VITE_APP_SUPABASE_URL;
 
const supabase = createClient(API_URL, API_KEY);
 
async function create(resource, data) {}
async function read(resource, id) {}
async function update(resource, id, data) {}
async function remove(resource, id) {}
 
export default { create, read, update, remove };

Create a investment

Supabase - JavaScript Client - Insert

/codes/package/supabase-client/invest-app/js/services/storage.js
async function create(resource, data) {
  const { data: createdData, error } = await supabase
    .from(resource)
    .insert(data)
    .select('*');
 
  if (error) {
    throw error;
  }
 
  return createdData?.[0];
}
/codes/package/supabase-client/invest-app/js/services/storage.js
async function create(resource, data) {
  const { data: createdData, error } = await supabase
    .from(resource)
    .insert(data)
    .select('*');
 
  if (error) {
    throw error;
  }
 
  return createdData?.[0];
}
import Storage from './services/storage.js';
 
const investment = {
  name: "Tesouro Selic 2029",
  value: 10000,
  origin: "Tesouro Direto",
  category: "Pós",
  interest: "100% Selic",
  created_at: "2021-09-10T00:00:00-03:00",
};
 
Storage.create('investments', investment);
import Storage from './services/storage.js';
 
const investment = {
  name: "Tesouro Selic 2029",
  value: 10000,
  origin: "Tesouro Direto",
  category: "Pós",
  interest: "100% Selic",
  created_at: "2021-09-10T00:00:00-03:00",
};
 
Storage.create('investments', investment);

Read investments

Supabase - JavaScript Client - Fetch data

/codes/package/supabase-client/invest-app/js/services/storage.js
async function read(resource, id) {
  const { data, error } = id
    ? await supabase.from(resource).select('*').eq('id', id)
    : await supabase.from(resource).select('*');
 
  if (error) {
    throw error;
  }
 
  return data;
}
/codes/package/supabase-client/invest-app/js/services/storage.js
async function read(resource, id) {
  const { data, error } = id
    ? await supabase.from(resource).select('*').eq('id', id)
    : await supabase.from(resource).select('*');
 
  if (error) {
    throw error;
  }
 
  return data;
}
import Storage from './services/storage.js';
 
Storage.read('investments');
Storage.read('investments', 1);
import Storage from './services/storage.js';
 
Storage.read('investments');
Storage.read('investments', 1);

Update a investment

Supabase - JavaScript Client - Update

/codes/package/supabase-client/invest-app/js/services/storage.js
async function update(resource, id, data) {
  const { data: updatedData, error } = await supabase
    .from(resource)
    .update(data)
    .eq('id', id)
    .select('*');
 
  if (error) {
    throw error;
  }
 
  return updatedData?.[0];
}
/codes/package/supabase-client/invest-app/js/services/storage.js
async function update(resource, id, data) {
  const { data: updatedData, error } = await supabase
    .from(resource)
    .update(data)
    .eq('id', id)
    .select('*');
 
  if (error) {
    throw error;
  }
 
  return updatedData?.[0];
}
import Storage from './services/storage.js';
 
Storage.update('investments', 1, { value: 15000 });
import Storage from './services/storage.js';
 
Storage.update('investments', 1, { value: 15000 });

Delete a investment

Supabase - JavaScript Client - Delete

/codes/package/supabase-client/invest-app/js/services/storage.js
async function remove(resource, id) {
  const { error } = await supabase.from(resource).delete().eq('id', id);
 
  if (error) {
    throw error;
  } else {
    return true;
  }
}
/codes/package/supabase-client/invest-app/js/services/storage.js
async function remove(resource, id) {
  const { error } = await supabase.from(resource).delete().eq('id', id);
 
  if (error) {
    throw error;
  } else {
    return true;
  }
}
import Storage from './services/storage.js';
 
Storage.remove('investments', 1);
import Storage from './services/storage.js';
 
Storage.remove('investments', 1);

Editar esta página