Angular: Leveraging Hashnode's GraphQL API

In this article, I am going to cover taking an Angular project, such as your portfolio site, and connecting it to Hashnode's GraphQL API to display posts.

Why in the world would I do this?

If you have a portfolio site that is already displaying tons of content about yourself or your recent work, you may want to go ahead and add links to your great Hashnode content.

At this point, you might be thinking to yourself, "Well, I already have my blog posts on my website in the form of some links."

If you have links that you manually drop onto your site when you post, it gets tedious.

In comes the API

So, what if there existed a way to take your Hashnode posts and automatically display them on my Angular site?

Short answer: There is! 🎊🎊

In mid-2019 Hashnode introduced the public beta of their GraphQL API.

To get started, go to api.hashnode.com, where you'll see the GraphQL playground.

On the right side, you'll see a "Docs" button. Clicking on that will yield all of the documentation related to the Hashnode GraphQL API.

Throw in some Angular

If you're working with Angular, fetching your Hashnode posts can be done in less than 25 lines of code once you have added Apollo Angular to your project.

Adding Apollo Angular to your Project

Apollo Angular can be added to your project by running the following command:

ng add apollo-angular

When prompted for the GraphQL Endpoint, enter the following uri: api.hashnode.com

Done! That is all that is required to add Apollo Angular to your project.

Querying your Posts

I generally place my GraphQL queries in Angular services, so I have laid out a service below that will fetch posts for the specified user. Keep in mind that this is not a GraphQL article, and only provides a fast way to query data specifically for your Hashnode posts.

import { Injectable } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class AppBlogService {
  constructor(private apollo: Apollo) {}

  getLatestPosts$(userName: string, page: number): Observable<any> {
    return this.apollo
      .watchQuery({
        query: gql`
          {
            user(username: "${userName}") {
              publication {
                posts(page: ${page}) {
                  title
                  brief
                  slug
                  coverImage
                }
              }
            }
          }
        `,
      })
      .valueChanges.pipe(
        map((res) => {
          if (res.data) {
            return (res.data as any).user.publication.posts;
          }
          return [];
        }),
        catchError(() => of([]))
      );
  }
}

The above query yields an array where each post object consists of a title, brief, slug, and coverImage.

• title: The title of the post.
• brief: The subtitle or automatically generated summary of the post.
• slug: The part of the post uri after your blog's defined root.
• coverageImage: The uri of the image representing the post.

Code Example

My current website relies on the GraphQL API to display the content under "Recent Posts" on my home page.

If you would like something similar on your website, check out this StackBlitz.