Adding your blogs on a portfolio with react and Hashnode API

Adding your blogs on a portfolio with react and Hashnode API


3 min read

Hashnode is one of the best blogging platform ever built. Seriously it has all the features one would ever wish and that too with an eye-appealing user interface. The ๐Ÿ‘ฉโ€๐Ÿ’ป devblog is one of the best features of hashnode for reasons like

  • Markdown support
  • Syntax Highlighting & rich embeds
  • AMP Support
  • You own your own data
  • backup on Github
  • And you can host your blog on your own personal domain.

But what if you have a portfolio site and you want to add your blogs on the same domain without moving to another domain. Well, you can do that using Hashnode's GraphQL API. You can check out Hashnode's API playground and docs here.

hashnode api playground.png

Exploring the API docs

GraphQL is a query language for APIs. We send a GraphQL query to the API and get exactly what we need.

So If you go through the docs, you can find whatever you want and send that query to the API. Let's explore the docs and find the exact query for our blog posts.

hashnode docs.png

Once we find the posts we can decide what things we want to show on individual posts like title, brief, cover image, date of publishing, etc.

hashnode posts.gif

This is how our query will look now

const query = `
      user(username: "rutikwankhade") {
        publication {

Fetching the blog posts

So I created a class component called Blogposts.js where I will call the API and display all the posts. Let's first call the fetchPosts function and console log the response to see if it works.

class Blogposts extends React.Component {
  state = {
    posts: []

  componentDidMount() {

  fetchPosts = async () => {
    const response = await fetch('', {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
      body: JSON.stringify({ query }),
    const ApiResponse = await response.json();
    this.setState({ posts:});


            <h1>Hashnode api</h1>


โœจ Yay! We got the perfect response. It's an array of objects where each object has a title, slug, brief description, and cover image of a post.

Rendering the posts

First, we will map the array and then pass it's elements through props to the Post.js component. Here is how the render function of BlogPosts.js will look now.

render() {
        return (
                {, index) => (
                    <a key={index} 
                         href={`${post.slug}`} >
                        <Post post={post} />

The slug will be useful here to link posts to the original blog posts. Now let's create a Post.js component for displaying each blogpost.

const Post = ({ post }) => {
    return (
            <img src={post.coverImage} alt={post.title}/>

After adding some styling to the components and a few more details, the final result looks awesome. You can see it live here. Also, you can find the complete code on this repository.



I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

โšก Happy learning!

Did you find this article valuable?

Support Rutik Wankhade by becoming a sponsor. Any amount is appreciated!