DEV Community

Cover image for How to use the dev.to API?
Jatin Sharma
Jatin Sharma

Posted on • Edited on

How to use the dev.to API?

#javascript #webdev #tutorial #beginners

Why do we need to use it ?

In this article I am only covering the article api of Dev.to. we can use this api for our personal portfolio website. Think like you are building a portfolio website and you need to show your blogs from Dev.to in your portfolio so this api comes into play.

How to use it?

I'm using the vanilla Javascript to show the demo you can use axios as well.

Fetch the public Articles without API_KEY 

const article = fetch(`https://dev.to/api/articles?username=${username}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

Fetch the public Articles by API_KEY 

const articles = fetch("https://dev.to/api/articles/me", {
    headers: {
      "api-key": process.env.API_KEY,
    },
}).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

Fetch the Articles by Path (slug) 

const article = fetch(`https://dev.to/api/articles/<your_username>/${slug}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

Fetch the Articles by article_id 

const article = fetch(`https://dev.to/api/articles/${articleId}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

Fetch the Comments of article by article_id 

const article = fetch(`https://dev.to/api/comments?a_id=${articleId}?sort=-created_at`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

Fetch the user by user_id 

const article = fetch(`https://dev.to/api/users/${userId}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

Fetch the user by username 

const article = fetch(`https://dev.to/api/users/by_username?url=${username}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

So basically this is all we need to fetch the Dev.to API.

Learn How to use fetch()

Let me know what do you think?

Top comments (10)

Collapse
 
rajeshkhadka profile image
Rajesh khadka •

From where we can find api-key ?

Collapse
 
j471n profile image
Jatin Sharma • • Edited

You can find it in Settings > Extensions.

Collapse
 
kodeenddev7 profile image
kodeend-dev7 •

Thank you for the post

Collapse
 
j471n profile image
Jatin Sharma •

My pleasure

Collapse
 
akshat202002 profile image
Akshat202002 •

Hey can you help me? I'm trying to fetch my articles in my blog app, I'm able to do this by using api key but not without api key. Why is that?

Collapse
 
j471n profile image
Jatin Sharma •

Hey Akshat,

You can make a get request on the following URL to get yout articles without API KEY -

https://dev.to/api/articles?username=akshat202002
Enter fullscreen mode Exit fullscreen mode

in the end it's your username. It will only give the data that is publically available.

Hope it helps.

Collapse
 
gass profile image
Gass •

Thanks for the post. I was struggling to make it work due to the fact that the docs just show examples by using curl. I don't see much info about the API key and the request limit. Do you know how to use the API key for this case? And if there is a gain in rate limit by using it?

Collapse
 
j471n profile image
Jatin Sharma •

To use the api key you can do like this -

const​​ data​​ = ​​​​fetch​(​"https://dev.to/api/articles/me"​, ​​ {  ​​
    headers​: ​{    ​​
        "api-key"​: ​process​.​env​.​API_KEY​,        ​​
    }​,   ​​
}​)​​.​then​(​(​res​)​​ => ​​res​.​json​(​)​)​​.​catch​(​(​err​)​​ => ​​console​.​error​(​err​)​)​;   
Enter fullscreen mode Exit fullscreen mode

this example is just to fetch your blogs data with API_KEY.

Collapse
 
julio_santacruz profile image
Julio Santacruz •

Hi, i'm kind of new here, do you know how long it takes to add a new article (post) on the API?

Collapse
 
j471n profile image
Jatin Sharma •

I've never published one thorough API, but I don't think it takes too much time, just a few seconds maybe. There is no timing mentioned in the dev.to API documentation

Read next

farouk_ profile image

Task manger app

Farouk -

iamdevmarcos profile image

React Hydration Explained 🔥

Marcos Mendes -

ronieremarques profile image

Roniere Marques: Um Desenvolvedor em Destaque

Roniere da silva marques -

sam45 profile image

looking forward to meeting senior frontend developers

samsandhu -