Hashnode API — How To Display Your Blog Articles On Your Portfolio Page

Learn how to use the Hashnode API to display your articles in other places

A photo of a laptop with code on
Photo by Oskar Yildiz on Unsplash

Pre-requisites

Get started with the Hashnode API

Hashnode API GraphQL Playground
{
storiesFeed(type: FEATURED, page: 0){
title
brief
slug
}
}
{
user(username: "catalinpit") {
publication {
posts(page: 0) {
title
brief
slug
}
}
}
}

Authentication — Hashnode personal access token

Hashnode Developer Settings - Personal Access Token

Fetch your articles

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hashnode API Example</title>
</head>
<body>
<script type="text/javascript" id="articles" src="app.js"></script>
</body>
</html>

Fetch function

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

return data.json();
}

GraphQL query

const GET_USER_ARTICLES = `
query GetUserArticles($page: Int!) {
user(username: "<your_Hashnode_username>") {
publication {
posts(page: $page) {
title
brief
slug
}
}
}
}
`;

Fetch data

gql(GET_USER_ARTICLES, { page: 0 })
.then(result => {
const articles = result.data.user.publication.posts;
let container = document.createElement('div');

articles.forEach(article => {
let title = document.createElement('h2');
title.innerText = article.title;

let brief = document.createElement('p');
brief.innerText = article.brief;

let link = document.createElement('a');
link.innerText = 'Read more...';
link.href = `https://catalins.tech/${article.slug}`;

container.appendChild(title);
container.appendChild(brief);
container.appendChild(link);
})

document.querySelector('.app').appendChild(container);
});
API response example
API response example

Display data

document.getElementById('articles').parentNode.innerHTML = `
<div class="app">
<h1 class="app-heading">Catalin Pit's Articles</h1>
</div>`;
Hashnode API GET request to fetch your blog articles
Hashnode API GET request to fetch your blog articles

Conclusion

Writing about Vue, Node.Js, AWS, JavaScript, Cloud Computing and Software Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store