REST Services & Endpoints
The API & Cloud Services button in the top-bar of the Builder is the central location for creating and managing APIs, Services, and Endpoints.


Services
Under Add Your Custom API or Connect a Service (REST) is where you can add and store your own REST API service that is used throughout your app. Saving your API connection here allows you to easily re-use it throughout your app as opposed to reconfiguring requests on a screen-by-screen basis with the Fetch component.
When you open the API & Cloud Services modal from the top-bar menu, you're presented with the option to add a new API service.
Draftbit supports adding data via REST API.
Apart from adding a custom REST API service, Draftbit supports various services such as Airtable, Supabase, Xano, Backendless, etc. To view the complete list of supported services, please visit REST API Integrations page.
To request a specific integration, visit out Roadmap and create a new request or Upvote an existing request.
Adding a Service
To add a new service, click the API & Cloud Services from the top bar of the builder. Click REST API under the ADD YOUR CUSTOM API
header to add a REST API service.

Configuration
Use the configuration options below to set up your API.

Property | Description |
---|---|
Name | The name of the Service to be displayed in the menu. |
Base URL | Cannot end with / .Note that the additional URL paths and Query parameters for each API endpoint can be configured separately later when you are adding individual endpoints. |
Headers & Authentication | Accept: application/json and Content-Type: application/json are the default headers in each REST API configuration.You can also add API secrets or tokens via App Variables you've saved by clicking the '+' in the top right corner, giving the Header a name, and selecting your Global Variable from the dropdown. |
In the example below, the Airtable REST API service uses an Authorization header whose value is stored in the App Variables

Editing a Service
To edit an API Service created previously, click the Edit Service as shown below:

Deleting a Service
To delete a Service, click the three dots ("...") next to the name of the Service and then click Delete.

Endpoints
After you've created a new Service, you'll be prompted to add new Endpoints for your service. Configuring endpoints in this menu will allow you to easily reference and re-use endpoints throughout your app.

An API endpoint is the point of entry between an API and a server. The endpoint defines what information you're accessing from your API. For APIs, an endpoint can include a URL of a server or service. Each endpoint is the location from which APIs can access the resources they need to carry out their function.
Adding an endpoint
To add an endpoint, simply click the Add Endpoint button.

Configuration
A typical endpoint configuration will require a set of configurable options. Some of these options are optional depending on the endpoint. In Draftbit, it's a step-by-step process.

Property | Description |
---|---|
Endpoint Basics | Set the name of the Endpoint, select the HTTP request method, select a Role and define the Object Type. |
Path & Parameters | Define the path of the endpoint and/or add a query parameter for |
Body | Only available for POST , PUT or PATCH requests.Requires you to define a body structure in key-value pairs using valid JSON format for the request. To create a variable for data, use {{variable}} format as values for the keys defined in the Body Structure. This way, you can map these variables when sending an API request in a Draftbit app. |
Headers | Accept: application/json and Content-Type: application/json are the default headers in each REST API configuration.You can also add any App Variables you've saved by clicking the '+' in the top right corner, giving the Header a name, and selecting your Global Variable from the dropdown. Any Header defined by the API service will be automatically added here. |
Test | To verify the response from the endpoint is accurate. |
Endpoint Basics
In Endpoint Basics, you will find the following options:
Configuration Option | Description |
---|---|
Name | Add a name to the endpoint to identify it in the Draftbit builder interface. |
Method | Select an HTTP method to make the appropriate request depending on your API endpoint. Available HTTP methods: - GET (Read) - POST (Create) - PUT/PATCH (Update) - DELETE (Delete) These methods correspond to Create, Read, Update, & Delete operations. |
Role | Select a type of action that the endpoint you're adding to the service represents. This helps your Draftbit app to cache your app's data. There are five different roles available to select from: - Get One (used to fetch a single item or an item's details) - Get Many (used to fetch multiple items in a list) - Create (used to create a new record from a Draftbit app to the Database) - Update (used to update an existing record in the Database) - Delete (used to delete an existing record) |
Object Type | Define a string for the endpoint to be recognized when a particular set of data is being manipulated. This helps Draftbit to optimize caching for a similar type of data under the hood. An Object Type is a custom data type that an endpoint manipulates. For example, when you are building a to-do list application, the endpoints for fetching a list of to-do items and creating a new item can have the same Object Type, such as todos . |
If your API service's authentication endpoint (such as
/auth/login
or/auth/signup
) returns only an auth token, you do not need to set theRole
andObject Type
for that endpoint.

Paths & Parameters
In Paths & Parameters, you will find the following options:
Configuration Option | Description |
---|---|
Append Base URL | Add a path or a query parameter to the Base URL. In the case of dynamic values, pass a {{variable}} . For example, https://api.baseurl.com/{{id}} fetches data of a single item based on the value of {{id}} provided. |
Path Test Values | Provide a test/temporary value for {{variable}} defined in the Append Base URL.This option is only available for dynamic values and hence requires one or many variables defined in the Append Base URL. |

Body
In Body, you will have to define a request's Body Structure in a valid JSON format. An example can be seen below:

To validate the structure of the request's body, you can switch to the Body Preview tab:

Headers
In Headers, you will find the following options:
Configuration Option | Description |
---|---|
Header Key | The value for a particular header key is defined in this section. For example, if you are creating an endpoint that receives an authentication token, you add a header such as Authorization and select a Global Variable as its value from the dropdown.Any endpoint that requires a specific Header to be passed can be added in here. |

Test
In Test, you will find the preview of the response returned back from the endpoint when configured successfully.

Editing an endpoint
Click on the name of the endpoint in the ENDPOINTS section to be taken to the configuration screen.

Deleting an endpoint
To delete an endpoint, click the three dots ("...") next to the name and click 'Delete'

Additional Resources
- MDN Docs - Request.mode
- MDN Docs - Request Credentials
- Endpoint – What is an API Endpoint?
- Draftbit uses React Query under the hood to manage and cache API endpoints.
Updated 5 months ago