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.