External API Fetch List of Data and Store it in Collection
From this video you will learn how to make a simple API call, fetch data/records and store them in the database/collection to build your web application.
1. Create an External API
Go to the Developer Hub and generate a token. Then go to the API Documentation and choose the API to retrieve the records i.e., List Records. Copy the URL then open DrapCode and in External APIs module you can configure the API using the Create API option.
2. Configure the External API
To get data from any third-party integration 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. Although you may also use an existing Create API too. APIs can be accessed from Settings → External API or from the top right hand-side. Then select the Create External API button. Give a name to your external API. You need to choose a call to create. Then copy the URL.
2.1 Create the Token
In the key mention the Authorization token and in the Value copy the Bearer and the Header value that you have already generated to make the call. Then click Send Request to finish this step.
2.2 Process the Response
Here click the Process Response option and if you want to save the data in the collection choose the Save Response Data option. Then mention the collection in which to persist/store the data.
2.3 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 and mention the JSON path for other fields. You can copy the fields as per their unique identifier to store the records in the collection mentioned asper their unique fields. Then click Save Setting to finish the process.
3. Create an Event
Create a simple event to fetch the data and store it wherever you want. For this go to the Events and choose Add Event and name the event. Then click Create to start.
3.1 Configure the Event
In the 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.
3.2 Add the Event Details
In the pop-up that opens select the external API you created. Then you can mention an alert message and how you want to save it. Then choose Save to finish. This will make the API call and store it in the collection.
4. Drop a Button
Go to Components and drop a 2 Column Layour and then a Button component to display the data. Open the Settings of the Data Table and specify where it should fetch the data from (external API) and from which collection and Save the changes.
5. Fetch Data in Collection
Click the Fetch Airtable Projects the button that you created. It will make a call to fetch the data and store in the chosen collection. Then refresh your collection and it will display the stored data. Similarly, you can add more records in Airtable and have them fetched via the button and persist them in your collection.
