Create & Test API Call
To use an API in your app, first, you have to create the API Call.
Follow the steps below to create an API Call:
- Click on the + button and select Create API Call.
- Enter the API Call Name.
- Select the Method Type: GET, POST, DELETE, PUT, or PATCH.
- Enter the API URL of the service you want to access.
NOTE: If you want to use a dynamic URL, for example, https://reqres.in/api/users/2 where 2 is dynamic and https://reqres.in/api/users?page=5 where 5 is dynamic:
- 1.Replace the hard-coded value with a meaningful name inside the brackets (e.g., from
https://reqres.in/api/users/2tohttps://reqres.in/api/users/[user_id]). - 2.
The further instructions are based on the Method Type you selected.
If you selected
GET or DELETE as the method type, follow the steps below:- 1.
- 2.(Optional) If the API call requires query parameters such as page number or user id, add query parameters.
- 3.Click Add Call to save the API Call.
After making any changes, you must save the API call to reflect the changes.
Defining GET request
In the above demo, a
GET API call is defined to fetch users' data from REQ | RES (which provides hosted REST API to try out HTTP requests).A demo of using a dynamic URL in a GET request is as follows:
Defining GET request for dynamic URL
To add such an API call:
- 1.Replace the hard-coded value with a meaningful name inside the brackets (e.g., from
https://reqres.in/api/users/2tohttps://reqres.in/api/users/[user_id]). - 2.
The DELETE API Call can also be defined similarly; just make sure you select the Method Type as DELETE.
If you have selected POST request, follow the steps below:
- 1.
- 2.
- 3.Click Add Call to save the API Call.
After making any changes, you must save the API call to reflect the changes.
Defining POST call
In this demo, a POST API call is defined with two variables,
userName and userJob. The variables are used inside the JSON request body.The PUT and PATCH API calls can be defined similarly; make sure you enter a valid API URL endpoint and select the correct Method Type.
You can create a group of API calls that shares the same base URL. Grouping the API calls helps you add all request headers (e.g., auth token) at once, and they will be automatically added for all the API calls inside the group.
To create the API Group:
- Click on the + button (top left side) and select the Create API Group.
- Enter the API Group Name.
- Enter the API Base URL. This should be the portion that is common in all the APIs. Note: Do not keep the '/' in the end.
- You can add request headers by clicking on the + Add Header button. See detailed instructions on how to add headers.
- Click Add Group. This will display the group on the left side.
- Open the newly created API group, and click on the + Add API Call.
- Add the API call as you would normally do. Note: Inside the API endpoint, enter the URL portion that starts after the base URL.
Grouping API calls
We allow you to add multiple API call definitions by importing them directly from the Swagger/OpenAPI in bulk. With just a simple click, you can add a large number of APIs, significantly reducing the time and effort needed to creatdefinitionse them manually.
Furthermore, the ability to import Swagger/OpenAPI definitions directly into FlutterFlow eliminates the risk of errors that may occur when creating API definitions manually, ensuring that applications are reliable and efficient.
We also add all settings that are required to run the API, such as headers, query parameters, variables, and body as they are defined in the Swagger file. However, you might need to replace the hard-coded values in Body text with the variables.
To import API call definitions:
- 1.Click the Import OpenAPI icon. This will open a new popup.
- 2.Click Upload File. Here you can upload your swagger file available in
.ymlor.jsonfile format. - 3.
Import API definitions
You should always test your API call before using it inside your app. We make it easy for you to try the API call inside our builder.
To test the API call along with its response, follow the steps below:
- 1.Select an API call you have already created or are currently defining, and go to the Response & Test tab.
- 2.On the left side, you will see the Variables section, where you can enter the values for the variables defined for your API call.
- 3.On the right side, you will see the Preview section, where you can verify the API URL, request headers, request body, and response.
- 4.Click Test API Call to trigger the API call. You'll notice that the status of the GET request is displayed, and if it's successful (status code of
200), the result returned from that request will also be displayed below. - 5.
Testing GET API call
The demo below shows the testing of creating a new user using a POST request. The API Call takes two variables:
userName and userJob. The successful POST request returns a status code of 201.The testing of
PUT and PATCH requests would also be similar to this.
Testing POST API call
There are two methods to trigger an API call in your app:
- Add an Action to trigger the API Call based upon a user gesture.
- Add the API Call as a Backend Query that gets triggered automatically when the page or widget is loaded on the screen.
You will find the steps for triggering API Calls using either of these two methods on the following pages:
Last modified 1mo ago