feat: implement products infinite loading

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

lib/shopify/index.ts

@@ -361,12 +361,14 @@ export async function getCollectionProducts({
   collection,
   reverse,
   sortKey,
-  filters
+  filters,
+  after
 }: {
   collection: string;
   reverse?: boolean;
   sortKey?: string;
   filters?: Array<object>;
+  after?: string;
 }): Promise<{ products: Product[]; filters: Filter[]; pageInfo: PageInfo }> {
   const res = await shopifyFetch<ShopifyCollectionProductsOperation>({
     query: getCollectionProductsQuery,
@@ -375,7 +377,8 @@ export async function getCollectionProducts({
       handle: collection,
       reverse,
       sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey,
-      filters
+      filters,
+      after
     }
   });
 
@@ -501,25 +504,30 @@ export async function getProductRecommendations(productId: string): Promise<Prod
 export async function getProducts({
   query,
   reverse,
-  sortKey
+  sortKey,
+  after
 }: {
   query?: string;
   reverse?: boolean;
   sortKey?: string;
-}): Promise<Product[]> {
+  after?: string;
+}): Promise<{ products: Product[]; pageInfo: PageInfo }> {
   const res = await shopifyFetch<ShopifyProductsOperation>({
     query: getProductsQuery,
     tags: [TAGS.products],
     variables: {
       query,
       reverse,
-      sortKey
+      sortKey,
+      after
     }
   });
-
-  return reshapeProducts(removeEdgesAndNodes(res.body.data.products));
+  const pageInfo = res.body.data.products.pageInfo;
+  return {
+    products: reshapeProducts(removeEdgesAndNodes(res.body.data.products)),
+    pageInfo
+  };
 }
-
 // This is called from `app/api/revalidate.ts` so providers can control revalidation logic.
 export async function revalidate(req: NextRequest): Promise<NextResponse> {
   console.log(`Receiving revalidation request from Shopify.`);

lib/shopify/queries/collection.ts

@@ -42,14 +42,14 @@ export const getCollectionProductsQuery = /* GraphQL */ `
     $sortKey: ProductCollectionSortKeys
     $reverse: Boolean
     $filters: [ProductFilter!]
+    $after: String
   ) {
     collection(handle: $handle) {
-      products(sortKey: $sortKey, filters: $filters, reverse: $reverse, first: 100) {
+      products(sortKey: $sortKey, filters: $filters, reverse: $reverse, first: 50, after: $after) {
         edges {
           node {
             ...product
           }
-          cursor
         }
         filters {
           id

lib/shopify/queries/product.ts

@@ -10,13 +10,18 @@ export const getProductQuery = /* GraphQL */ `
 `;
 
 export const getProductsQuery = /* GraphQL */ `
-  query getProducts($sortKey: ProductSortKeys, $reverse: Boolean, $query: String) {
-    products(sortKey: $sortKey, reverse: $reverse, query: $query, first: 100) {
+  query getProducts($sortKey: ProductSortKeys, $reverse: Boolean, $query: String, $after: String) {
+    products(sortKey: $sortKey, reverse: $reverse, query: $query, first: 50, after: $after) {
       edges {
         node {
           ...product
         }
       }
+      pageInfo {
+        endCursor
+        startCursor
+        hasNextPage
+      }
     }
   }
   ${productFragment}

lib/shopify/types.ts

@@ -240,6 +240,7 @@ export type ShopifyCollectionProductsOperation = {
     reverse?: boolean;
     sortKey?: string;
     filters?: Array<object>;
+    after?: string;
   };
 };
 
@@ -292,12 +293,15 @@ export type ShopifyProductRecommendationsOperation = {
 
 export type ShopifyProductsOperation = {
   data: {
-    products: Connection<ShopifyProduct>;
+    products: Connection<ShopifyProduct> & {
+      pageInfo: PageInfo;
+    };
   };
   variables: {
     query?: string;
     reverse?: boolean;
     sortKey?: string;
+    after?: string;
   };
 };