C - Create a new record
R - Read your data
U - Update records
D - Delete records
In the following examples we will be creating a todo app which has the following data structure:
Table - Todo
id, date, job, completed
You need to create a async function for this to work. You will need to know the table name and fields you wish to insert into. In this example we are inserting the job name and setting the field completed to false.
async function addJob() {
//get the values from the input boxes
let job = newJob.value;
newJob.value = '';
console.log(job);
const { data, err } = await supabase
.from('Todo')
.insert({ job: job, completed: 'false' })
if (err) {
console.log(err);
} else {
getJobs(); //run the getJobs function - you will need to update.
}
}
When we read data from a database we need to provide 4 arguments
from - which table
which fields would you like returned -(*) means all fields
where - specific search for a field and value - this can be = > < etc.
More examples can be found here - https://supabase.com/docs/reference/javascript/using-filters
order - which field would you like data to be sorted by asc or desc
This example below fetches all the data from the todo table sorting data in ascending order by id
async function getJobs() {
let { data: Todo, error } = await supabase
.from('Todo')
.select('*')
.order('id', { ascending: false })
if (error) {
console.log(error);
} else {
console.log(Todo);
}
}
In this example we search for a specific todo with the id 1. We use eq command to say equal to
async function getSpecificJob() {
let { data: Todo, error } = await supabase
.from('Todo')
.select('*')
.eq('id', 1)
.order('id', { ascending: false })
if (error) {
console.log(error);
} else {
console.log(Todo);
}
}
When we update data we require the id of the record. We send the id of the record as an argument in the example below. This function updates the status of the completed field to true.
async function addCompletedJob(id) {
console.log(id);
const { err } = await supabase
.from('Todo')
.update({ completed: 'true' })
.eq('id', parseInt(id))
if (err) {
console.log(err)
} else {
getJobs();
}
}
When we delete data in our database we need to know the id of the record. We send the id of the record through a delete button argument as in the function below.
In the example below we delete an item from our todo list where the record is equal to id.
async function removeJob(id) {
const { data, error } = await supabase.from('Todo')
.delete()
.eq('id', parseInt(id))
if (err) {
console.log(err)
} else {
//do something
}
}
Special note about buttons and functions
Becasue we are using modules with Supabase. Using innerhtml to add a button to your display will be out of scope. Therefore when adding buttons you will need to use the create element and add event listener approach, then use addchild to append to a html element.
See below an example for the delete button.
const delBut = document.createElement('button');
delBut.textContent = 'X';
delBut.addEventListener('click', () => { removeJob(element.id) });
if (element.completed === 'true') {
jobDiv.append(delBut);
}