Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-source-hashnode

Build Gatsby websites with Hashnode as a data source

npm npm-beta npm-total GitHub Repo stars semantic-release Commitizen friendly

Highlights

  • Retrieves user posts
  • Calculates estimated reading time
  • Fetches user details
  • Converts images for gatsby-plugin-image
  • Supported versions
    • Gatsby v4 ( @latest tag)
    • Gatsby v3 (@release-2 tag)

Install

release workflow test workflow

npm install gatsby-source-hashnode

How to use

Configure the plugin in gatsby-config.js:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-hashnode",
      options: {
        username: "<HASHNODE_USERNAME>",
      },
    },
  ],
};

How to query

Get user posts

{
  allHashNodePost {
    edges {
      node {
        brief # "In this article..."
        coverImage {
          # File node (to be used with gatsby-plugin-image)
          childImageSharp {
            gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
          }
          # OR
          # url // "https://cdn.hashnode.com/...
        }
        slug # "my-great-article"
        title # "My Great Article"
      }
    }
  }
}

Get post’s reading time

(With the kind help of reading-time)

{
  allHashNodePost {
    edges {
      node {
        title
        readingTime {
          minutes # 2
          text # "2 min read"
          time # 120000
          words # 100
        }
      }
    }
  }
}

Get user details

{
  allHashNodeUser {
    edges {
      node {
        _id
        blogHandle # "userhandle1"
        coverImage # "https:/...
        dateJoined # "2014-01-01T01:00:00.000Z"
        isDeactivated # false
        isEvangelist # true
        location # "Canada"
        name # "First last"
        numFollowers # 503
        numFollowing # 14
        numPosts # 50
        numReactions # 95
        photo # "https:/...
        publicationDomain # "blog.mydomain.."
        tagline # "I do stuff"
        username # "username1"
      }
    }
  }
}
© 2024 Gatsby, Inc.