Deleting records from a Supabase database

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

Rendering a delete button

The first thing we want to add is a delete button so we have something to click on.

We'll use a button with the raw svg from a Fontawesome icon.

<button onClick={() => deleteCountry(country.id)}> <svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 0 448 512' width='0.75rem' > <path fill='currentColor' d='M32 464C32 490.5 53.5 512 80 512h288c26.5 0 48-21.5 48-48V128H32V464zM304 208C304 199.1 311.1 192 320 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM208 208C208 199.1 215.1 192 224 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM112 208C112 199.1 119.1 192 128 192s16 7.125 16 16v224C144 440.9 136.9 448 128 448s-16-7.125-16-16V208zM432 32H320l-11.58-23.16c-2.709-5.42-8.25-8.844-14.31-8.844H153.9c-6.061 0-11.6 3.424-14.31 8.844L128 32H16c-8.836 0-16 7.162-16 16V80c0 8.836 7.164 16 16 16h416c8.838 0 16-7.164 16-16V48C448 39.16 440.8 32 432 32z' /> </svg> </button>

You might have spotted the deleteCountry function above. We pass the country id to this function.

So let's go ahead and create the function.

Deleting records from Supabase

This delete country function is super easy, as we can leverage our Supabase setup and simply execute a delete query.

const deleteCountry = async (countryId) => { try { await supabase.from('countries').delete().eq('id', countryId); setCountries(countries.filter((country) => country.id != countryId)); } catch (error) { console.log('error', error); } };

Here you can see the delete query is as simple as calling the delete() method on a row that equals this id.

Then we filter the country from the existing list of countries we are showing to the user.

And all this will result in the following action:

Deleting records from a Supabase database

I hope you enjoyed this article. I've uploaded everything to GitHub if you wish to look at your own pace.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Deleting records from a Supabase database

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Rendering a delete button

Deleting records from Supabase

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Rendering a delete button

Deleting records from Supabase

Thank you for reading, and let's connect!