How to Test GraphQL APIs in VSCode — RapidAPI Client

Mon Oct 03 2022

4 min read

Today, more and more applications are using GraphQL APIs. When working with a GraphQL API, we need to query and test it to ensure it is running as expected. With the RapidAPI VSCode Client, we can test GraphQL APIs without leaving VSCode.

This piece will present a step-by-step guide for testing GraphQL APIs using the RapidAPI VSCode Client. Let’s take a quick overview first.

RapidAPI VSCode Client

RapidAPI Client brings a full-featured HTTP Client to your VS Code. It is a VS Code extension to help you work on APIs without leaving your favorite code editor. So it streamlines API development for you no matter where you are in the development cycle, without ever switching context to another tool.

Install RapidAPI Client for VS Code
In your VSCode, search for "RapidAPI Client" and install the first extension. You can also download it from here.
Download

How to Test a GraphQL API?

Let’s see how we can test a GraphQL API in VSCode.

→ STEP #1: Find a GraphQL API

If you already have a GraphQL API to test, you can skip to the next step. Otherwise, a great medium to find APIs is RapidAPI Hub, which has thousands of public APIs you can use for your applications. For this guide, we will use the GeoDB Cities API, which is a GraphQL API that returns data about cities, regions, and countries. Sign up, click subscribe and select the free plan.

Once subscribed, you will see your API key in a field named x-rapidapi-key, which you will use to access the API.

→ STEP #2: Install RapidAPI VSCode Client

Open VSCode. Press CMD/CTRL + SHIFT + X or click on the Extensions icon on the VSCode sidebar to open the Extensions Marketplace. Search for RapidAPI and select the first one.

Once installed, you will find the RapidAPI icon in your sidebar.

→ STEP #3: Create a New Request

Now click on the RapidAPI icon in your sidebar. The client interface will open. Click on the plus icon beside the three vertical dots in front of the Requests.

It will create a new request tab. Now, select POST as the request method and paste the GeoDB API’s URL in the URL field, i.e., https://geodb-cities-graphql.p.rapidapi.com/.

To call the API, we will also need to specify the headers. We require two headers for this request.

  1. API key: We got the RapidAPI key when we subscribed to the GeoDB API.
  2. Content type: For GraphQL APIs, we need to set the content type to application/json.

Click on the headers tab and specify these headers.

→ STEP #4: Add the Query

Let’s add the GraphQL query we want to test. Click on the Body tab and select the GraphQL option. You’ll see a field where you can enter the query. Moreover, scroll down and notice that RapidAPI Client automatically loads the API’s schema and docs. Both are super helpful for writing GraphQL queries.

Now, in the query tab, add your query. We will use the following query:

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

This query will find the countries that match our prefix Ame and return their name, capital, flag, and currency. Hit the Send button to send the request. You will receive the following response:

json
{
"data": {
"countries": {
"edges": [
{
"node": {
"name": "United States of America",
"capital": "Washington, D.C.",
"flagImageUri": "http://commons.wikimedia.org/wiki/Special:FilePath/Flag%20of%20the%20United%20States.svg",
"currencyCodes": [
"USD"
]
}
}
]
}
}
}

Now, your queries may also require variables. For that, after you add the query, you will see the variable in the section below where you can specify its value like this:

Wrap Up

We have successfully tested a GraphQL query from VSCode. As you can see, we can get the response, its time, status, and size. The extension can also do clever stuff like generating TypeScript interfaces from the response. Install the extension, send an API request and try it out yourself.