I'm Still Not Using Postman!! I Use This NEW VS Code Extension Instead...

In this article, I'm excited to introduce a brand-new RapidAPI extension that will enable you to test your API endpoints and any external APIs you wish to call directly inside Visual Studio Code without switching to another program.

I want to show you four or five aspects that make this place special. Keep an eye out for that. So let's open VS Code and take a look to see what it looks like.

Using VS Code

Let's return to VS Code, where a basic Express server is running. We have an endpoint, /content, which will only return a small amount of data.

Basic Express Server in index.js file

We're simply simulating an endpoint that would return JSON data. If we open this endpoint, we can see that it returns the data in the form of an array of two different objects with the links title, image, URL, and description.

Opening Endpoint to see data

RapidAPI Client Extension

That is the sample data that we will examine and use. We'll proceed to install the extension. We'll click on the extensions tab, search for RapidAPI, and choose the RapidAPI Client extension. After clicking "install," we'll be all set.

RapidAPI Client Extension in VS Code

Following the installation of that extension, you will notice a small icon on the left. By expanding this, we can now test our API endpoints.

RapidAPI Extension Logo

Making and Sending a Request

So, as I indicated, let's make a GET request to [http://localhost3000/content](http://localhost3000/content), as I mentioned earlier. So, we can alter this URL, http://localhost3000/content, and add our new request inside the request part. You may now give this a name so we can refer to it as Get Content.

It's fantastic that this functionality has been provided in terms of the description, as you can format the content with bold, italics, code snippets, and other stuff.

We can proceed with this request, and our data should be returned as expected. So that works perfectly.

Setting up New Request

Another option is to execute Create new request from clipboard from the command palette after copying the URL (http://localhost3000/content) to the clipboard. To accomplish this, press Command + Shift + P on your keyboard and search for create a new request from the clipboard.

Leveraging command palette for new request

It copied the URL I had copied to my clipboard and then created the request. Now we can send the API request and expect the same result. So, if you already have a URL copied to your clipboard, you can simply have it generate the request for you.

Theme Selection

The fact that this will also respect the colors you have in your theme is another thing I think is incredibly impressive. We can conduct a theme-specific search.

Theme Selection

As you can see, we've updated the theme reflected within the extension. So those colors match and coordinate with the rest of the editor.

If we want, we can switch back to the default dark theme. So dark VS Code will draw in those colors and make everything look good. And for the rest of this, we can just use purple shades.

Different colors for Theme

Test Endpoint

Now, let me show you a couple of extra features that are incredibly great. For example, suppose we have an endpoint we obtained from another source but haven't yet tested it in code and want to create the code to perform that request. This extension can help you with that, though.

You can submit these requests in one of several languages using the dropdown menu inside this Request Snippet. I'll employ JavaScript, and the integrated Fetch API.

Selecting language for Request Snippet

I have the option to copy the code snippet that demonstrates how to send a fetch request to this API endpoint.

Copying the Code Snippet

Another option is to change this to Axios. So those are two of the most common ways to make HTTP requests with JavaScript, and you have built-in code snippets for both.

Leveraging Axios for HTTP request

Type Interface Generation

TypeScript is something I like more and more and more. One of my issues is that I can't always predict what data will be returned or how it will look when I send a call to an API that was either developed by myself or someone else.

I frequently log out to the console to examine it. Here's a cool thing, though. We can convert this JSON to a TypeScript interface.

Converting JSON to TypeScript interface

Also, we can have a code snippet for that. Here's the interface representation of that data that comes back, which includes description, image, URL, link, and title.

Interface representation of data

Now I am entirely aware of how that info appears. If I'm working on a TypeScript project, I can just drop this interface into my project and have typings appear whenever I make requests to this API.

We might want to consider whether we have an API that accepts a secret API key you pass. I will therefore add a brief snippet to this URL.

js
Copy
const express = require('express');
const app = express();
const data = [
    {
        link: 'https://ww.producthunt.com/posts/react-and-next-js-snippets',
        title: 'React and Next.js Snippets - React and Nextjs Snippets with TypeScript!? | Product Hunt by Avneesh',
        imageUrl:
            'https://ph-files.imgix.net/b17455eb-f82d-4dla-bd22-68eac9667073.png?auto=format&auto=compress&codec=mozjpeg&cs=strip&w=440&h=220&fit=max&dpr=2',
        description:
            "This Visual Studio Code extension gives you many React and Next. js snippets with typescript support so you don't have to rewrite the same code over and over again.",
    },
    {
        link: 'https://egghead.1o/bLog/drag-to-reorder-list-items-with-framer-motion',
        title: 'Drag-to-Reorder List Items with Framer Motion by willjohnsonio',
        imageUrl:
            'https://egghead.10/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdg3gyk0gu2Fimage%2Fupload&2Fv1644535367%2Fegghead-next-ebombs%2F2022-will%2Fpink_orbs_hexagon_1.png&W=3840&9=100',
        description:
            'If you have an application with a list of items, like a to-do list, shopping list, a list of the greatest basketball players, etc. You might want to reorder your list once you have some items added to it.',
    },
];
const SERVER_KEY = 'secret';
app.get('/content', (req, res) => {
    const { apiKey } = req.query;
    if (apiKey !== SERVER_KEY) {
        res.send(401);
    }
    res.json(data);
});
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on Port: ${port}`));

So this snippet will take an API key from the query parameters, among other things. The consumer, or whoever makes the request to this API, must include this as a query parameter.

We will access that variable in this endpoint and compare it to the incoming apikey=SERVER KEY. And in that case, feel free to return a 401.

Extracting API key from the Query Parameters

This is an example of how the RapidAPI extension's environment variables and groupings work. So let us proceed to save this. When we return to our request, we should see that we have received an unauthorized response or if we look at Raw, we will see that we have received an HTTP response code of 401.

What, then, do we do? So, in the URL, we can add apikey=secret right to the request, and we should see that this works. The authorization will be accepted when we make numerous queries and use various API endpoints.

Adding API Key in the URL

Manage Environment Variable

Because we might have multiple API keys for testing, development, production, etc., we might decide against using a hard code. So let's explore how we'd accomplish that in our own environments. Let's go to manage and click to make a new group we may use.

Making a new group

We can refer to this as Group 2. We'll change the name from New Environment to Development. Let's add another Testing variable in the environment section. Then, inside our Development, let's go ahead and add a secret variable with a secret value.

Adding a Variable name and value

Let's return to our request at this time. After setting the environment variable, we may enter curl brackets into the URL and then scroll down to choose the environment variable. If we click on this, we can see that the Secret option is available, giving you a Preview of the value.

Adding Environment Variable in URL

Sending this request should confirm that it is still functioning as expected, but first, let's pick a testing environment.

Testing Environment

Keep in mind that the variable is not set inside our environment in testing. So testing does not have a value for that secret variable name.

Therefore, it should imply that this will give us a 401 unauthorized, which it does. So, this is how we create several environments inside our groups for the various API queries we do.

We can use those environment variables to avoid hard-coding things, save them once, switch between them as we test, and everything should work.

Checking the Response

Saving API

Another thing I'd like to point out is that, because you're doing a lot of work, you might want to be able to save some of it. Sign in with your RapidAPI account, which is located at the top right of the extension bar.

Saving API

This will take us to the sign-in page. Look inside the Studio, you'll notice that two different projects are going on. There's an onboarding one where you get a bunch of free stuff.

We can also leverage that inside our local environment on VS Code or our testing environment. So if we click on the button next to the sign in and sign out button, there's a Create new project.

This displays the various RapidAPI Studio related projects I have. The onboarding project I can select already has many requests grouped in these various groupings that assist keep everything logical.

Like in the dashboard, I can click on one of these, send the queries, view the results, etc. As a result, this extension is excellent for quickly organizing your request, creating your request, having environment variables, and having to theme with colors and other items that go exceptionally well together.

Wrap up

They have several exciting features, including generating JavaScript snippets for calling the API and your TypeScript types or initiating requests from URLs in your clipboard.

This extension is incredibly beautiful because it has so many interesting small details. Therefore, please go ahead and try it out.