Setting up API Calls
On this page, you will learn the most basic knowledge on various concepts for adding an API call to your project. They are the building blocks of adding an API call. Depending on the API's definition, you may utilize some or all of these concepts to successfully implement the API call in your project.
They are:
1. Headers
Headers typically carry the metadata associated with an HTTP request or response of an API call. HTTP headers are mainly grouped into two categories:
Request headers contain more information about the resource to be fetched or the client requesting the resource.
Response headers hold additional information about the response that the server returns.
Passing request headers
Some of the common request headers that you might need while sending a request are:
Authorization: Used for authenticating the request.
Content-Type: Used while sending a POST/PUT/PATCH request containing a message body.
To pass the request header:
Select the Headers tab and click on the Add Header button.
Inside the input box, enter the key followed by its value (e.g., Content-Length: application/json).
The default Content-Type for any HTTP POST request is application/json, so if your data body is in JSON, you can skip defining the Content-Type.
Passing auth token (as request header)
You might need to add an API that is secured. That means it only gives results if you pass the authorization token (aka auth token) in the header parameter. This is usually done to prevent abuse. Let's see how you can add the auth token.
Passing static auth token
Some services provide you with a static auth token. Such a token never changes until you manually generate the new one.
To pass the static auth token:
Select the Headers tab and click on the Add Header button.
Inside the input box, enter the key such as Authorization followed by its value (e.g., Authorization: Bearer YOUR_TOKEN).
2. Query Parameters
They are optional parameters you can pass with an API call; they help format the response data returned by the server. Usually, they are concatenated at the end of the URL with a question mark (?) as the delimiter and are represented as key-value pairs.
An example of an URL with query parameters looks like this (NASA Open API):
https://api.nasa.gov/neo/rest/v1/feed?start_date=2015-09-07&end_date=2015-09-08&api_key=DEMO_KEY
Here, start_date, end_date, and api_key are the query parameters passed to receive the specific data.
Here's another example, this API call https://www.breakingbadapi.com/api/characters?limit=20&offset=0 has two query parameters. The limit parameter specifies 20 items to load per page, and the offset specifies the number of items to skip. This is called offset-based pagination.
3. Variables
Variables allow you to pass the dynamic values from any part of your app to the API calls. Here's when they come in handy:
Sending an auth token from your app's state to an API call's request header.
Using username and password from TextField widgets in the API call's request body.
Including selected dates as query parameters.
Changing the base URL with a dynamic URL.
Creating variables
To create variables, select the Variables tab, enter its Name, select the appropriate Type, define if it is present as a List by setting isList to true, and provide the Default Value if you wish to.
Now you can pass values to these variables while triggering the API call from your page. You can set its value from any widget, or any other source.
4. Body
You can send data (as a request body) while calling the API of methods POST, PUT, or PATCH by defining them inside Body. The most common type is JSON format which is the easiest way of passing data inside the body of the request.
Creating request body
Here you'll see creating a request body in the following formats:
1. JSON format
To create a request body in JSON format:
First, If you haven't already, create variables (e.g., username and password variables that will be required to pass values from a login page to the login API call).
Select the Body tab and set the Body dropdown to JSON.
Define your request body.
Last updated
