Fetch

How to use

Before you can use the Fetch component, you'll need to set up a REST API Service and Endpoint.

Once you have a Service and Endpoint configured, you can add a Fetch component to your Screen from the component picker. The Fetch component lets you select the Service and Endpoint, and pass data to any query parameters you specified.

After you've configured the Service and Endpoint on the Fetch component, the data returned in the response will be listed as Top-level response in any dropdowns on child components where variables can be selected.

You can access nested data by typing a keypath into the transform with input below the variable selector and also apply any of the available Transform Functions.

There's also several Triggers available on the Fetch component that allow you to take Actions based on different conditions and these Triggers will also have access to the Top-level response.

Data Properties

Name	Description
Service	Name of the REST API service you have created inside the Draftbit app.
Endpoint	Name of the API Endpoint to fetch data from
Query Params	Option available if the Endpoint has a query parameter attached to it. For example, `https://example-data.draftbit.com/books?_limit={{limitParam}}` has a query parameter called `limitParam`. On the Fetch component, you can define a custom value for this parameter.
Poll Interval	An optional number representing the milliseconds (ms) to wait between refetching data from the Endpoint. For example, if you set the value to `3000` ms, the Fetch component will automatically refetch the data every 3 seconds. Disabled by default.
Refetch On Window Focus	When set to true, the query will refetch on window focus if the data is stale. When set to false, the query will not refetch on window focus. When set to "always", the query will always refetch on window focus. Defaults to true.
Refetch On Mount	When set to true, the query will refetch on mount if the data is stale. When set to false, the query will not refetch on mount. When set to "always", the query will always refetch on mount. Defaults to true.
Refetch On Reconnect	When set to true, the query will refetch on reconnect if the data is stale. When set to false, the query will not refetch on reconnect. When set to "always", the query will always refetch on reconnect. Defaults to true.
Retry	When set to false, failed queries will not retry by default. When set to true, failed queries will retry infinitely. When set to a number, e.g. 3, failed queries will retry until the failed query count meets that number. Defaults to 3.
Stale Time	An optional time in milliseconds after which the data is considered stale. Defaults to 0
Timeout (ms)	An optional non-zero number in milliseconds to wait before firing the On Timeout Trigger

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Any Actions you setup on Fetch Triggers will also have access to Top-level response in variable dropdowns.

In addition, there is a fetchData variable available in Actions which contains the entire response object from the request. See below for an example.

Name	Description
On Data	Executes when data has been successfully loaded.
On Processing(1xx).	Executes when the response status is 1xx (informational response)
On Success (2xx).	Executes when the response status is 2xx (successful)
On Redirect (3xx).	Executes when the response status is 3xx (redirection)
On Request Error (4xx).	Executes when the response status is 3xx (client error)
On Unauthorized Request.	Executes when the response status is 401 (authentication error)
On Not Found (404).	Executes when the response status is 404 (missing resource)
On Server Error (5xx).	Executes when the response status is 5xx (server error)
On Timeout	Executes when the request exceeds to value set for Timeout (ms) Data property

fetchData in Actions

This is an example of what's returned by fetchData for Actions within Fetch Triggers.

{
  status: 200,
  statusText: "Ok",
  text: "...",
  json: [{...}]
}

Name	Description
status	Response status code
statusText	Response status text
text	Response body text
json	Response body JSON

📘
Learn how to set and use the Fetch and List component in Fetching Data.