Fetching Data

With the Fetch component, you're able to easily pull live data from a third-party REST API directly into your apps in Draftbit.

Here is a list of Data-Enabled components available in Draftbit that you can use to display dynamic data values coming from a REST API. In order to use them to display dynamic values, each of these component has to be a child of the Fetch component in the Components tree.

Data Enabled Components

Component

Data to be Passed

Text

String

Video

Video URL

Image

Image URL

Image Background

Image URL

Circle Image

Image URL

Audio Player

Audio URL

Web View

Website URL

Button Solid

String

Button Outline

String

Link

String

List

Array

Fetch

Array

Picker

Array

Text Input

Field Name prop as a String

Text Area

Field Name prop as a String

Text Field

Field Name prop as a String

Radio Button

Field Name prop as a String

Radio Button Group

Initial Value is one of the Field Name prop of a child Radio Button as a String

Switch

Field Name prop as a Boolean

Slider

Numerical values for both max and min props

Stepper

Number

Checkbox

Field Name prop as a Boolean

🚧

Note: There is no built-in validation for Image/Video URLS.

When configuring an Image, Image Background or a Video component, there’s no validation built-in to ensure you’re passing the URL to the component. If you find it not working, double check your data in the Preview section.

Configure the Endpoint

The Fetch component is used to get data from a REST API service directly into your app using the HTTP GET request. For an example, consider the REST API endpoint below. It contains a list of properties.

https://example-data.draftbit.com/properties?limit=30

Once you've created a Service in the Data modal, you'll be prompted to create a new endpoint. You can create a new endpoint that is used to fetch data using a GET request by following these steps:

  • Click Add endpoint.
  • In Step 1: enter the Name for the endpoint. Make sure the Method select is GET.
  • In Step 2: add the base name path and/or any query parameters to the API's Base URL. For example, in the example API endpoint https://example-data.draftbit.com/properties?limit=30, the query parameter starts with ? at the end of the URL. Anything after the question mark is a query parameter.
  • In Step 4: click the Test button next to the Endpoint input to verify the response coming from the API service.
  • The last step is to save the endpoint. Click the Save button.

Here is an example of a GET request endpoint:

Render a list of data with Fetch Component

Typically, when a Fetch component is used to display a list of data, the Components tree for a screen is generally structured as shown below:

To populate the list of components (as mentioned above) with the external data, a series of steps are required:

  1. Select the Fetch component from the Components tree.
  2. Navigate to the Fetch component’s Data tab (third tab on the right-hand side Properties Panel).
  3. Select the REST API service name from the Service dropdown.
  4. Select the endpoint from the Endpoint dropdown.
  5. If there is any query parameter defined at the end of the API endpoint, they will probably require a value. Under Configuration, you can pass a value for each query param.
  6. Under Preview, you can also verify that the data fetched from the endpoint is accurate.

To display the list of data using data-enabled enabled components, here are the following steps to follow:

  1. Select the List component in the Components tree.
  2. Navigate to the List component’s Data tab (third tab on the right-hand side Properties Panel).
  3. Make sure Top-Level response is selected from the Data property in the Data tab.
  1. Then, select the data enabled component (for example, in the above Components tree, Text is a data-enabled component).
  2. Go to the component’s Data Tab (third tab on the right-hand side Properties Panel).
  3. Add a {{variable}} in the Input Text.
  4. Then, map the value for {{variable}} from the dropdown menu under Variables.

You can repeat these steps for other components such as Image Background and other Text components.

📘

Each data-enabled component accepts a different input type. Please check the list Data-Enabled Components to learn more

Render single data object using Fetch Component

When a Fetch component is used to render a single data object, the Components tree for a screen is generally structured as shown below:

Other steps to configure the Fetch component to use a REST API endpoint and mapping the data variables on a component remain the same Render a list of data with Fetch Component.


Did this page help you?