Pagination Integration with Strapi, Angular and Graphql

I am going to explain you step by step guide about how to integrate the pagination in your angular application where backend is strapi headless CMS (Strapi + Graphql), So lets start.

First Make the changes in articles.js, file path should be "PROJECT_FOLDER\src\app\apollo\queries\article\articles.js"

import gql from "graphql-tag";

const ARTICLES_QUERY = gql`
  query Articles($start:Int, $limit:Int) {
    articles(start:$start, limit:$limit, sort:"published_at:desc") {
      id
      title,
      content,
      publisher,
      published_at,    
      slug,  
      category {
        id
        name
      }
      image {
        url
      }
    }
  }
`;

export default ARTICLES_QUERY;

Next create a new js file "count_articles.js to this path and paste the below content.

import gql from "graphql-tag";

const COUNT_ARTICLES_QUERY = gql`
query {
    articlesConnection {
      aggregate {
        totalCount
      }
    }
  }
`;

export default COUNT_ARTICLES_QUERY;

I have used ngx-pagination package. So please install the packages by running below command.

npm i ngx-pagination

Create a new component Articles

ng g c articles

And paste the blow code to newly created "articles.component.ts"

import { Component, OnInit } from "@angular/core";
import { Apollo } from "apollo-angular";
import ARTICLES_QUERY from "../apollo/queries/article/articles";
import COUNT_ARTICLES_QUERY from "../apollo/queries/article/count_articles"
import { Subscription } from "rxjs";

import { environment } from '../../environments/environment';

@Component({
  selector: "app-articles",
  templateUrl: "./articles.component.html",
  styleUrls: ["./articles.component.css"]
})
export class ArticlesComponent implements OnInit {
  data: any = {};
  imagePath = environment.imagePath;
  limit: number = 5;
  offset: number = 1;
  totalArticles:number;
  loading = true;
  errors: any;
  articles: any = [];
  private queryArticles: Subscription;
  private queryCountArticles: Subscription;

  constructor(private apollo: Apollo) { }

  ngOnInit() {

    this.queryCountArticles = this.apollo
    .watchQuery({
      query: COUNT_ARTICLES_QUERY      
    })
    .valueChanges.subscribe(result => {
      this.totalArticles = Object.values(result)[0]['articlesConnection']['aggregate']['totalCount'];

    });

    this.getAllArticles(1);
  }



  getAllArticles( offset:number ) {
    this.loading = true;
    this.offset = offset
    let start = (this.offset - 1) * this.limit
    this.queryArticles = this.apollo
      .watchQuery({
        query: ARTICLES_QUERY,
        variables: {
          start: start,
          limit: this.limit
        }
      })
      .valueChanges.subscribe(result => {
        this.data = result.data;
        this.articles = this.data.articles;
        this.loading = result.loading;
        this.errors = result.errors;
      });
  }

  ngOnDestroy() {
    this.queryArticles.unsubscribe();
   this.queryCountArticles.unsubscribe();
  }
}

Next open the article compent HTML file and make the below changes.

articles.component.html

<article
    *ngFor="let article of articles|  paginate: { id: 'server', itemsPerPage: limit, currentPage: offset, totalItems: totalArticles }">
    <div class="imgWrap">
    <a routerLink="/article/{{ article.slug }}" routerLinkActive="active"><img
        src="{{imagePath}}{{ article.image[0].url }}" alt="" alt="{{ article.title }}"></a>
    </div>
    <h2>{{ article.title }}</h2>      
    <p> {{ article.content | truncate:100 }}</p>
</article>

finally run your application and go to the articles route URL and you will see the pagination in action.