Introduction

State management in Supabase

State management is closely related to the way you manage API layer. In this guide, we will analyze how the state is managed in Supabase.

The way we approach is we pick a route in the Supabase studio and then find the page responsible for that route (Supabase at the time of writing this article uses Page Router). We have to take a closer look at actions such as:

1. /dashboard/projects

In this route, we are interested in finding out how the projects and organzations are rendered. Once the data is fetched, is there any state set based on this API response? or is there any other way API response is handled?

These actions are specific to Supabase, these actions vary based on an application. In cal.com, to understand how how state is managed, you would look at operations such as bookings list, event-types etc.,

2. Create a project

In this action, we analyse how the state is managed when you add a new project in Supabase dashboard.

[Insert a screenshot of Create project page]

3. Create a table

In this action, we analyse how the state is managed when you add a new table. When you click on new table inside a table editor, you will see a dialog positioned to the right of the screen.

[Insert a screenshot of this create table dialog.]

We provide an explanation as to what happens when you click on "Save" by reviewing the code. It would be interesting to find out how the list of tables gets refreshed after you create a table.