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

Depending on the type of screen you are building, if the data contains a list of items, then the Fetch wraps the List component.

The Fetch component can also be used in screens where data is being fetched for a single item view to display the details of a list item.

Data-Enabled Components

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 components has to be a child of the Fetch component in the Components tree.

🚧

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 an endpoint to Fetch a list of items

For an example, consider the REST API endpoint below.

https://api.airtable.com/v0/appkLwyequqaR6EWY/todolist

It returns the following list of items:

{
    "records": [
        {
            "id": "rec1VCM4FYcnc0NDz",
            "fields": {
                "item": "Notebook"
            },
            "createdTime": "2021-11-12T07:44:52.000Z"
        },
        {
            "id": "recBusEqFIfm3JzKY",
            "fields": {
                "item": "Apples"
            },
            "createdTime": "2021-11-12T07:44:52.000Z"
        },
        {
            "id": "recz5WRdCMYyedKPt",
            "fields": {
                "item": "Bananas"
            },
            "createdTime": "2021-11-12T07:44:52.000Z"
        }
    ],
}

Once you've created a Service in the API & Cloud services modal, you'll be prompted to add a new endpoint.

Let's consider the above endpoint example to fetch a list of items from an Airtable base. You will add a new endpoint to fetch data using a GET HTTP method by following these steps:

• Click Add endpoint.
• In Step 1: enter the Name for the endpoint. Make sure the Method select is GET.
• Set the Role to Get Many since the endpoint is fetching a list of items, not just a single item. Set the Object Type to todos.
• In Step 2: add the base name path and/or any query parameters to the API's base URL. Currently, the endpoint has no query parameters or additional endpoint-specific paths.
• 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 adding a GET request endpoint:

Display a list of data with Fetch Component

After adding the endpoint to fetch a list of items, the next step is to display it on an app screen. The Fetch component is used to get data from a REST API service directly into your app using the HTTP GET request.

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. Under Preview, you can also verify that the data fetched from the endpoint is accurate.

The next step is to configure the List component nested inside the Fetch component to map the list of items.

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. Select the value from the dropdown for the Data property.

The next step is to display the list item name. Map the field of the item name to a Text component.

1. Select the data-enabled component (for example, in the Components tree below, 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 under Variables.

You can repeat these steps for any other data-enabled component such as Image Background, Image components, etc.

📘

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

Configure an endpoint to Fetch a single item

For an example, consider the endpoint below. It requires an id as the query parameter to fetch a record of a single item.

https://api.airtable.com/v0/appkLwyequqaR6EWY/todolist/{{id}}

When provided a value for id, it returns the following item record:

{
    "id": "rec1VCM4FYcnc0NDz",
    "fields": {
        "item": "Notebook"
    },
    "createdTime": "2021-11-12T07:44:52.000Z"
}

Let's consider the above endpoint example to fetch the single item record from an Airtable base. You will add a new endpoint to fetch data using a GET HTTP method by following these steps:

• Click Add endpoint.
• In Step 1: enter the Name for the endpoint. Make sure the Method select is GET.
• Set the Role to Get One since the endpoint is configured to get a single item. Set the Object Type to todos.
• In Step 2: add the base name path and/or any query parameters to the API's base URL. Currently, the endpoint uses a dynamic variable /{{id}} to fetch the record based on the value of the id provided.
• Provide an id of the existing record under Path Test Values.
• 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.

Display 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:

To populate the Components tree 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. Under Configuration, from the dropdown, select the Navigation Parameter (ideally, coming from a List screen) such as Navigation > id.
6. Under Preview, you can also verify that the data fetched from the endpoint is accurate.

📘

Navigation Parameters

Navigation Parameters are variables passed from one screen to another when navigating. Learn more on how to pass one under Configuring data to be passed in the Navigate action .

The next step is to display the list item name. Map the field of the item name a Text component.

1. Select the data-enabled component (for example, in the Components tree below, 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. In the example below, the item's id and name are displayed so there are two separate Text components, each with its own variable.
4. Then, map the value for {{variable}} from the dropdown under Variables.

Here is how the details of an item are displayed when Navigating from List to an item's Details screen:

Additional Resources

• Learn more about Role and Object Type when configuring an endpoint and why they are necessary for caching.