Subscribe

Deleting records from a Supabase database

โœ๏ธ

How to delete single records from a Supabase database in Next.js

7 Dec, 2021 ยท 2 min read

I'm sure you saw this article coming after we learned how to insert records in a Supabase database.

We accidentally added the wrong country that we want to remove...

How do we go about that?

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, 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 show to the user.

And all this will result in the following action:

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Next portfolio - Filter by category

30 Nov, 2022 ยท 5 min read

Next portfolio - Filter by category

A glance at Turbopack

17 Nov, 2022 ยท 3 min read

A glance at Turbopack

Join 1900 devs and subscribe to my newsletter