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
run the app with
yarn dev
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
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
}
}
}
}
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>
)
}
Useful Links
Get started with Apollo ClientHashnode API PlaygroundIntroduction to graphQLNext.js - Getting Started
Top comments (0)