Fetching Articles Using the Hashnode API

In this article, we'll be discussing how to fetch articles from your Hashnode blog using the Hashnode API.

What is the Hashnode API

The Hashnode API can be found at api.hashnode.com/. It is a GraphQL API that allows us to interact with Hashnode in a variety of ways. For instance, you can:

Fetch posts from a user
Follow a user
Delete a post
And much more

In this article, we'll just be covering how to fetch articles with the API.

Lets begin!

Fetching The Articles

To fetch the articles, we will be making a POST request to the API from a JavaScript file using Fetch. Making the request:

const data = await fetch("https://api.hashnode.com/", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        query,
        variables,
    }),
});

This should be done inside an async function for await to work

This won't work yet as we haven't defined the query or variables variables.

The query variable contains the actual GraphQL query we will use. This looks like this:

const query = `
    query GetUserArticles($page: Int!) {
        user(username: "BlakeYeboah") {
            publication {
                posts(page: $page) {
                    title
                    brief
                    slug
                    coverImage
                }
            }
        }
    }
`;

Replacing "BlakeYeboah" with your Hashnode username so it requests your articles

The variables variable is an object with values for variables mentioned in the query. In this case, its just the page variable which has to be an integer. We'll make this 0 to get the newest articles:

const variables = { page: 0 };

With these variables defined, our API request will now work. However, we must convert the JSON returned from the API into a usable JavaScript object for us to be able to access the posts we have fetched.

We can do this with the .json() method on the data variable which stores our request. We use await since it returns a promise. The code to do this looks like this:

const result = await data.json();

The actual articles are nested a few properties deep:

const articles = result.data.user.publication.posts;

If you want more information for each post, you can adjust the GraphQL query to select other properties as well. For a list of properties available, you can view the docs of the API.

Take Away

In this article, you have learned how to fetch articles from the Hashnode API. This can be used in a variety of was and is definitely useful to know if you have a Hashnode blog. Recently, I used the API to display my latest blog posts on my personal portfolio website.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

You can also show your support by buying me a coffee 😃

Fetching Articles Using the Hashnode API

Comments

More from this blog

Optimizing Website Performance for Speed and User Experience

Useful Web APIs For Your Next Project

How to use the Fetch API in JavaScript

Don't Make These Common Mistakes While Learning To Code

Understanding Units In CSS

What is the Hashnode API

Fetching The Articles

Take Away

Command Palette

Comments

More from this blog

What is the Hashnode API

Fetching The Articles

Take Away