The Dev.to API is a fantastic resource for developers who want to programmatically access and display posts from the platform. Whether you're building a personal blog aggregator, a portfolio, or just exploring the API, this guide will show you how to read posts from Dev.to using JavaScript and TypeScript with the axios library.
In this article, we’ll focus exclusively on reading posts—fetching lists of posts, retrieving individual posts by ID or slug, and using query parameters to filter and paginate results.
Table of Contents
- 1. Introduction to Reading Posts
- 2. Setting Up Axios
- 3. Fetching a List of Posts
- 4. Fetching a Single Post
- 5. Using Query Parameters
- 6. Conclusion
1. Introduction to Reading Posts
The Dev.to API provides several endpoints for reading posts:
- Fetch a list of posts: Retrieve multiple posts, optionally filtered by username, tags, or pagination.
- Fetch a single post: Retrieve a specific post by its ID or slug.
All these endpoints return data in JSON format, making it easy to work with in JavaScript or TypeScript.
2. Setting Up Axios
Before we start, ensure you have axios installed. You can install it using npm or yarn:
npm install axios
# or
yarn add axios
3. Fetching a List of Posts
Without an API Key
You can fetch posts without an API key using the /articles endpoint. Here’s how to do it in JavaScript and TypeScript:
JavaScript Example:
const axios = require('axios');
const username = 'your_username'; // Replace with the desired username
const url = `https://dev.to/api/articles?username=${username}&page=1&per_page=3`;
axios.get(url)
.then(response => {
const posts = response.data;
posts.forEach(post => {
console.log(`Title: ${post.title}`);
console.log(`Author: ${post.user.name}`);
console.log(`Published: ${post.readable_publish_date}`);
console.log(`URL: ${post.url}`);
console.log('---');
});
})
.catch(error => {
console.error('Error fetching posts:', error);
});
TypeScript Example:
import axios from 'axios';
interface Post {
title: string;
user: {
name: string;
};
readable_publish_date: string;
url: string;
}
const username = 'your_username'; // Replace with the desired username
const url = `https://dev.to/api/articles?username=${username}&page=1&per_page=3`;
axios.get<Post[]>(url)
.then(response => {
const posts = response.data;
posts.forEach(post => {
console.log(`Title: ${post.title}`);
console.log(`Author: ${post.user.name}`);
console.log(`Published: ${post.readable_publish_date}`);
console.log(`URL: ${post.url}`);
console.log('---');
});
})
.catch(error => {
console.error('Error fetching posts:', error);
});
With Pagination (page and per_page)
The Dev.to API supports pagination using the page and per_page parameters:
-
page: The page number to fetch (default is 1). -
per_page: The number of posts per page (default is 30, maximum is 1000).
Example URL:
https://dev.to/api/articles?username=your_username&page=2&per_page=5
4. Fetching a Single Post
By Post ID
To fetch a single post by its ID, use the /articles/{id} endpoint.
JavaScript Example:
const axios = require('axios');
const postId = 123456; // Replace with the actual post ID
const url = `https://dev.to/api/articles/${postId}`;
axios.get(url)
.then(response => {
const post = response.data;
console.log(`Title: ${post.title}`);
console.log(`Author: ${post.user.name}`);
console.log(`Published: ${post.readable_publish_date}`);
console.log(`URL: ${post.url}`);
})
.catch(error => {
console.error('Error fetching post:', error);
});
TypeScript Example:
import axios from 'axios';
interface Post {
title: string;
user: {
name: string;
};
readable_publish_date: string;
url: string;
}
const postId = 123456; // Replace with the actual post ID
const url = `https://dev.to/api/articles/${postId}`;
axios.get<Post>(url)
.then(response => {
const post = response.data;
console.log(`Title: ${post.title}`);
console.log(`Author: ${post.user.name}`);
console.log(`Published: ${post.readable_publish_date}`);
console.log(`URL: ${post.url}`);
})
.catch(error => {
console.error('Error fetching post:', error);
});
By Post Slug
To fetch a single post by its slug, use the /articles/{username}/{slug} endpoint.
JavaScript Example:
const axios = require('axios');
const username = 'your_username'; // Replace with the desired username
const slug = 'your-post-slug'; // Replace with the actual post slug
const url = `https://dev.to/api/articles/${username}/${slug}`;
axios.get(url)
.then(response => {
const post = response.data;
console.log(`Title: ${post.title}`);
console.log(`Author: ${post.user.name}`);
console.log(`Published: ${post.readable_publish_date}`);
console.log(`URL: ${post.url}`);
})
.catch(error => {
console.error('Error fetching post:', error);
});
TypeScript Example:
import axios from 'axios';
interface Post {
title: string;
user: {
name: string;
};
readable_publish_date: string;
url: string;
}
const username = 'your_username'; // Replace with the desired username
const slug = 'your-post-slug'; // Replace with the actual post slug
const url = `https://dev.to/api/articles/${username}/${slug}`;
axios.get<Post>(url)
.then(response => {
const post = response.data;
console.log(`Title: ${post.title}`);
console.log(`Author: ${post.user.name}`);
console.log(`Published: ${post.readable_publish_date}`);
console.log(`URL: ${post.url}`);
})
.catch(error => {
console.error('Error fetching post:', error);
});
5. Using Query Parameters
Filtering by Username
To fetch posts by a specific user, use the username parameter:
https://dev.to/api/articles?username=your_username
Filtering by Tags
To fetch posts with specific tags, use the tag parameter:
https://dev.to/api/articles?tag=javascript
You can combine multiple parameters for more specific queries:
https://dev.to/api/articles?username=your_username&tag=webdev&page=1&per_page=5
6. Conclusion
Reading posts from Dev.to using the API is straightforward and powerful. Whether you’re fetching a list of posts, retrieving a single post by ID or slug, or filtering results using query parameters, the Dev.to API provides all the tools you need.
By using axios in JavaScript or TypeScript, you can easily integrate Dev.to posts into your applications. This guide should give you a solid foundation to start exploring the API and building your own projects.
Happy coding! 🚀
Top comments (2)
This is interesting. Thank you so much for the guide
If needed, don't hesitate to ask questions, and I will respond as soon as possible. You can also suggest modifications or improvements to the article.