Skip to content

Commit 90d2010

Browse files
PoojaB26PoojaB26
committed
Add Create and Test Api Call docs
1 parent 3fcd4b4 commit 90d2010

File tree

2 files changed

+170
-1
lines changed

2 files changed

+170
-1
lines changed

‎docs/resources/control-flow/backend-logic/api/create-test-api-calls.md

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
title: Create & Test API Calls
3+
slug: create-test-api
4+
tag: [API Calls]
5+
keywords: [API Calls, FlutterFlow]
6+
sidebar_position: 2
7+
---
8+
9+
# Create & Test API Call
10+
11+
On this page, you will learn how to [create](#creating-api-calls) and [test](#testing-api-calls) the API call.
12+
13+
## Creating API calls
14+
15+
To use an API in your app, first, you have to create the API Call.
16+
17+
Follow the steps below to create an API Call:
18+
19+
1. Select **API Calls** from the left [Navigation Menu](../../../../intro/ff-ui/builder.md#navigation-menu).
20+
2. Click on the **+ Add** button and select **Create API Call**.
21+
3. Enter the **API Call Name**.
22+
4. Select the **Method Type**: *GET, POST, DELETE, PUT, or PATCH*.
23+
5. Enter the **API URL** of the service you want to access.
24+
25+
:::note
26+
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:
27+
28+
1. Replace the hard-coded value with a meaningful name inside the brackets (e.g., from `https://reqres.in/api/users/2`to `https://reqres.in/api/users/[user_id]`).
29+
2. And then, [create a new variable](rest-api.md#creating-variables) with the same name you provided inside the brackets.
30+
:::
31+
32+
The further instructions are based on the **Method Type** you selected.
33+
34+
### For `GET` & `DELETE` call
35+
36+
If you selected `**GET**`or `**DELETE**` as the method type, follow the steps below:
37+
38+
1. Optional: If the API call requires request headers such as an authorization token, [add a header](rest-api.md#passing-request-headers).
39+
2. Optional: If the API call requires query parameters such as page number or user id, [add query parameters](rest-api.md#passing-query-parameters).
40+
3. Click **Add Call** to save the API Call.
41+
42+
:::warning
43+
After making any changes, you must save the API call.
44+
:::
45+
46+
<div class="video-container"><iframe src="https://www.loom.
47+
com/embed/ec61a02366504d12a3200426d4738c54?sid=3f41c946-6e53-4e0b-97e2-878178e546bd" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
48+
49+
<p></p>
50+
51+
52+
In the above demo, a `GET` API call is defined to fetch users' data from [REQ | RES](https://reqres.in/) (which provides hosted REST API to try out HTTP requests).
53+
54+
A demo of using a dynamic URL in a GET request is as follows:
55+
56+
<div class="video-container"><iframe src="https://www.loom.
57+
com/embed/e19f05e3fc6542b78c2871bff1997033?sid=d688dbb6-dc4d-4dc1-bb3f-438069b5f6cb" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
58+
59+
<p></p>
60+
61+
To add such an API call:
62+
63+
1. Replace the hard-coded value with a meaningful name inside the brackets (e.g., from `https://reqres.in/api/users/2`to `https://reqres.in/api/users/[user_id]`).
64+
2. And then, [create a new variable](rest-api.md#creating-variables) with the same name you provided inside the brackets.
65+
66+
The DELETE API Call can also be defined similarly; just make sure you select the **Method Type** as ***DELETE***.
67+
68+
### For `POST`, `PUT` & `PATCH` call
69+
70+
If you have selected **POST request**, follow the steps below:
71+
72+
1. Optional: If the API call requires request headers such as an authorization token, [add a header](rest-api.md#passing-request-headers).
73+
2. [Create a request body](rest-api.md#creating-request-body) for the API call.
74+
3. Click **Add Call** to save the API Call.
75+
76+
:::warning
77+
After making any changes, you must save the API call.
78+
:::
79+
80+
<div class="video-container"><iframe src="https://www.loom.
81+
com/embed/4d421b9a216d4655aed57fb63a963dc3?sid=1a86b3dd-4f06-43e8-a771-3e35a6fb2308" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
82+
83+
<p></p>
84+
85+
In this demo, a POST API call is defined with two variables, `userName` and `userJob`. The variables are used inside the JSON request body.
86+
87+
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.
88+
89+
## Grouping API calls
90+
91+
You can create a group of API calls that share 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.
92+
93+
:::warning
94+
For [**private APIs**](rest-api.md#making-an-api-call-private), headers defined within the group will not be automatically included. You'll need to manually add headers for APIs marked as private.
95+
:::
96+
97+
To create the API Group:
98+
99+
1. Click on the **+** button (top left side) and select the **Create API Group**.
100+
2. Enter the **API Group Name**.
101+
3. 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.
102+
4. You can add request headers by clicking on the **+ Add Header** button. See detailed instructions on how to [add headers](rest-api.md#headers).
103+
5. Click **Add Group**. This will display the group on the left side.
104+
6. Open the newly created API group, and click on the **+ Add API Call**.
105+
7. Add the API call as you would normally do. **Note**: Inside the API endpoint, enter the URL portion that starts after the base URL.
106+
107+
<div class="video-container"><iframe src="https://www.loom.
108+
com/embed/081572e9e1a94d1ea83bee59f87a5125?sid=6ddb47aa-0054-47e8-8a5b-4bc03c8fb0c0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
109+
110+
<p></p>
111+
112+
## Import API definitions
113+
114+
We allow you to add multiple API call definitions by importing them directly from the [Swagger/OpenAPI](https://swagger.io/) in bulk. With just a simple click, you can add a large number of APIs, significantly reducing the time and effort needed to create them manually.
115+
116+
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.
117+
118+
:::info
119+
We also add all settings that are required to run the API, such as [headers](rest-api.md#headers), [query parameters](rest-api.md#query-parameters), [variables](rest-api.md#variables), and body as they are defined in the Swagger file. However, you might need to replace the hard-coded values in [Body](rest-api.md#body) text with the [variables](rest-api.md#variables).
120+
:::
121+
122+
To import API call definitions:
123+
124+
1. Click the **Import OpenAPI** icon. This will open a new popup.
125+
2. Click **Upload File**. Here you can upload your swagger file available in `.yml` or `.json` file format.
126+
3. After the import is successful, you will see the list of all APIs created and added as a [group](#grouping-api-calls).
127+
128+
Here's an example of importing API calls in bulk, taken from [here](https://editor.swagger.io/).
129+
130+
<div class="video-container"><iframe src="https://www.loom.
131+
com/embed/074601859ba4430e97047dcdc60eabf6?sid=0446b026-eb75-4a3d-bb51-543668a06bfe" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
132+
<p></p>
133+
134+
## Testing API calls
135+
136+
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.
137+
138+
To test the API call along with its response, follow the steps below:
139+
140+
1. Select an API call you have already created or are currently defining, and go to the **Response & Test** tab.
141+
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.
142+
3. On the right, the **Preview** section lets you check the API URL, request headers, request body, and response. In the **Test Response** tab, you can view the full API response, including both the JSON format and raw body text, as well as the response header.
143+
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 `200`), the result returned from that request will also be displayed below.
144+
5. Any value of the JSON result can be accessed by [defining the JSON path](rest-api.md#json-path).
145+
146+
<div class="video-container"><iframe src="https://www.loom.
147+
com/embed/7b84e0e372924547b4779bfae3c4daeb?sid=22f42516-d522-4362-9ae4-b4aac4947fc7" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
148+
149+
<p></p>
150+
151+
152+
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`.
153+
154+
:::info
155+
The testing of `PUT` and `PATCH` requests would also be similar to this.
156+
:::
157+
158+
<div class="video-container"><iframe src="https://www.loom.
159+
com/embed/4cd816e67a044604b80fb83748312a03?sid=e4ffd651-f97c-4478-94a4-e81f0931ef08" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
160+
161+
<p></p>
162+
163+
## Trigger API calls
164+
165+
There are two methods to trigger an API call in your app:
166+
167+
* Add an **Action** to trigger the API Call based upon a user gesture.
168+
* Add the API Call as a **Backend Query** that gets triggered automatically when the page or widget is loaded on the screen.
169+

‎docs/resources/control-flow/backend-logic/api/streaming-api.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /resources/backend-logic/streaming-api
33
title: Streaming APIs
44
description: Learn how to use streaming APIs in your backend logic with FlutterFlow.
55
tags: [Streaming APIs, Backend Logic, Control Flow, FlutterFlow]
6-
sidebar_position: 2
6+
sidebar_position: 3
77
keywords: [Streaming APIs, Backend Logic, Control Flow, FlutterFlow]
88
---
99

0 commit comments

Comments
 (0)