The API & Cloud Services button in the top-bar of the Builder is the central location for creating and managing APIs, Services, and Endpoints.
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.
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.
Use the configuration options below to set up your API.
|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|
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
To edit an API Service created previously, click the Edit Service as shown below:
To delete a Service, click the three dots ("...") next to the name of the Service and then click Delete.
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.
To add an endpoint, simply click the Add Endpoint button.
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.
|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 |
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
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|
In Basics, you will find the following options:
|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/signup) returns only an auth token, you do not need to set the
Object Typefor that endpoint.
In Object & Role, you will find the following options:
|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
In Paths & Parameters, you will find the following options:
|Append Base URL||Add a path or a query parameter to the Base URL.|
In the case of dynamic values, pass a
|Path Test Values||Provide a test/temporary value for |
This option is only available for dynamic values and hence requires one or many variables defined in the Append Base URL.
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:
In Headers, you will find the following options:
|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
Any endpoint that requires a specific Header to be passed can be added in here.
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.
After executing "Step 5: Test & Preview Response," you will see the data schema here.
Click on the name of the endpoint in the ENDPOINTS section to be taken to the configuration screen.
To delete an endpoint, click the three dots ("...") next to the name and click 'Delete'
Updated 3 months ago