A database's setup and operation can be challenging and time-consuming. Today, there are several choices available for "quick" fixes. One of those possibilities is Supabase, which is gradually gaining popularity. Let's have a look at what Supabase has to offer. Learn how to add, read, update, and delete data from a database by following along with an example of how to put one up for a reading list app.
Why Use Supabase?
Supabase brings to the table some really powerful features that immediately stand out when you start to build with it.
Data access patterns
The absence of querying capabilities in some of the tools and frameworks we've previously utilized is one of their major drawbacks. We particularly enjoy Supabase's ability to allow a very extensive set of performant querying capabilities out of the box without the need to develop any extra back-end code because it is built on top of Postgres.
Relational data is simple to configure and query since the database is SQL, and the client libraries consider it to be first-class citizens.
Open Source
The fact that it is entirely open-source is one of its greatest advantages. This indicates that you have a choice between hosting it yourself or using the Serverless technique.
If you have a basic grasp of how databases operate, you'll find it simpler to follow this tutorial. Here's the quick step-by-step guide below:
- The first thing you'll need to do is sign up on Supabase. It asks you to sign up for GitHub, so if you don't have an account, you should also sign up for one of those.
- Here's a quick and simple run-down on how you can start your journey with Supabase:
- Sign up for a free account on the Supabase website.
- Create a new project by clicking on the "Create Project" button on the dashboard.
- Choose a name for your project and select the "Create" button.
- Set up your database by clicking on the "Add Table" button. You can either import a CSV file or create a table manually.
- Once your table is set up, you can start adding data by clicking on the "Add Data" button.
- To access your data, you can use the Supabase API. You can find the API endpoint on the "API" tab of your project.
- You can also use the Supabase CLI to interact with your data. You can find instructions on how to install the CLI on the Supabase website.
- Use the CLI to interact with your data using SQL commands.
- To access the data using the API, you need to make a request to the API endpoint using your API key, which you can find on the "API" tab of your project.
- To start building your application, you can use the Supabase client library, which is available for multiple programming languages, such as JavaScript, Go, and Python.
Finally, you can use the Supabase UI to view your data and manage your project. And that's the quick view on how to set up your Supabase.
Setup
Your first step will be to register on Supabase. If you don't already have an account, create one because it prompts you to join up with GitHub.
Once you have logged in, pick the default organization that was created when you checked in by clicking the green "New Project" button. For example, you can name it "yourproject.org". This will then display a box where we may enter some project-related information. Choose the closest area, give it the name reading list, and then choose a secure password.
Select "Create new project" from the menu. The project won't be ready for a few minutes, so wait till that is done.
Now that everything is set up, you should see a page with the name of the project you provided, "Welcome to your new project," and a few features below that.
Auth: The Supabase Auth service makes managing your users and setting up authentication for your app rather simple.
Storage: For bigger items like photographs or music files, Supabase provides a storage facility.
You can add and change your database tables by going to a blank dashboard by clicking the "Table editor" button on the "Database" card. Give it a name like "food" and click the "+ New table" button on the left. Enabling Row Level Security (RLS) should not be checked for the time being, since this table will require additional columns in addition to the "id" column. They are mentioned below.
Initializing the Database
The "Table editor" button on the "Database" card should be clicked to open a blank dashboard where we may add and modify our database tables. Give the table the name recipes by clicking the Add New table button on the left. Enabling Row Level Security (RLS) should not be checked for the time being, since this table will require additional columns in addition to the "id" column. They are mentioned below.
- Column Name: title, Type: varchar
- Column Name: author, Type: varchar
- Column Name: finished Type: bool
A 'created at' column may already be present in the table by default. You can take that one out because we won't need it.
You now have a table in your database after saving that. It ought to be visible at this point. Let's now enter some information. Select "Insert Row" from the menu, then enter a few of your favorite recipes in the fields provided. Keep in mind that you may only input the kind of data you chose for the columns in the table configuration. For instance, since the "finished" column only allows booleans, we were unable to store a string there.
Querying the Database
Now that the data has been added, we can examine how to make API queries to the system in order to read the data.
There is a link to the API documentation in the left-hand navigation. This allows us to connect with our database in our code and is automatically produced for us by Supabase. Right now, we want to make sure that our "recipes" table can provide us with the information we need. "Tables and Views" is a submenu item on the left-hand menu. A recipe table can be chosen. Select the "Bash" tab at the top of the right-hand column above the code output because we haven't yet set up a JavaScript app. This will demonstrate the fundamental structure of a request.
Reading data
You may find the curl request to retrieve the data from our database by scrolling down to the "READ ALL ROWS" section.
You can put this info into an app like Postman, or you can copy this code and put it directly into your terminal to get the results. Note that the SUPABASE_KEY in the above code is just a placeholder for your own key. To get your API keys to populate into the example requests, there is a dropdown labeled "Key" up at the top of the screen. Select anon key.
Inserting data via the API
Now we can send the request and the results will show the contents of our recipes table. But what if we want to add or update data using the API? Inside the API page of the Supabase app there are examples of all these types of requests. Let's try to insert data. I'll find the "Insert Rows" section of the API documentation and create a new request in Postman with the required fields.
The request with the new headers you'll need should look something like this.
This request requires a body of data to be sent to the API endpoint. Add some raw JSON data to the body tab of the request like this:
When we send this, if it is successful, it will return with the item we just inserted.
Updating data
A lot of times we have data in the app that needs to be changed/updated. In the API documentation, this will be found under the "Update rows" section. This request is shaped a lot like the Insert request we did above. The first difference is that this is a PATCH request instead of a POST request. (Note that we use a PATCH to update instead of a PUT because PATCH allows us to update only specific fields, while PUT requires us to send the entire object with the request. We could have used PUT in this case, but PATCH makes it more flexible in the future. See this link for more details on the differences). The second difference is in the URL. At the end of the URL, there is a parameter. In the example from the API documentation, they have it shown as ?some_column=eq.someValue. This is where we tell the database which row we want to be updated. So in our case, we can put ?id=eq.2 to update the book with the ID of 2.
Deleting data
We also need to be able to delete data from our tables. Like before, look at the example request on the API documentation page. It is similar to the Update request above. There aren't as many headers needed though and we don't pass any data. We need to specify which row through using a parameter again and make sure you change the type of request to a DELETE request. Let's delete the same book we just updated.
When you navigate back to the Tables page of the Supabase UI, you should only see the first book you created.
Conclusion
Now you know the basics of how to set up and use a Supabase Database. This tutorial just scratched the surface of Supabase, but it should give you a solid start.
