The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

What is Supabase?

Supabase is a complete backend service that provides to Postgres database, authentication, instant RESTful APIs, and real-time subscriptions. It allows organizing data in a table format with the flexibility of running SQL queries.

Connect Supabase to Draftbit

If you do not have a Supabase account, create one here. The initial step to create a new database are:

  • After logging in, you will be welcomed by the All Projects screen.
  • Click New Project to create a new database.
  • Choose an organization from the modal, enter the project's name, password of the Project, select a region to host it, and then click the Next button.

After initializing a project in Supabase, you get the option to create a new table. We are using a custom data table for this documentation in a database called Books with custom data fields and values.

To utilize the data from the Supabase, let's use the REST API service it gives access to. Supabase generates an OpenAPI spec for every table in your database. To connect the API in the Draftbit app, the following fields are required:

  • Base URL of the REST API, which is in the format: https://<your-domain>.supabase.co/rest/v1 where the <your-domain is a unique domain name generated by Supabase.
  • The SUPABASE_KEY is the secret key.

You can find these unique values in the API section.

  • Click the API button from the left menu-bar.
  • Browse to the section that says Table and Views > table-name.
  • From the right specs panel, if you switch to the tab that says Bash, you will find the Base URL, the SUPABASE_KEY, and information about which headers to pass for a specific HTTP request when sending from the Draftbit app.
  • To view the SUPABASE_KEY switch the Key mode from Hide to anon.

Setup steps in Draftbit

Start by adding Authorization and apikey headers to the Draftbit app as Global Variables:

  • Open the Settings tab on left-navbar.
  • In the Project Settings, navigate to Global Variables.
  • Enter a key to access the Authorization header and the value for it.
  • The Authorization header value requires you to enter a Bearer token. The syntax is Bearer <SUPABASE_KEY>.
  • Enter another key to access the apikey header and the value for it.
  • The apikey header value requires you to enter the Supabase key. The syntax is <SUPABASE_KEY>.
  • In place of <SUPABASE_KEY> paste your own (from the previous section) and then click Add.
  • Click Save.

To add the Supabase API Base URL to your Draftbit app:

  • Open the Data tab on left-navbar.
  • From the Add a service menu, click on Rest API.
  • Enter a name for your REST API service.
  • Paste your Base URL (from the previous section) into the Base URL input field.
  • Click the + from the Headers section to add a new Header.
  • Type Authorization for the key.
  • Select the Global Variable for Authorization (from the last step).
  • Type apikey for the key of another header.
  • Select the Global Variable for apikey (from the last step) as its value.
  • Click Save.

Available Supabase recipes for Draftbit

Fetch all data from Supabase REST API into a List in Draftbit

In a blank screen in Draftbit, add a nested Fetch component, List component, View component, and a Text component so that your Layer Tree looks like this:

Inside of the View component, you can place as many Text you would like to be rendered for each column in a row in your data set. The next step is to create an endpoint. Let's try fetching the data using the GET request:

  • Click Create new endpoint.
  • Enter a name for this endpoint.
  • Add the /{{tableName}} ?select=*` in Add Path & Params to fetch all rows from the data table.
  • Click the Test button next to the Endpoint input to make sure you've successfully connected to your Supabase API.
  • Once everything looks right, click Save to close the modal.
  • Select the Fetch component in the Layer Tree and select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Here is also a Preview mode is shown on how the data is fetched from the service API.
  • Select the List component in the Layer Tree.
  • Change its Mapped Value to <API-name/Endpoint> under the Data Tab from the Properties panel on the right side.
  • The API-name is the custom service name given by you in the previous section. The Endpoint is the name of the API endpoint that was set up previously.
  • Now, you can configure a mapped field value on each Text component from the Data tab from the Properties panel.
  • Add the {{varName}} as the variable name to map values in the Input Text section. This dynamic variable requires the actual value field from the API endpoint. In the Variables section, from the drop-down menu, select fieldValue (list item).

Fetch single column field into a Draftbit app

In a blank screen in Draftbit, add a nested Fetch component, View component, and a Text component so that your Layer Tree looks like this:

To fetch a single row from Supabase, you'll have to specify the id of the row and then select all columns in that row.

  • Enter a name for this endpoint.
  • Add the /{{tableName}}?select=*&id=eq.{{id}} in Add Path & Params to fetch a single row.
  • Add a Test value for the {{ID}}.
  • Click the Test button next to the Endpoint input to make sure you've successfully connected to your Supabase API.
  • Once everything looks right, click Save to close the modal.
  • Select the Fetch component in the Layer Tree and select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Now, you can configure a Mapped Value on each Text component from the Data tab in the Properties panel.
  • Add the {{varName}} as the variable name to map values in the Input Text section. This dynamic variable requires the actual value field from the API endpoint. In the Variables section, from the drop-down menu, select Endpoint name/varName.

Here is how the Data tab for the Text component will look like:

Add new data from a Draftbit app

You need to use a component that:

  • accepts user input and
  • has a Field Name prop to POST data using Supabase API.

Examples of these include:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Supabase service.

In the new endpoint, you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to POST using the drop-down.
  • Add the /{{tableName}} in Add Path & Params to fetch all rows from the data table.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the fields you have in your data table.
  • The value of the field will be the value of the {{variable}} prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{variable}}. The information regarding this is also given in the Body tab.
  • In the Body tab, you can provide a Test Value for {{variable}}. A Test value is a temporary value that can be used for variables during development.
  • To create a new row using POST request, you have to pass a new header called Prefer with its value as return=representation in the Headers tab. Go to the Headers tab to add this header type. On success, this header returns the object of the new data in JSON.
  • In the Body Preview tab, you verify that the Body Structure has a valid structure.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Below is a general breakdown of what the request will look like. You're about to add multiple fields to a request, make sure you include a comma after each field ,:

{
"title": {{title}},
"rating": {{rating}}
}

You can add the POST endpoint to submit the data entered in Draftbit using the TextInput component to enter the value and Touchable or Button component to send the request to the API.

  • On the Touchable component, go to the Interactions tab (the last tab).
  • Click the + to open a drop-down menu in the Action tab and select the option Submit Data.
  • Setup the Submit Data by selecting the Service and the Endpoint.
  • Then add the configuration for body request to be sent by selecting the values for {{firstInputField}} and {{secondInputField}} (depending on how many fields you are updating).

Update data from Draftbit

The PATCH request is used to update one or many entities in a row by matching a specific field. It accepts similar input components as mentioned in the POST request, and the request is triggered using a Touchable component.

You'll need to create a new endpoint in your Supabase API service to update a value. In the new endpoint, you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to PUT using the drop-down.
  • Add the /{{tableName}}?columnName=eq.{{existingValue}} in Add Path & Params to fetch all rows from the data table.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the fields you have in your data table.
  • The value of the field will be the value of the {{variable}} prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{variable}}. The information regarding this is also given in the Body tab.
  • In the Body tab, you can provide a Test Value for {{variable}}. A Test value is a temporary value that can be used for variables during development.
  • To update an existing field value using PATCH request, you have to pass a new header called Prefer with its value as return=representation in the Headers tab. Go to the Headers tab to add this header type. On success, this header returns the object of the updated data in JSON.
  • In the Body Preview tab, verify that the Body Structure has a valid structure.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Below is a general breakdown of what the request will look like. You're about to add multiple fields to a request, make sure you include a comma after each field ,:

{
"title": {{newTitleValue}}
}

You can add the PATCH endpoint to submit the data entered in Draftbit using the TextInput component to enter the value and Touchable or Button component to send the request to the API.

Delete data from Draftbit

The DELETE request is send to the Supabase API with a row's ID to remove that particular record from the table.

You'll need to create a new endpoint in your Supabase API service. In the new endpoint, you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to DELETE using the drop-down.
  • Add the /{{tableName}}?columnName=eq.{{ID}} of the entity to delete in the Add Path & Params input.
  • Add a Test Value for the ID to test the Endpoint.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

You can add the DELETE endpoint to submit the data entered in the Draftbit using a Touchable or Button component to send the request to the API.

Fetch records by using filters in a Draftbit app

The Supabase REST API allows you to fetch data by using a wide range of filters. These are optional parameters to use but could depend on the way you want to fetch the data for a particular section on the screen.

Each filter has a key and a value. An example of a filter key is to fetch rows from the Supabase database that are less than or equal to a certain value or lte.

Here is the general syntax to filter rows:

/<table-name>?<column-name>=lte.{{var}}&select=*

Where:

  • <table-name> is the name of the data table.
  • <column-name> is the name of the column and provides a base to filter values fetched from the database.
  • lte is the one of many filters.
  • {{var}} is the custom value to filter.

Here is an example of endpoint where the data is fetched on basis of a certain value being lte (less than or equal to) for a column.

To learn more about what filters are available with Supabase, please refer to their official documentation here.

Updated about a month ago


Supabase


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.