DEV Community

Cheryl M
Cheryl M

Posted on • Originally published at cherylm.hashnode.dev on

Displaying Your Hashnode Blog Articles on your Website [Next.js, Apollo graphql]

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: https://codesandbox.io/s/hashnode-api-sandbox-xyttqf

github: https://github.com/cherylli/nextjs-apollo-hashnode

Create a new next.js app

yarn create next-app

Enter fullscreen mode Exit fullscreen mode

run the app with

yarn dev

Enter fullscreen mode Exit fullscreen mode

image.png

Install apollo client and graphql

yarn add @apollo/client graphql

Enter fullscreen mode Exit fullscreen mode

The hashnode API

We can go to https://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
      }      
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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>
  )
}

Enter fullscreen mode Exit fullscreen mode

image.png

Useful Links

Get started with Apollo ClientHashnode API PlaygroundIntroduction to graphQLNext.js - Getting Started

Top comments (0)