The Updated Hashnode API Setup Tutorial

I was trying to set up my website to link previews to my articles here on Hashnode, and though I did get some great ideas from Catalin's tutorial from a few of years ago (which is like decades in tech time), I had to figure out how to do it now as Hashnode has updated their API since then. His and others tutorials that I have come across were not updated to Hashnode's new API address and the queries they used are just not valid now (maybe Hashnode did a restructuring of their data 🤷‍♀️).

Here's the updated tutorial I was hoping to find, but didn't, so you don't have to pull your hair out too.

How To Do It

If you don't have Node.js installed, I recommend you do so, because you will need to test to see if your Javascript code is returning the calls (or errors) you except. I use Homebrew on my Mac.

$ brew install node

Go to Hashnode's API Playground to figure out what you want to pull from it and create the query at the same time. I wanted to pull the 3 most recent articles that I have published. If you aren't familiar with GraphQL, it's like SQL and XML had a love child. Hashnode has a reference page that explains how they organize their data and it helped me figure out how to create my query. Make sure to capture ALL those curly brackets, because there's a lot! So here's what I came up with:

query Publication {
  publication(host: "shanirivers.hashnode.dev") {
    posts(first: 3) {
      edges {
        node {
          title
          brief
          url
          coverImage {
            url
          }
          slug
        }
      }
    }
  }
}

Build out your code and include your GraphQL Query:

 fetch('https://gql.hashnode.com', {
   method: 'POST',
   body: JSON.stringify({ // Use stringify for the query
     query: `{
         publication(host: "shanirivers.hashnode.dev") {
         posts(first: 3) {
           edges {
             node {
               title
               brief
               url
               coverImage {
                 url
               }
               slug
             }
           }
         }
       } 
     }`
   }),
   headers: {'content-type': 'application/json' }
 }) 
 .then(response => response.json())
 .then(data => {
     // Access the posts data
     const posts = data.data.publication.posts.edges;
     // console.log('Posts:', posts); // uncomment so you can see what you pulled in and have it output to console 

     // Have javascript map through posts and create the HTML divs
     // and pull in the data from the API into the tags
     const blogPostHTML = posts.map(post => {
         return `
             <div class="list_item item1">
                 <img src="${post.node.coverImage.url}" alt="${post.node.title}" />
                 <div class="list_detail">
                     <h3>${post.node.title}</h3>
                     <p>${post.node.brief}</p>
                     <a href="${post.node.url}" target="_blank">Read more</a>
                 </div>
             </div>
         `;
     });

     // Join (aka insert) divs into the index.html file at id, postsContainer
     postsContainer.innerHTML = blogPostHTML.join('');  
 });

Uncomment the console.log line above to see the data (or errors) in your terminal window when you run Node. Then run Node on your file:
```
 $ node blog.js
```

This is a HTML snippet where the divs will be inserted:

 <section id="lab">
     <div class="container  list_container">
         <div class="section_title lab_title">
             <h2>Lab</h2>
        </div>
        <h3 class="lab_title subsection_title">ARTICLES</h3>
        <div id="postsContainer" class="list_collection blog">
             <!-- 
                  This div will be programmatically filled with data 
                  from Hashnode's API & HTML generated by my script
              -->
        </div>
     </div>
 </section>

Hopefully you found this tutorial helpful.

Happy coding, friends!

The Updated Hashnode API Setup Tutorial

That should be in their documentation 😜

How To Do It