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

1. 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

2. 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
        }
      }
    }
  }
}

3. 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('');  
    });
   

4. 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
   

5. 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!