My Blog

Displaying Your Hashnode Blog Articles on your Website

using next.js and graphql

Cheryl M's photo
Cheryl M
·

2 min read

Set up the next.js App and apollo graphql client

This is a very basic example, and the full code can be found here -
codesandbox: codesandbox.io/s/hashnode-api-sandbox-xyttqf
github: github.com/cherylli/nextjs-apollo-hashnode

Create a new next.js app 

yarn create next-app

run the app with 

yarn dev

image.png

Install apollo client and graphql

yarn add @apollo/client graphql

The hashnode API

We can go to api.hashnode.com to check the docs, schema and test out queries

image.png

This is the query we use to pull the title, the slug, and the brief (an extract of the content), for each post I published, passing my hashnode username into user. 

query {
  user(username: "cherylm"){
    publication{
      posts(page:0){
        slug
        title
        brief
      }      
    }
  }
}

image.png

Adding Apollo Client Config and Fetching Data

Add a new file for apollo client configuration, lib/apollo-client.js

// lib/apollo-client.js
import {ApolloClient,InMemoryCache} from '@apollo/client';

const apolloClient = new ApolloClient({
    uri: 'https://api.hashnode.com/',
    cache: new InMemoryCache()
})

export default apolloClient;

Then in pages/index.js, import graphql and apollo client

import apolloClient from '../lib/apollo-client';
import {gql} from '@apollo/client';

Posts data is fetched in getStaticProps and passed into the index page via props, using getStaticProps()

// pages/index.js
export async function getStaticProps(){
  const { data } = await apolloClient.query({
    query: gql`
      query Posts {
        user(username: "cherylm") {
          username
          publication{
            posts(page:0){
              slug
              title
              brief
            }
          }
        }
      }
    `
  });
    return {
        props: {
          posts: data.user.publication.posts,
          username: data.user.username
        }
    }
}

Now, we can populate the page with posts from props and iterate using array.map

// pages/index.js
export default function Home({posts, username}) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Hashnode API Demo</title>
        <meta name="description" content="Hashnode API" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          My Hashnode Blog
        </h1>

        <p className={styles.description}>
          displaying my hashnode blog posts using the Hashnode API (graphql)
        </p>

        <div className={styles.grid}>
          {posts.map(post => (
          <a key={post.slug}
             target="_blank"
             rel="noopener noreferrer"
             href={`https://${username}.hashnode.dev/${post.slug}`}
             className={styles.card}>
            <h2>{post.title}</h2>
            <p>{post.brief}</p>
          </a>
          ))}
        </div>

      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

image.png

Useful Links

Get started with Apollo Client Hashnode API Playground Introduction to graphQL Next.js - Getting Started

Next.jsGraphQLHashnode