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
Basics	Set the name of the Endpoint, select the HTTP request method
Object & Role	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 & Preview Response	To verify the response from the endpoint is accurate.
Data Schema	Display data schema structure as json format

Basics

In 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.

📘
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 the Role and Object Type for that endpoint.

Object & Role

In Object & Role, you will find the following options:

Configuration Option Description

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.

Configuration Option	Description
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`.

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.

Request Body

📘
The body section is only shown for POST/PUT/PATCH/DELETE methods.

In Request 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 & Preview Response

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

Of course, you can skip endpoint testing by pressing the "Skip" button. This will allow you to save your endpoint without testing it.

🚧
Using 'Skip' will let you use your endpoint but you will not be shown a list of available fields for data returned by this endpoint when using it in a component or action.

Data Schema

After executing "Step 5: Test & Preview Response," you will see the data schema here.

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.