Retrieving Data

This page guides on how to retrieve data from your Supabase Database. Here's what we'll cover:

Prerequisites

Before you start, ensure you have completed the Supabase Setup and have some data in a table.

Querying a Supabase table

You can display the table data by adding the Supabase Query. This will return the list of rows, which you can display using scrollable widgets such as ListView, GridView, Column, Row, and StaggeredView.

Let's take an example of an AssignmentTracker app and display all assignments added by a student. Each row in a table represents an assignment item.

Here's how it might look:

Querying a Supabase table and displaying its data in UI comprises of the following steps:

  1. Build a page (skip if you already have it)

1. Build a page

The page shows the list of all assignments with their Title and Description. To build such a simple UI, you can use the ListView with ListTile widget inside your page.

Here's how it looks with the widget tree:

2. Querying a Supabase table on a ListView

To query a Supabase table on a ListView:

  1. Select the ListView widget. Make sure you choose the ListView widget, not the ListTile.

  2. Select Backend Query from the properties panel (the right menu), and click Add Query.

  3. Set the Query Type to Supabase Query.

  4. Select your Table from the dropdown list

  5. Set the Query Type to List of Rows.

  6. Optional: If you want to display the limited result, say, for example, you have thousands of entries, but you want to display only 100, you can specify the limit.

  7. Click Confirm.

3. Showing data in UI elements

See how to show the actual data value in a ListTile.

Filtering table data

Sometimes you might want to filter a list based on a condition. For example, showing only completed assignments. You can do so by adding the Filter while you query a supabase table.

Let's see how to filter the Supabase table to display only desired items:

  1. Query a table as per the instructions here. Skip if you have already done so.

  2. Scroll down and click on the + Add Filter button at the bottom.

  3. Find the Field Name, click on the Unset, and select a column on which you would like to apply the filter.

  4. Find the Relation dropdown, click on the Unset, and choose the relation amongst the list.

  5. Find the Value property and set it to an appropriate value.

  6. Click Confirm.

You could choose a Filter relation based on your requirements. For example, to show only completed assignments, set the Field Name to the column that holds completed status, e.g., is_done, set the Relation to Equal To, and set the Value to True. Here's another example. For showing only users older than 30, create a column called Age, set the Relation to Greater Than, and set the Value to 30.

Ordering table data

You might want to show a list from the Supabase table in a specific order. For example, showing assignments in order of the due date.

To specify the order:

  1. Query a table as per the instructions here. Skip if you have already done so.

  2. Scroll down and click on the + Add Order button at the bottom.

  3. Set the Table Field Name to the column you would like to choose for ordering.

  4. Find Order dropdown, click on the Unset and choose the order either Increasing or Decreasing.

  5. Click Confirm.

You could choose the order based on your requirements. For example, to show assignments in order of due date, set Table Field Name to due_date and Order to Increasing.

Querying a single row

While designing a relational database, you might add a foreign key that establishes a link between the data in two tables. It is a field in one table that uniquely identifies a row of data in another table.

For example, in our AssignmentTracker app, you could have two tables, "assignments" and "users". The foreign key in the "assignments" table (e.g., created_by) would be the users' ID, which is the primary key in the "users" table. This creates a relationship between the two tables so that you can easily find all the assignments added by a particular student by looking up their ID in the "users" table.

Now, you might run into a situation where you need to display the assignment details and the student details (who created it) on the same page. Just like this (see the visual below):

To do so, on the assignment details page, you can add a Supabase query on the users' table with Query Type to set to Single Row and add a filter that matches the user's id (of users table) with the created_by ID of the assignment.

Here's exactly how you do it:

Retrieving Array fields

In your database, you might have a column that stores multiple values of the same data type. For example, a column named "books" stores the list of book names that students should carry while doing an assignment.

The "books" column with Data Type text and defined as Array looks like this:

Let's see an example of showing the assignment details with a list of all books.

Retrieving the array field includes the following steps:

  1. Creating a page with a scrollable view (Row/Column/ListView/GridView)

1. Creating a page with a scrollable view (Row/Column/ListView/GridView)

As an example, let's add a Column widget with a Text widget inside the page. Here's how it looks with the widget tree:

2. Generating dynamic children

Generating dynamic children helps you prepare a list of items present in the array field. The returned result is stored in a variable and can later be used to populate any scrollable view.

To generate dynamic children:

  1. Select Column and click the Generate Dynamic Children tab (on the right side of your screen).

  2. Enter the appropriate Variable Name.

  3. Set the Source value to your table name.

  4. Set the Supabase Row Fields to the field that is defined as an array.

  5. Click Confirm.

3. Showing data in UI elements

To show item name from dynamic children variable in a Text widget:

  1. Select the widget (e.g., Text), navigate to the properties panel, move to a property for which you want to show data, and click Set from Variable.

  2. Now select the [variable_name] item from the list. This should be the variable name you specified while Generating Children from Variable.

  3. If you see Confirm button, click on it.


Last Updated Date: January 3, 2024

Last updated