Fetch component, you're able to easily pull live data from a RESTful API directly into your apps in Draftbit.
In this current iteration, you are only able to make
GET requests and data can only be passed down to
Image components. In the meantime, learn how to make
POST requests with an Airtable backend in this post.
If you don't have your own data but would like to try the feature, feel free to grab some sample data from JSON Placeholder. For this example, we'll use the
To get started, open the component drawer and add a
Fetch component to your screen. In the Config Panel, open up the Data panel at the top and click
+ Build Query. Add your endpoint in the
Request URL field then click
Test to view the results. Make sure to keep the data structure in mind so you can properly configure the components you want to pass data to. Once you're finished viewing the results, click
Save to return to the builder.
List component inside the
Fetch component and a
View inside of the
List. The Layer Tree should look like this:
Next, add a
Text component inside of the
View. In the preview, you’ll see a list of 10 lines of text automatically generated for each of the endpoint’s entries.
To pass the data to the
Text component, open the Data panel in the Config Panel and select what data you’d like to display in the Field dropdown. The
Text component will automatically update with the data from the field you've selected.
When configuring an Image component, there’s no validation built-in to ensure you’re passing an image URL to the component. If you find it not working, double check your data in the
Results section of the
+ Build Query modal.
If you've never used Airtable before and are interested in using it as a database, check out their documentation that will tell you everything you need to get started.
Once you’ve created a Base and entered your data, click the question mark in the top right corner and select
API Documentation in the dropdown.
On the API Page for your Base, scroll down to the Authentication section. In the top right, click the
show API Key checkbox so that your API Key populates the placeholder in the example URLs.
Once you’ve generated the API Key, go back to the builder, add the Fetch component to your screen and enter your Base’s URL and the API Key under the HTTP Headers. Preview the request to make sure everything is set up correctly.
Take note that all the entries in the Base are contained within an overarching
List component inside the Fetch component like before. While the
List is selected in the Layer Tree, go over to the Data section in the Config Panel and set its field to
records. Without doing this, the screen will error out.
As a general note, make sure to set the top level of data as the Field for
Next, add a
View inside the
List and then add the Text and/or Images you would like to display inside the View and configure them to your liking.