How to use a GraphQL API in React using Axios?

If you have an API set up already, you can skip to Step 3.

→ STEP #1: Choosing an API

There are many GraphQL APIs available on RapidAPI Hub. Create an account on it if you haven’t already. Then, you can look for GraphQL APIs in the search section.

For this guide, I will use GeoDB Cities API, which can serve the global city, region, and country data. Subscribe to the API.

Subscribe to GeoDB API

Once subscribed, you should see a field named x-rapidapi-key. This is the API key which we will use in our React code.

→ STEP #2

Next, we need to integrate the API. For this, first, create a .env.local file in the root directory of your project and paste the following into it:

sh
Copy
REACT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY

Remember the x-rapidapi-key I asked you to save earlier? You need to replace YOUR-RAPIDAPI-KEY with its value in this file. You get the key after subscribing to the GeoDB API.

→ STEP #3

Now install and add axios to your project. For this, run the usual command in the terminal:

sh
Copy
npm install axios

And import axios in your React file as follows:

js
Copy
import axios from 'axios';

Following is the GraphQL query we will use for fetching a given country’s details. You can just copy and paste it into your code. If you are using an API of your choice, move on to the next step.

graphql
Copy
{
	countries(namePrefix: "Ame") {
		edges {
			node {
				name
				capital
				currencyCodes
			}
		}
	}
}

Then, create a function that fetches the data using Axios. I am calling mine getCountries.

js
Copy
import axios from 'axios';
const getCountries = async () => {
	const options = {
		method: 'POST',
		url: 'https://geodb-cities-graphql.p.rapidapi.com/',
		headers: {
			'content-type': 'application/json',
			'x-rapidapi-host': 'geodb-cities-graphql.p.rapidapi.com',
			'x-rapidapi-key': process.env.REACT_PUBLIC_RAPIDAPI_KEY
		},
		data: {
			query: `{
        countries(namePrefix: "Ame") {
          edges {
            node {
              name
              capital
              currencyCodes
            }
          }
        }
      }`
		}
	};
	axios
		.request(options)
		.then(function (response) {
			const res = response.data; // Response received from the API
		})
		.catch(function (error) {
			console.error(error);
		});
};

Do you notice the hard-coded query parameter "Ame"? What if we want to pass a parameter dynamically from the client-side? We can do that by making these changes to the data object.

js
Copy
    data: {
      query: `query country($prefix: String!){
        countries(namePrefix: $prefix) {
          edges {
            node {
              name
              capital
              flagImageUri
              currencyCodes
            }
          }
        }
      }`,
      variables: {
        prefix: inputCountryName,
      },
    },

First, create a query operation country, which takes a parameter prefix of type string. Then, in the data object, we create another child named variables and assign the client's inputCountryName to the prefix variable.

That's all. Our API call is ready. To summarize, we are specifying these four things in our getter function using Axios:

• HTTP METHOD: We need to specify the HTTP Method (GET, POST, PUT, etc.). We use the POST method for GraphQL APIs.

• URL: The URL for the endpoint of the GraphQL API.

• Header: We have to set the header to content-type of application/json for all GraphQL APIs.

• Query: The query itself. It includes the request and variables.