In the past, I had blog websites (think Jekyll and Gatsby) where I would create and publish my blog posts, then I would cross-post them to DEV.to and other sites afterwards.
But what if you want to do it the other way round, huh? Well it's actually super easy! There isn't even any kind of authentication needed. In this article I will explain how to use the Forem API to display your blog posts on your website. In this example, I will also be using React and the fetch API.
Firstly, go and have a look at the docs for the Forem API, have a little read, and familiarise yourself a little bit. Then head to version 1 of the API to see the available endpoints.
So I have a React app that will display blog posts. All I need to do to display my posts, is to make a fetch request to the articles endpoint, with my username as a parameter.
I want to make the request as soon as the page loads, so I made a function called getPosts(), which makes the fetch request to the API endpoint and I have called this in the useEffect which runs once. To get your own posts, just insert your username into the url like so, or add it as a parameter:
// replace {yourUserName} with your DEV.to username:
"https://dev.to/api/articles?username={yourUserName}"
In my app it looks like this:
useEffect(() => {
getPosts();
}, []);
const getPosts = async () => {
try {
const response = await fetch(
"https://dev.to/api/articles?username=tiaeastwood&per_page=8",
);
const json = await response.json();
setPosts(json);
} catch (error) {
console.log("error", error);
}
};
I also added a query, so that it limits the result to 8 items at a time (per_page=8) and the API documentation will show you what other queries you can use.
So once the fetch request has been successfully made, I use setPosts() to store the result of the fetch in state, so that I can access it in the render. This gives us an array of post objects, and I can access the different properties of each, such as the title, cover_image etc to dynamically display what I want to in my component; you can see that in PostThumbnail component:
const PostThumbnail = ({ post }) => {
return (
<div className="grid-item">
<div className="text-overlay">
<p>{post.title}</p>
</div>
<div className="gradient"></div>
<img src={post.cover_image} alt="" className="cover-image" />
</div>
);
};
const App = () => {
const [posts, setPosts] = React.useState([]);
React.useEffect(() => {
getPosts();
}, []);
const getPosts = async () => {
try {
const response = await fetch(
"https://dev.to/api/articles?username=tiaeastwood&per_page=8"
);
const json = await response.json();
setPosts(json);
} catch (error) {
console.log("error", error);
}
};
return (
<div id="app">
<h1>Latest Blog Posts</h1>
<div className="grid">
{posts.map((post) => (
<PostThumbnail post={post} />
))}
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
When you make your fetch request, I recommend popping a console.log in somewhere, or having a look in the network tab of your browser devtools, so you can see all of the information you get about each blog post, it's quite a lot!
Finally, here is the CodePen example, so you can see how the code all comes together :)
Credits:
This post's cover image is by Christopher Machicoane-Hurtaud on Unsplash
Top comments (5)
Nice work! Reminds me of something @thomasbnt built before, as well. Cool to see the different ways that the API can be used.
An example of getting data from the dev.to API to display its own articles.
Getting data from the API of DEV.TO
An example of getting data from the dev.to API to display its own articles. Work with VueJS, fetch and the API of dev.to.
How to get my data ?
Change this lines in the file src/components/devto.vue :
How to get my ID ?
Get your ID by using the website. Press F12, and on the
bodyelement, you have adata-userattribute. This is your ID.How to develop this project
Project setup
Compiles and hot-reloads for development
Compiles and minifies for production
Lints and fixes files
Customize configuration
See Configuration Reference.
Thanks, Andy, for highlighting my project! 🤩🚀
Your blog is incredibly insightful and provides valuable information on the API Development. We appreciate the depth and clarity of your analysis. We also offer similar services and are dedicated to helping businesses excel in this area. For more information, please visit our website:https://techifysolutions.com/services/api-development-services/?utm_source=seon&utm_medium=blog,Thank you for sharing such a comprehensive and informative piece!
Exciting! How does it work in regards to SEO etc? 👀 If I'd like to also attract traffic to my own site
Excellent share @tiaeastwood! I appreciate the detailed code, and with your CSS- you have also made it look so beautiful too. I will use this as reference for my portfolio. ❤️