A deep dive into Rapid API Client VS Code Extension

Mon Jul 25 2022

17 min read

Rapid's API Client VS Code Extension brings a fully functional HTTP Client to your VS Code. In this piece, let’s take a critical look at this 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

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

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.

Loading component...

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

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.

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.

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.

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.

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.

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.

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.

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.

Query

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

Loading component...

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.

Loading component...

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.

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.

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

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

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

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.

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

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.

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.

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

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

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

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

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

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.

Now specify the query parameters in the Query Tab.

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

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

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

It will generate this interface file for you:

ts
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
{
"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
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.