Fetching data from Graphql API in Emberjs App

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 within ENV 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 imported graphql query along with pagination option and model 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
    }
  }
}