Okay I am pretty much done with testing the Dev.to API and I gotta say, It's amazing. it is still in beta so take everything I say with a bulldozer serving of salt.
It is actually pretty cool. For those of you who don't want to constantly update sections of an application that contains your featured articles from Dev.to, or maybe you are a beginner who is looking to impress viewers, this tool is great when you want to showcase your current posts.
Lack of Information
Because the API is still in beta I expected to find parts which might not work or just overall are not available, I was testing it after all so I didn't expect to have everything working. But I could hardly even find anything suitable for me to use, as I primarily use JavaScript I was searching for something that could help me use the API more easily, or at the very least to help me understand how to use it. Even without being able to find helpful resources it works amazingly, but I should say this first, it takes (at least for me) a day for your current posts to show up.
For Front-End Devs
Yes, this will primarily focus on JavaScript for front-end and how to to get the API up and working. I will also mention that we will not be using the API_KEY. I did not need it in my case, but it might also be a problem with the API and docs provided as there was no clear instructions on how to use it in JS.
Either way, it worked even without the API_KEY so that might be an issue the Dev.to team might need to address, I'm not too sure.
Here's the end result in case you just want the code:
there are some cases where the codesandbox will not work, don't worry it will work when you use it in your own projects
Either way I will only be explaining what I did and how it works, if you have any other things you want to know you can ask :)
Fetch();
To get started you will need to have access to the API. Check out the docs to learn more.
The only thing you need is this link: https://dev.to/api/articles?username=ben
Where you will be replacing 'ben' with your username. you can set this link as a variable named api_url.
Okay let's do some coding. We will start by fetching the data from our username. To do this we use fetchAPI. Create an async function and give it any name you want. Inside this function we will create two variables. One will be called response and the other will be called data. For the data variable we will assign it our fetch method and put the api_url inside. This will call the API and wait for a response. Our second varible, data will wait for some data to be sent. In our case we are waiting for JSON data.
If you console.log the data you should get something like this:
Each article is represented as an object and stored in an array which is why we see multiple objects. If you don't have any articles you will only have an empty array. Also, the API sends only 30 articles in JSON format by default. We will not need this many.
So in order to access the most recent article we want the first object, this will be stored as index 0. Let's try it console.log(data[0]);
Great it works, now let's retrieve the data that we want to use. In our case we want the title, profile image, tags, and username. So let's create some basic HTML element that will be assigned to this data and display it.
Okay now, let's add and assign our data to these elements.
Let me explain what just happened: we assigned names to the data we want to use. If we want to access the data of the first article we simple tell it to access the first article and the data we want. Simply look at the JSON data and choose what you want. Then we assigned that to the HTML elements we already created.
And we are done!! Yes, that is it, it took me two days to actually do this but that is because I had to wait to see if the data would actually update. As I said before the API is slow and will take a whole day to actually update the information.
Final Thoughts
I think that the API is great although quite slow it is great for beginners, bloggers, and just about anyone if you don't mind spending some time coding up elements and assigning them to specific data. I think it's great for any projects if you want to learn something new and don't want to spend absurd amounts of time adding posts to your application.
If you want to display multiple articles I have coded a solution for that here: https://codesandbox.io/s/using-devto-api-with-fetchapi-tg2sl
Happy coding :)
Top comments (0)