GraphQL API: Updated getPaginatedArticle method to use newer pagina…

…tion response structure. (#239)
pantheon-systems · Jul 17, 2024 · d2ac38d · d2ac38d
1 parent 8208018
commit d2ac38d
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 43 deletions.
diff --git a/packages/core/src/helpers/articles.ts b/packages/core/src/helpers/articles.ts
@@ -14,9 +14,10 @@ import {
 import {
   Article,
   ArticleSortField,
-  ArticleV2Response,
+  ArticleSummaryResponse,
   ArticleWithoutContent,
   ContentType,
+  PageInfo,
   PaginatedArticle,
   PublishingLevel,
   SortOrder,
@@ -38,7 +39,7 @@ export interface ArticlePaginatedQueryArgs {
   sortOrder?: keyof typeof SortOrder;
   metadataFilters?: { [key: string]: unknown };
   pageSize?: number;
-  cursor?: number;
+  cursor?: string;
 }
 
 type FilterableFields = "body" | "tag" | "title";
@@ -89,7 +90,7 @@ export function convertSearchParamsToGQL(
 
 function fetchEmptyPage(
   total: number,
-  cursor: number,
+  cursor: string,
 ): () => Promise<PaginatedArticle> {
   return async () => ({
     data: [],
@@ -125,23 +126,26 @@ export async function getPaginatedArticles(
         contentType,
       },
     });
-    const articles = response.data.articles as ArticleWithoutContent[];
-    const { total, cursor } = response.data.extensions?.pagination || {};
+    const responseData = response.data.articlesv3;
+    const { articles, pageInfo } = responseData as {
+      articles: ArticleWithoutContent[];
+      pageInfo: PageInfo;
+    };
 
     return {
       data: articles,
-      totalCount: total,
-      cursor,
+      totalCount: pageInfo.totalCount,
+      cursor: pageInfo.nextCursor,
       fetchNextPage:
-        cursor && articles.length > 0
+        pageInfo.nextCursor && articles.length > 0
           ? () =>
               getPaginatedArticles(
                 client,
-                { ...args, cursor },
+                { ...args, cursor: pageInfo.nextCursor },
                 searchParams,
                 includeContent,
               )
-          : fetchEmptyPage(total, cursor),
+          : fetchEmptyPage(pageInfo.totalCount, pageInfo.nextCursor),
     };
   } catch (e) {
     handleApolloError(e);
@@ -165,7 +169,7 @@ export async function getArticlesWithSummary(
   searchParams?: ArticleSearchArgs,
   withContent?: boolean,
   withSummary?: boolean,
-): Promise<ArticleV2Response> {
+): Promise<ArticleSummaryResponse> {
   try {
     const {
       contentType: requestedContentType,
@@ -191,7 +195,7 @@ export async function getArticlesWithSummary(
       },
     });
 
-    return response.data.articlesv2;
+    return response.data.articlesv3;
   } catch (e) {
     handleApolloError(e);
   }

diff --git a/packages/core/src/lib/gql.ts b/packages/core/src/lib/gql.ts
@@ -68,13 +68,13 @@ export function generateListArticlesGQL({
     $pageSize: Int
     $sortBy: ArticleSortField
     $sortOrder: SortOrder
-    $cursor: Float
+    $cursor: String
     $metadataFilters: String
     $contentType: ContentType
     $publishingLevel: PublishingLevel
     $filter: ArticleFilterInput
   ) {
-    articlesv2(
+    articlesv3(
       pageSize: $pageSize
       sortBy: $sortBy
       sortOrder: $sortOrder
@@ -129,13 +129,13 @@ export const LIST_PAGINATED_ARTICLES_QUERY = gql`
     $pageSize: Int
     $sortBy: ArticleSortField
     $sortOrder: SortOrder
-    $cursor: Float
+    $cursor: String
     $contentType: ContentType
     $publishingLevel: PublishingLevel
     $filter: ArticleFilterInput
     $metadataFilters: String
   ) {
-    articles(
+    articlesv3(
       pageSize: $pageSize
       sortBy: $sortBy
       sortOrder: $sortOrder
@@ -145,17 +145,23 @@ export const LIST_PAGINATED_ARTICLES_QUERY = gql`
       filter: $filter
       metadataFilters: $metadataFilters
     ) {
-      id
-      title
-      siteId
-      slug
-      tags
-      metadata
-      publishedDate
-      publishingLevel
-      contentType
-      updatedAt
-      previewActiveUntil
+      articles {
+        id
+        title
+        siteId
+        slug
+        tags
+        metadata
+        publishedDate
+        publishingLevel
+        contentType
+        updatedAt
+        previewActiveUntil
+      }
+      pageInfo {
+        totalCount
+        nextCursor
+      }
     }
   }
 `;
@@ -165,13 +171,13 @@ export const LIST_PAGINATED_ARTICLES_QUERY_W_CONTENT = gql`
     $pageSize: Int
     $sortBy: ArticleSortField
     $sortOrder: SortOrder
-    $cursor: Float
+    $cursor: String
     $contentType: ContentType
     $publishingLevel: PublishingLevel
     $filter: ArticleFilterInput
     $metadataFilters: String
   ) {
-    articles(
+    articlesv3(
       pageSize: $pageSize
       sortBy: $sortBy
       sortOrder: $sortOrder
@@ -181,17 +187,23 @@ export const LIST_PAGINATED_ARTICLES_QUERY_W_CONTENT = gql`
       filter: $filter
       metadataFilters: $metadataFilters
     ) {
-      id
-      title
-      siteId
-      tags
-      metadata
-      publishedDate
-      publishingLevel
-      contentType
-      content
-      updatedAt
-      previewActiveUntil
+      articles {
+        id
+        title
+        siteId
+        tags
+        metadata
+        publishedDate
+        publishingLevel
+        contentType
+        content
+        updatedAt
+        previewActiveUntil
+      }
+      pageInfo {
+        totalCount
+        nextCursor
+      }
     }
   }
 `;

diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
@@ -15,15 +15,19 @@ export interface Article {
   snippet?: string | null;
 }
 
-export type ArticleV2Response = {
+export type ArticleSummaryResponse = {
   articles: Omit<Article, "content">[];
   summary: string;
 };
+export type PageInfo = {
+  totalCount: number;
+  nextCursor: string;
+};
 export type ArticleWithoutContent = Omit<Article, "content">;
 export type PaginatedArticle = {
   data: ArticleWithoutContent[];
   totalCount: number;
-  cursor: number;
+  cursor: string;
   fetchNextPage: () => Promise<PaginatedArticle>;
 };
 

diff --git a/packages/react-sdk/src/hooks/use-pagination.ts b/packages/react-sdk/src/hooks/use-pagination.ts
@@ -6,7 +6,7 @@ import {
 import { useEffect, useState } from "react";
 
 interface Props {
-  cursor?: number;
+  cursor?: string;
   pageSize: number;
   initialArticles?: PaginatedArticle[] | ArticleWithoutContent[];
 }