A deep dive into Rapid API Client VS Code Extension

There are two ways you consume a REST API. If your application has a server, you would have to write a REST API for it to query server data. The other way is using a public REST API. For this, you can visit Rapid's API Hub, which has over 35000+ APIs.

Whenever you create your REST API or use an existing one, you must test it to ensure everything is working. You also have to look at the response it brings to build the appropriate user interface (UI). There are multiple ways you can do it. You can write additional code to see the data or paste the API endpoint inside the browser. Although both these methods will work, they are limited in testing and other things.

Taking all this into account, Rapid is introducing a VS Code extension called Rapid's API Client to help you test your APIs without leaving your code editor. In this piece, we will take a deep look at the extension, break down its user interface, and quickly see how to test an API using it. So without any further ado, let’s jump in!

• Rapid's API Client for VS Code
• Installation
• Breaking Down The User Interface
• Testing APIs Using Rapid's API Client For VS Code
  • Testing a Public REST API
  • Testing a Node.js REST API
• Generate API Call Snippets Using Rapid's API Client For VS Code
  • Finding An API
  • Creating a Request
  • Generating Python Code Snippets
  • Generating Go Code Snippet
  • Generating JavaScript Code Snippet
• Auto Generate Interfaces from API Response using Rapid's API Client for VS Code
• Wrap Up

Rapid's API Client for VS Code

With this extension, Rapid has brought API testing right where you feel at home. The extension has a slick design and covers all the basics of API testing. It is full of exciting features that can help you look at the API response, browse through it, and even generate API calling code snippets (more on that later).

Rapid's API Client – VS Code Extension

Before we go any further, let’s quickly cover how to install it.

Installation

It is straightforward to install Rapid's API Client for VS Code. Just in case there is any confusion, the following are the steps that you can follow to install it:

→ STEP #1

Click on the Extension's icon on the VS Code sidebar to open the Extension’s marketplace. You can also press CMD + SHIFT + X to open it if you are on Mac. For Windows, it would be CTRL + SHIFT + X.

Search for RapidAPI Client

→ STEP #2

Now click on the install button. It will take a moment; afterward, you will see the Rapid icon in your VS Code sidebar.

Rapid's API Client Installed

Breaking Down The User Interface

When you click on the Rapid icon in the VS Code sidebar, it will open a menu. The menu is divided into three sections. The first section is responsible for managing your projects, the second handles all your environments, and the third is where all your API requests are present.

You will see that a request has already been created for you under the Requests tab. If you click on it, it will open a tab where you can test your API.

Project

When you open the Rapid's API Client for VS Code extension, you will see there are two icons at the top. The first one lets you create different projects. It helps you separate your API requests on a project basis. The default project is local.

The second icon opens a popup to sign you in the OctoPaw. Once you are signed in, you can sync your new projects with OctoPaw as soon as you create them. This will help you test your APIs from any computer.

Manage Projects in Rapid's API Client

Environments Section

You will see three vertical dots in front of the Environments heading. When you click on them, it will show two options. The first option adds a new group and the second option manages the existing groups.

Environments Options in Rapid's API Client

Now try clicking on the Manage button. It will open a new tab that will contain all the groups. You can change the group's name from here and add some environment variables.

Manage Existing Environments in Rapid's API Client VS Code Extension

Requests Section

You will again see three vertical dots in front of the Requests heading. Go ahead and click on it. It will open a menu that shows two options, i.e., New Request and New Group.

The New Request option will create a request under the Requests heading. You can go ahead and try it out. If you click on the New Group option, it will create a new group that can now group together different API requests.

New Group containing API Requests in Rapid's API Client

Request Tab

As mentioned earlier, when you click on the request under the Requests section of the Rapid's API Client VS Code Extension View, it will open a new tab that contains different options related to making an API request. It will also open an API response viewer on the right side.

API Request Tab of Rapid's API Client

HTTP Method, API Input Box, And Send Button

At the top of the API request tab, you will see a dropdown menu that contains eight HTTP methods. These methods are used to make an HTTP request to the API. Besides it, there is an input box where you write down the API you want to test. Lastly, there is a Send button alongside this input box to call the API.

HTTP Method, API Input Box, and Send Button

API Description

Under the request method, API input box, and the send button, you will find another layout that contains multiple sections. The first is the Description section that lets you give your API request a name and some description. The description box supports markdown so you can format your text accordingly.

API Request Name and Description

Headers

After the Description, you will see a Headers section beside it. When you click on it, the UI will change. The new UI will let you add header values to your API request. You can add as many header values as you need.

Setup API header

Query

The next is the Query section, where you can add all your API request query parameters.

Query Section of the Request Tab of Rapid's API Client

Body

This section will let you add a body to your API request. For this, you have multiple ways to format your request body. For instance, you can add it as pure text. There is the JSON and JSON Tree format. You can also use GraphQL, Form URL-Encoded, and multipart to write the body.

Body Section of the Request Tab of Rapid's API Client

Auth

The last section of this layout is the Auth section which contains the authorization keys for the API. You can set the authorization to none, basic (where you provide username and password), OAuth 1, and OAuth 2.

Auth Section of the Request Tab of Rapid's API Client

Request Snippet

At the bottom of the request tab, you will see a Request snippet section. This section can generate the code snippet for calling your provided API.

There are three options here. The first one is a dropdown menu to select the programming language you want to get the code snippet. The second option is a closing tag icon that creates a new file and adds the selected language code snippet to it. Lastly, the third icon copies the code snippet to your clipboard.

Request Snippet Section of the Request Tab of Rapid's API Client

Response Status Code

When you make an API request, the extension will show you the status code that it received from the response. If the request is successful, you will see a 200 code here.

Response Status Code

Under the status code, you will see three sections. i.e., Info, Request, and Response.

Info

Under this section, all the information related to the API request will be listed, including the date and time the API request was made, URL, status, response time, etc.

API Request Information

Request

This section includes information related to the API headers and body. It will be empty if you have made a plain API request only with the endpoint without anything else.

API Request Options

Response

You can see the response the API has brought along in this section. You can look at the response header and check out the response in various formats, including plain text, JSON Tree, JSON text, Image, Hex, Web, and Raw.

API Response Options

Type Generation

At the bottom of this UI is an option to generate the type definition of response in other languages. Right now, the extension supports three languages, i.e., TypeScript, Swift, and Python.

API Response Type Generation Section

Testing APIs Using Rapid's API Client For VS Code

We will test two kinds of REST APIs using the extension. The first will be a public REST API from Rapid's API Hub. Whereas, the second will be a REST API serving from a Node.js and Express.js server. We will set up a simple Node.js REST API for this one.

Testing a Public REST API

Let’s look at how you can test a Public REST API using the Rapid's API Client VS Code Extension.

→ STEP #1

We will use the Famous Quotes API. For this, head over to the Rapid's API Hub and create an account. Then search for Famous Quotes API in the search box.

Select the Famous Quotes API from the search results.

Subscribe To Famous Quotes API

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key x-rapidapi-key. Go ahead and save it somewhere. We will have to send it in the API request header while testing.

→ STEP #2

Go ahead and open VS Code. Now click on the Rapid icon present in your VS Code sidebar. Once you click on it, you will see Rapid's API Client VS Code Extension View. Click on the plus icon beside the three vertical dots in front of the Requests.

Create New API Request

It will create a new request tab where you can look at the API response and test it out.

→ STEP #3

To test the API, we need the following things that are present on Rapid’s API Hub's Famous Quotes API page:

• HTTP Request Method
• Famous Quotes API URL
• Query Parameter Values
• Header values

So go ahead and copy these values somewhere. Now go back to the request tab of the Rapid's API Client you created in the last step. Select the HTTP method from the dropdown menu. In this case, we will choose the GET method. Now paste the API URL beside the send button in the API input box.

Added API URL and Request Method

Now click on the Headers tab and add the header values that you copied from the Famous Quotes API page.

Header values set for the API Call

Afterward, click on the Query section and add your API query parameters that you copied from Famous Quotes API page.

Query parameters set for the API Call

→ STEP #4

Once everything is done, click on the Send button. It will make an API request and show the results to you. You can look at the response in multiple formats. Let’s go with the JSON Text.

Famous Quotes API Response

There you have it. You have successfully called and tested a public REST API using the Rapid's API Client.

Testing a Node.js REST API

I have already set up a Node.js server and written a small REST API. If you do not know how to do this, we have written a detailed piece on how you can create a simple Node.js-based REST API.

Now open Rapid's API Client. Ensure that your Node.js is running. Now create a new request tab as you did earlier. Choose the GET method from the dropdown and enter the following URL in the API input box next to the Send button.

Copy
​http://localhost:5500/hello

Now click on the Send button. You will see that the API has brought a response that you can look at in different formats. Let’s go with the JSON Text.

GET Request response of Node.js REST API

Now change the HTTP method from GET to POST in the dropdown and click on the Send button again. It will bring a response that will be displayed on the right side.

POST Request response of Node.js REST API

Generate API Call Snippets Using Rapid's API Client VS Code Extension

Let's look at how you can generate API call snippets using Rapid's API Client VS Code Extension.

Finding An API

We will use the same Famous Quotes API that we used earlier.

Creating a Request

Now go ahead and create a new request inside the Rapid's API Client. Fill out all the fields, including the HTTP request method, API endpoint URL, query parameters, header values, etc.

Generating Python Code Snippets

After inserting values in all the appropriate fields, go ahead and select Python from the dropdown menu in front of the Request Snippet at the bottom. It will show another dropdown menu where you can select the python package you want to use to generate the code snippet. Let’s keep it http.client for now.

Generate Python http.client API Code Snippet

Now click on the </> icon. The extension will create a new python file and paste the code snippet there. The following is what the extension has generated:

py
Copy
import http.client
conn = http.client.HTTPSConnection("famous-quotes4.p.rapidapi.com")
headers = {
    'X-RapidAPI-Host': "famous-quotes4.p.rapidapi.com",
    'X-RapidAPI-Key': "YOUR-RAPIDAPI-KEY"
}
conn.request("GET", "/random?category=all&count=5", headers=headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))

From the second dropdown menu, select Requests instead of http.client. Now click on the </> icon again. You will see another python file created with the code snippet inside it.

py
Copy
import requests
url = "https://famous-quotes4.p.rapidapi.com/random"
querystring = {"category":"all","count":"5"}
headers = {
    "X-RapidAPI-Host": "famous-quotes4.p.rapidapi.com",
    "X-RapidAPI-Key": "YOUR-RAPIDAPI-KEY"
}
response = requests.request("GET", url, headers=headers, params=querystring)
print(response.text)

Generating Go Code Snippet

Let’s quickly generate a Go code snippet to call APIs using the Rapid's API Client. For this, select Go (NewRequest) from the dropdown menu in front of the Request snippet at the bottom.

Generate Go (NewRequest) API code snippet

Now click on the </> icon to generate the snippet.

go
Copy
package main
import (
	"fmt"
	"net/http"
	"io/ioutil"
)
func main() {
	url := "https://famous-quotes4.p.rapidapi.com/random?category=all&count=5"
	req, _ := http.NewRequest("GET", url, nil)
	req.Header.Add("X-RapidAPI-Host", "famous-quotes4.p.rapidapi.com")
	req.Header.Add("X-RapidAPI-Key", "YOUR-RAPIDAPI-KEY")
	res, _ := http.DefaultClient.Do(req)
	defer res.Body.Close()
	body, _ := ioutil.ReadAll(res.Body)
	fmt.Println(res)
	fmt.Println(string(body))
}

Generating JavaScript Code Snippet

The Rapid's API Client VS Code Extension lets you generate different JavaScript code snippets. You can select the type of code snippet you want to generate. For JavaScript, you can choose jQuery, fetch, XMLHttpRequest, and Axios.

Let’s select JavaScript and then fetch from the drop-down menu.

Generate JavaScript (fetch) API code snippet

Now click on the </> icon to generate the snippet.

js
Copy
const options = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com',
    'X-RapidAPI-Key': 'YOUR-RAPIDAPI-Key'
  }
};
fetch('https://famous-quotes4.p.rapidapi.com/random?category=all&count=5', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

Auto Generate Interfaces from API Response using Rapid's API Client VS Code Extension

Let's look at how we can generate interfaces for our API response using Rapid's API Client VS Code Extension.

→ STEP #1

We will again use the same Famous Quotes API that we used earlier. So make sure you are subscribed to it.

→ STEP #2

Now create a new request in Rapid's API Client VS Code Extension.

Create New API Request

It will create a new request tab where we can test the API. To send the request, we need the following things:

• HTTP Request Method
• Endpoint URL
• Query Parameter Values
• Header values

So go ahead and copy these values from the Famous Quotes API's page.

Now go back to the request tab of the Rapid's API Client VS Code Extension and add the request method with the endpoint URL.

Added API URL and Request Method

Now specify the query parameters in the Query Tab.

Query parameters set for the API Call

Finally, add the header values in the Headers Tab, including your Rapid's API key.

Header values set for the API Call

Click on the Send button. It will send the API request and return the response, which looks like this.

Famous Quotes API Response

→ STEP #3

Once we get the response, the extension can automatically generate TypeScript interfaces for you. So, let's create an interface to describe the properties of the API response above.

In the bottom right corner of the Request tab, you will see a JSON to field. Select TypeScript and click on the Generate Code </> button.

Generate TypeScript Interface

It will generate this interface file for you:

ts
Copy
export interface RootObject {
 author: string;
 category: string;
 id: number;
 text: string;
}

As you can see, it defines the properties of the API response. This feature is particularly useful when working with APIs that return complex objects. For example, here is the response of the JSON Placeholder API's user endpoint:

json
Copy
{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

Using the Rapid's API Client VS Code Extension, we generated the interface for it with one click. It looks like this:

ts
Copy
export interface RootObject {
 address: Address;
 company: Company;
 email: string;
 id: number;
 name: string;
 phone: string;
 username: string;
 website: string;
}
export interface Address {
 city: string;
 geo: Geo;
 street: string;
 suite: string;
 zipcode: string;
}
export interface Geo {
 lat: string;
 lng: string;
}
export interface Company {
 bs: string;
 catchPhrase: string;
 name: string;
}

Wrap Up

This is pretty much it, folks. Rapid's API Client VS Code Extension that is now available for you to use. Go ahead, install it, and start testing your APIs right inside your code editor.

If you want to learn how to use TypeScript to call APIs using Rapid's API Client, we have also written a piece about it that you can find here.