How to Test GraphQL APIs in VSCode — RapidAPI Client

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.

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.

Subscribe to GeoDB API

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.

Installing RapidAPI VSCode Extension

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.

Creating a New API Request

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/.

Selecting POST Method and Adding API URL

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.

Specifying 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
Copy
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
Copy
{
  "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:

Specifying Variables for a Query

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.