How to Fetch DEV.to Articles in TypeScript (The Easy Way)

If you're building a portfolio or a personal site, displaying your DEV.to articles is a great way to keep your content distinct while owning the presentation.

The DEV.to API is powerful, but working with raw fetch calls in TypeScript often means writing a lot of interface definitions, managing URL parameters manually, and handling error states repeatedy.

In this tutorial, I'll share a clean, type-safe way to integrate the DEV.to API using a lightweight SDK called DevFlux.

The Goal

By the end of this, you'll be able to:

1. Fetch articles by username or tag
2. Handle pagination automatically
3. Get "Fresh" or "Rising" articles
4. Have full TypeScript autocomplete for all API responses

Prerequisites

You'll need a TypeScript project set up. If you don't have one, any standard Node.js or frontend TS environment works.

First, let's install the helper library:

npm install devflux

Step 1: Basic Setup

Instead of managing fetch and headers manually, we can initialize a simple client. This client handles the base URL and response parsing for us.

import { DevFluxClient } from 'devflux';

const client = new DevFluxClient();

Step 2: Fetching Your Articles

Let's say you want to list your latest blog posts. Instead of guessing the query parameters, we can use the getArticlesByUsername method.

async function displayMyArticles() {
  const articles = await client.getArticlesByUsername('zororaka');

  articles.forEach(article => {
    // TypeScript knows exactly what properties exist here!
    console.log(`Title: ${article.title}`);
    console.log(`Reactions: ${article.public_reactions_count}`);
    console.log(`Link: ${article.url}`);
  });
}

The best part here is the Type Safety. You don't need to manually create an interface Article { ... }. The SDK provides it, so your IDE will autocomplete properties like article.title, article.cover_image, etc.

Step 3: Filtering by Tags

If you want to show only specific content (e.g., only your "JavaScript" tutorials), you can pass filters directly:

const jsArticles = await client.getArticles({
  tag: 'javascript',
  top: 7 // Only top articles from the last week
});

Step 4: Handling Pagination

One of the trickier parts of API integration is pagination. Usually, you have to track page numbers and check if more data exists.

Here is a simple pattern to handle paginated data:

const response = await client.getArticlesPaginated({
  page: 1,
  per_page: 10
});

console.log(`Current Page: ${response.page}`);
console.log(`Has More Pages? ${response.hasMore}`);

// Access the actual articles via response.data
const myArticles = response.data;

This ensures you don't break your UI by trying to fetch nonexistent pages.

Real-World Example: A Simple Blog Widget

Here is how you might combine everything into a reusable function for your website:

import { DevFluxClient } from 'devflux';

const client = new DevFluxClient();

export async function getBlogWidgetData(username: string) {
  try {
    // Fetch latest 5 articles
    const articles = await client.getArticlesByUsername(username, {
      per_page: 5
    });

    // Map to a simpler format for your UI
    return articles.map(post => ({
      id: post.id,
      headline: post.title,
      summary: post.description,
      image: post.cover_image || '/default-placeholder.png',
      date: post.readable_publish_date
    }));
  } catch (error) {
    console.error('Failed to load blog widget', error);
    return [];
  }
}

Summary

Integrating external APIs doesn't have to be messy. By using a dedicated SDK like devflux, you save time on boilerplate and get the confidence of TypeScript's type checking.

Feel free to check out the GitHub repository if you want to see how the SDK works under the hood or contribute to it!

Happy coding! 🚀