feat: provide pagination for users with js disabled (#13)

* chore: add a Pagination component

* chore: add blog pages

* chore: fallback to page number based navigation if JS disabled

* chore: update translation

1 files changed, 28 insertions, 1 deletions

diff --git a/src/services/graphql/queries.ts b/src/services/graphql/queries.ts
index e56590f..8dd8563 100644
--- a/src/services/graphql/queries.ts
+++ b/src/services/graphql/queries.ts
@@ -1,6 +1,11 @@
 import { Slug } from '@ts/types/app';
 import { Article, PostBy, TotalArticles } from '@ts/types/articles';
-import { AllPostsSlug, PostsList, RawPostsList } from '@ts/types/blog';
+import {
+  AllPostsSlug,
+  LastPostCursor,
+  PostsList,
+  RawPostsList,
+} from '@ts/types/blog';
 import { Comment, CommentsByPostId } from '@ts/types/comments';
 import {
   AllTopics,
@@ -510,3 +515,25 @@ export const getAllThematics = async (): Promise<ThematicPreview[]> => {
   const response = await fetchApi<AllThematics>(query, null);
   return response.thematics.nodes;
 };
+
+export const getEndCursor = async ({
+  first = 10,
+}: {
+  first: number;
+}): Promise<string> => {
+  const query = gql`
+    query EndCursorAfter($first: Int) {
+      posts(first: $first) {
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  `;
+
+  const variables = { first };
+  const response = await fetchApi<LastPostCursor>(query, variables);
+
+  return response.posts.pageInfo.endCursor;
+};