# 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/](https://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:

```javascript
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:

``` javascript
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:

```javascript
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 `awai`t since it returns a promise. The code to do this looks like this:

```javascript
const result = await data.json();
```

The actual articles are nested a few properties deep:

```javascript
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](https://api.hashnode.com/).

## 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](https://github.com/Blake-K-Yeboah)

**LinkedIn:** [Blake Yeboah](https://www.linkedin.com/in/blake-yeboah/)

You can also show your support by buying me a coffee 😃
 
<a href="https://www.buymeacoffee.com/blakeyeboah"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=blakeyeboah&button_colour=855ff6&font_colour=ffffff&font_family=Cookie&outline_colour=ffffff&coffee_colour=FFDD00"></a>