How to Call Third-party API Integration

Applications occasionally need to communicate with the outside world to retrieve or process data. Third-party API refers to processing or sending data to a server we don’t own or control. We might want to display weather information in our application. To do so, we’ll have to connect to a service that provides that functionality by integrating our application to call that service.

Integrating with third-party services requires that we know the url of the service we want to connect to. Some services require that we provide an API key before connecting and interacting with the service. The following is an API call for the weather in a city:

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

Notice that parameters are defined in the URL as query strings embedded in the URL. The API checks these parameters and uses them to return the appropriate results or data.

The API above requires the caller to provide the lat, lon, and APIKey. The return data from most APIs is in JSON format, which is easy to read and understand. To understand how a particular API works, we have to read the documentation to understand the parameters required by the API.

API integration in Meteor

Meteor has a package named fetch that’s used to integrate and call third-party APIs. If we already know how to use the fetch API on the browser, then we know how to use the implementation of fetch provided by Meteor.

Meteor’s fetch is isomorphic, which means that it works in both the server and client environments. The fetch package is installed by running meteor add fetch in the terminal. To use the fetch implementation by Meteor, we have to import it by running the following code in the file where it’s needed:

import { fetch } from "meteor/fetch"

Anatomy of fetch call

The playground below is a simple application that’s used to retrieve information about a user on GitHub by connecting to the GitHub API:

import fetch from 'node-fetch';
const response = await fetch('https://api.github.com/users/github');
const data = await response.json();
console.log(data);

The coding playground in this lesson uses the code above to display some of the returned data from GitHub.

Open the App.jsx file located at imports/ui/App.jsx. The code sample named retrieveData is used to retrieve the profile and defined in lines 9–14. This function is an async function in which we have to await the result. GitHub API returns the response as JSON. The profile data from GitHub is saved in a React state called data to trigger a rerun of the component if data changes.

The useEffect function runs when the getData state changes. The getData state is changed by clicking the button to retrieve the profile from GitHub. This causes the useEffect to run the retrieveData function, which runs and calls GitHub API to retrieve information about a user on GitHub.

Task

Run the application and type a GitHub username in the textbox to retrieve the profile details of the username.