External API REST API Chaining Response of an API as Request in Another API
This video tutorial will guide you how to make an API call, store its response in the browser session and use this response to make another API call.
1. Create an External API
Begin by creating a collection in DrapCode and a similar one in Xano with the required fields. If you haven’t created your collection yet, Click Here
Then create an external API. To get data from any third-party integration like Xano, Airtable etc. you need to create an External API. External APIs are modules that are used to create a Rest API such as GET API, POST API, DELETE, etc. You may also use an existing API too. Give a name to your external API. You need to choose a call to create which is POST in this example. Then copy the URL from Xano's Swagger Documentation.
1.1 Request Data Mapping
Here you have to fetch the data from a collection and send it to Xano For this choose choose Send Collection Data and the Collection from the dropdown.
1.2 Map the Collection Data
To map the data from collection mention the data key that has the records in it, specify what is the key to uniquely identify the records for eg., ID and mention the JSON path for other fields.
Then choose Default JSON. You can copy the fields from the documentation here and replace the fields with their unqiue names as in the collection. Then click Save Settings to finish the process.
2. Create an Event
You need to create an event to updated the project to Xano or any third-party integration. Go to Events and choose Create Event. Name your event and click Create.
2.1 Configure the Event
In the event mention what it is supposed to do. Here in this case it you can choose the collection and ask it to save the data.
2.2 Add the Details
In the pop-up that opens select the collection you want to update the data. Then you can mention an alert message and how you want to save it (this is optional). Then choose Save to finish.
2.3 Send Data to External API
In the next event mention what it is supposed to do. Here in this case it you can choose the external API and ask it to send data to Xano, in this case.
2.4 Add the Details
In the pop-up that opens select the external API you created. Then you can mention an alert message or how you want to save it (optional). Select Save API Response in Browser Session to save the response from Xano. Then choose Save to finish.
This data will be saved in DrapCode, sent to Xano and then to Airtable.
3. Bind the Event
Go to Pages open the Form settings and mention the event to which you want to bind it to. This data will be saved in DrapCode and will make an API call to push it to Xano. Then Save your settings.
4. Add and Update a Record
Go to Preview and add details as per the fields in the form. Then click the Submit button. This will save the record in the DrapCode's collection and push it to Xano. You can refresh the records at both places to find the new record.
To check that the record is stored in the browser session, right-click to open Inspect. You will find the details under Application -> Session Storage. Here you can find the response that is sent from Xano.
5. Create an External API
Create an external API call to Airtable and update records there too. For this go to the External API and choose Create External API. Give a name to your external API. You need to choose a call to create which is POST in this example. Then copy the URL from Airtable's Swagger Documentation.
5.1 Request Data Mapping
You do not have to map the collection. Create the Authorization and bearer Token. The details of which you find in the AIrtable documentation. Copy them as it is. You cna create Content Type but it is an optional field.
5.2 Map the Data
To map the data from collection mention the data key that has the records in it, specify what is the key to uniquely identify the records for eg., ID. Choose Custom JSON and map the fields as in the Airtable documentation.
Select the field names and click Show Fields. Open Browser Session to collect value of fields from the browser. Inspect the fields and copy their path here for exact values. Here you are asking the API to pick values from the session and make another API call to send them to Airtable. Then click Save Setting.
6. Create an Event
In the event you had created, add one more external API to send data to Airtable. For this open the saved event. Choose external API and sleect send data to external API.
6.1 Add the Details
In the pop up that appears mention the name of the event, the notification you wnat to specify (if any), you can select Save API Response in Browser Session to save Airtbale's response this time. You can also give a custom name to save all the responses from Airtbale and even use them to send data to another API, as per your project.
7. Add and Update a Record
Go to Preview and add details as per the fields in Xano to save the data in DrapCode then sent it to Xano and Airtable, respectively. Then click the Submit button.
7.1 View the Data in Xano
Refresh the Page to view the data here.
7.2 View the Data in Airtable
Refresh the Page to view the data here with all its details like the Xano ID and its timestamp.
Note: To view browser session data one way you go about is to go to Componenents and choose Heading. Here ask it to get data value from the browser session of any field you prefer. Then Copy Property Path of that field and paste the complete path. Then click Save.
