Displaying Your Hashnode Blog Articles on your Website [Next.js, Apollo graphql]
Published: 2024-01-19 12:53:57

---
title: Displaying Your Hashnode Blog Articles on your Website [Next.js, Apollo graphql]
published: true
date: 2022-07-21 04:51:25 UTC
tags: 
canonical_url: https://cherylm.hashnode.dev/displaying-your-hashnode-blog-articles-on-your-website
---

# 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](https://nextjs.org/docs)

```
yarn create next-app

```

run the app with

```
yarn dev

```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658328881112/FApWUhGlr.png)

Install apollo client and graphql

```
yarn add @apollo/client graphql

```

# The hashnode API

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658372247673/dykEvCYk7.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1658373135744/kiQe9G_0a.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()](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)

```
// 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1658377459442/e_5fxCKRQ.png)

# Useful Links

[Get started with Apollo Client](https://www.apollographql.com/docs/react/get-started)[Hashnode API Playground](https://api.hashnode.com/)[Introduction to graphQL](https://graphql.org/learn/)[Next.js - Getting Started](https://nextjs.org/docs)