I recently made some improvements in my personal website at hadna.space. It was mainly to change the color theme to match the purple-ish color from this blog and some other minor improvements.

During the coding session, I talk to myself, "why don't I integrate my Hashnode-powered blog with this website so it can be more connected?"

At first, I thought I would do some web scraping. But this is not an elegant way to do it. There must be some other way. Then I remember that Hashnode is a developer-oriented blogging platform, they must have some sort of API that I can use.

Luckily, they have!

The Hashnode API can be accessed here at api.hashnode.com and they provide API playground to use the GraphQL. Great job!

If you are still unfamiliar with GraphQL, you can learn more in graphql.org/learn to have a better understanding in using GraphQL.

Here's the API playground page that you can use to test and explore you query:

Since I love minimalist design, I only need to retrieve the title and slug of my posts to show in my personal website, and here's the query I use:

{
  user(username: "dkhd") {
    publication {
      posts {
        title,
        slug
      }
    }
  }
}

My personal website is built using ReactJS + TypeScript + TailwindCSS (Github repository here), and luckily we have an awesome module to work with GraphQL in ReacJS called ApolloGraphQL and you can access the code here github.com/apollographql/apollo-client.

The installation is simple, just by using npm command:

$ npm install @apollo/client graphql

After the installation is successful, I create a new ReactJS module called LatestPost.tsx in my project directory, and fill it with these code:

# LatestPost.tsx

import * as React from "react";
import { ApolloClient, InMemoryCache, gql } from "@apollo/client";

const client = new ApolloClient({
  uri: "https://api.hashnode.com",
  cache: new InMemoryCache(),
});

const LatestPost = () => {
  const [data, setdata] = React.useState([]);
  React.useEffect(() => {
    client
      .query({
        query: gql`
          {
            user(username: "dkhd") {
              publication {
                posts {
                  title
                  slug
                }
              }
            }
          }
        `,
      })
      .then((result) => {
        const res = (result.data.user.publication.posts).slice(0, 5);
        setdata(res);
      });
  }, []);

  return (
    <div className="flex flex-col justify-center py-20">
      <div className="px-16 mx-auto">
        <p className="text-5xl text-gray-600 font-title font-sans font-bold text-center tracking-wide">
          Latest Notes
        </p>
        <p className="text-2xl text-gray-700 font-light text-gray-700 text-center mt-3">
          Thank's to{" "}
          <a
            href="https://api.hashnode.com/"
            target="_blank"
            rel="noreferrer"
            className="text-dkhd-purple-500 border-b-2 border-dashed border-dkhd-purple hover:text-dkhd-purple-600 font-semibold"
          >
            Hashnode's GraphQL
          </a>
        </p>
      </div>
      <div className="flex flex-col mt-16 mx-auto px-10">
        {data.length > 0
          ? data.map((items, index) => (
              <span className="text-center my-5" key={index}>
                <a
                  href={"https://note.hadna.space/" + items.slug}
                  target="_blank"
                  rel="noreferrer"
                  className="text-2xl md:text-4xl text-dkhd-purple-500 border-b-2 border-dashed border-dkhd-purple hover:text-dkhd-purple-600 font-semibold"
                >
                  {items.title}
                </a>
              </span>
            ))
          : null}
      </div>
    </div>
  );
};

export default LatestPost;

If you notice, I put .slice(0, 5) in my code to only grab the 5 latest posts. The rest is self-explained if you are familiar with ReactJS.

And finally, here's the final result!

It was just after I finished to push the code to Github when I realize that this Hashnode API are already posted by Sandeep Panda in his blog post How to show blog posts from your Hashnode blog on your personal site?, and Aravind in Townhall post at Introducing Hashnode GraphQL API - Public Beta.

Oh, silly me!

If you want to embed or adding your blog posts to your own personal website (or maybe you have another idea?), you definitely should try to use this awesome Hashnode API.

---

The featured image in this post is edited using my Spotify Photo Filter which you can use for free from my Mini Product.