Adding your blogs on a portfolio with react and Hashnode API

Search for a command to run...

Thanks, Rahul. That's so nice of you. You too have written some awesome content on your blog. And I really loved the new customized look of your blog. Looks stunning.๐ฅ
Very good article.
Didn't know that @hashnode has an official public GraphQL api. Will definitely be using it.
Great Thanks for the tip ! I was planning this to do using Gatsby and Github Pages :D
Yeah, Go on. It's fun.๐
Rutik Wankhade Well done!
Yesterday I finished implementing it for my rework of my portfolio and started writing a blog about it.
I refreshed the main page of hashnode and saw that you've already posted a similar blog although with react.js, I'm doing it with Vue.js.
nonetheless great work and keep it up!
Thanks. And I would love to read about how you implement it with Vue.js. ๐ It's cool to see how we can implement same things with different technologies.
Rutik Wankhade, Thanks for sharing this. Bookmarked to revisit when I do it for my website.
2022 was a year full of learnings for me. It was about solving problems, lots of iterations, making solid fundamentals, and growing up as a person. Even though it feels like this year went really fast and I have a very vague memory of it, this is my ...

Finally, the wait is over. Last year I built and launched Tabwave, a mindful productivity chrome extension that replaces your browser's new tab. It has been my passion project for a long time. And now it has become even more mindful and beautiful. Af...

The modern web has evolved over the years with new tools and technologies. We are introduced to new approaches to rendering websites and apps. With the rise of frameworks like NextJs and Remix, SSR has gained a lot of popularity in the last few years...

If you are following me for a while you know I love building side projects. And every time I decided to build one, I didn't know how it will turn out in the end. But one thing is for sure, it all started with a half-baked idea. half baked idea? what...

Did you know you can create GraphQL APIs within minutes without writing a single line of code? Well, I didn't. Thanks to the Hasura X Hashnode hackathon. Now I know and so you will. Hi there, In this blog post I will talk about why and how I built a ...

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
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.

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.

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.

This is how our query will look now
const query = `
{
user(username: "rutikwankhade") {
publication {
posts{
slug
title
brief
coverImage
}
}
}
}
`;
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() {
this.fetchPosts();
}
fetchPosts = async () => {
const response = await fetch('https://api.hashnode.com', {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({ query }),
})
const ApiResponse = await response.json();
this.setState({ posts: ApiResponse.data.user.publication.posts});
console.log(ApiResponse.data.user.publication.posts);
};
render(){
return(
<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.
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 (
<div>
{this.state.posts.map((post, index) => (
<a key={index}
href={`https://blog.rutikwankhade.dev/${post.slug}`} >
<Post post={post} />
</a>
))}
</div>
);
}
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 (
<div>
<img src={post.coverImage} alt={post.title}/>
<h2>{post.title}</h2>
<p>{post.brief}</p>
</div>
)
}
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!