Hashnode is a great platform to get started blogging by providing you hashnode sub-domain and also give option to add your own custom domain like I have this one. Suppose you are creating a web app where you want to display blogs that you have written on hashnode. It would be cumbersome to copy-paste the same blog along with certain alignment and images. Hashnode not only provides a blogging interface to write blog it also has its excellent Developer API
which you can use to fetch the blogs on your web app. In this blog, we will use Hashnode's API to fetch your blogs and display them on the Ember.js application.Lets get started.
Setting up the project:
- First of all, we should have one ember app if not then let's create one
ember new show-hashnode-blogs
. - Hashnode's has graphql api for querying and fetching data. Ember does not have direct support for graphql so we will install graphql-client for ember.
ember-apollo-client
is the client we are going to install.- Go to the root directory of the project and run
ember install ember-apollo-client
. ember-apollo-client
requires you to register the endpoint API from which you want to fetch data.- Go to
config/environment.js
file and add following line withinENV
object.let ENV = { ... apollo: { apiURL: 'https://api.hashnode.com/' }, ... }
- Now, we have added the endpoint lets add query to fetch all blogs.
Adding the client-graphql query:
- The graphql query should be written in a file with
.graphql
extension. - We will create a folder
gql/queries
inside app folder where we will add our first.graphql
file. - We will name it as
app/gql/queries/blogs.graphql
. It's purpose will be to fetch all blogs. - Add the following code
query($page: Int!){ user(username:"your-hashnode-username") { publication { posts(page: $page) { title brief slug cuid coverImage } } } }
- This query is going to return blogs of specified username with provided fields.
Calling the query:
- Now, the query is ready we need to it.
- Create a route
app/routes/application.js
and import the created graphql file in it.
import Route from '@ember/routing/route';
import { queryManager } from "ember-apollo-client";
import allBlogQuery from "show-hashnode-blogs/gql/queries/blogs.graphql";
export default class ApplicationRoute extends Route {
@queryManager apollo;
async model() {
const result = await this.apollo.watchQuery({ query: allBlogQuery, { page: 0 }, "user");
return result.publication.posts;
}
}
- We make query to the api with
watchQuery
method which take the importedgraphql
query along with pagination option andmodel
to fetch.
Rendering the blogs:
- We are now able to fetch blogs in the model hook. The next step is we are going to display it in view.
This is pretty straightforward we are just going to loop over the model hook and display as per style we want.
{{#each @model as |post|}} <section> <div class="content"> <div class="inner"> <h2>{{post.title}}</h2> <p>{{post.brief}}</p> </div> </div> </section> {{/each}}
Similarly, you can create
graphql
file for fetching individual blog i.e detail version of the blog with following query and call it on detail route of the blog.
query($slug: String!) {
post(slug: $slug, hostname:"username") {
title,
slug,
cuid,
coverImage,
content,
contentMarkdown,
tags {
name
}
}
}
I hope you like this blog and find it useful. If you have any questions then please comment below.