fix(SW-190): added cache for content page query and added breadcrumbs fetching for content page

components/MyPages/Breadcrumbs/index.tsx

@@ -11,6 +11,7 @@ export default async function Breadcrumbs() {
   if (!breadcrumbs?.length) {
     return null
   }
+
   const homeBreadcrumb = breadcrumbs.shift()
   return (
     <nav className={styles.breadcrumbs}>

lib/graphql/Fragments/Refs/ContentPage/Breadcrumbs.graphql

@@ -0,0 +1,38 @@
+#import "../System.graphql"
+
+fragment ContentPageBreadcrumbsRefs on ContentPage {
+  web {
+    breadcrumbs {
+      title
+      parentsConnection {
+        edges {
+          node {
+            ... on ContentPage {
+              web {
+                breadcrumbs {
+                  title
+                }
+              }
+              system {
+                ...System
+              }
+            }
+            ... on LoyaltyPage {
+              web {
+                breadcrumbs {
+                  title
+                }
+              }
+              system {
+                ...System
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  system {
+    ...System
+  }
+}

lib/graphql/Fragments/Refs/ContentPage/ContentPage.graphql

@@ -1,4 +1,4 @@
-#import "./System.graphql"
+#import "../System.graphql"
 
 fragment ContentPageRef on ContentPage {
   system {

lib/graphql/Query/AccountPage.graphql

@@ -3,7 +3,7 @@
 #import "../Fragments/MyPages/AccountPage/AccountPageContentTextContent.graphql"
 
 #import "../Fragments/Refs/MyPages/AccountPage.graphql"
-#import "../Fragments/Refs/ContentPage.graphql"
+#import "../Fragments/Refs/ContentPage/ContentPage.graphql"
 #import "../Fragments/Refs/LoyaltyPage/LoyaltyPage.graphql"
 #import "../Fragments/Refs/System.graphql"
 

lib/graphql/Query/BreadcrumbsContentPage.graphql

@@ -0,0 +1,21 @@
+#import "../Fragments/ContentPage/Breadcrumbs.graphql"
+#import "../Fragments/Refs/ContentPage/Breadcrumbs.graphql"
+
+query GetContentPageBreadcrumbs($locale: String!, $url: String!) {
+  all_content_page(locale: $locale, where: { url: $url }) {
+    items {
+      ...ContentPageBreadcrumbs
+      system {
+        uid
+      }
+    }
+  }
+}
+
+query GetContentPageBreadcrumbsRefs($locale: String!, $url: String!) {
+  all_content_page(locale: $locale, where: { url: $url }) {
+    items {
+      ...ContentPageBreadcrumbsRefs
+    }
+  }
+}

lib/graphql/Query/ContentPage.graphql

@@ -1,5 +1,3 @@
-#import "../Fragments/ContentPage/Breadcrumbs.graphql"
-
 query GetContentPage($locale: String!, $uid: String!) {
   content_page(uid: $uid, locale: $locale) {
     title
@@ -8,7 +6,6 @@ query GetContentPage($locale: String!, $uid: String!) {
       preamble
     }
     hero_image
-    ...ContentPageBreadcrumbs
     system {
       uid
       created_at

lib/graphql/Query/LoyaltyPage.graphql

@@ -5,13 +5,12 @@
 #import "../Fragments/Blocks/Refs/Card.graphql"
 #import "../Fragments/Blocks/Refs/LoyaltyCard.graphql"
 
-#import "../Fragments/LoyaltyPage/Breadcrumbs.graphql"
 #import "../Fragments/PageLink/AccountPageLink.graphql"
 #import "../Fragments/PageLink/ContentPageLink.graphql"
 #import "../Fragments/PageLink/LoyaltyPageLink.graphql"
 
 #import "../Fragments/Refs/MyPages/AccountPage.graphql"
-#import "../Fragments/Refs/ContentPage.graphql"
+#import "../Fragments/Refs/ContentPage/ContentPage.graphql"
 #import "../Fragments/Refs/LoyaltyPage/LoyaltyPage.graphql"
 #import "../Fragments/Refs/System.graphql"
 
@@ -169,7 +168,6 @@ query GetLoyaltyPage($locale: String!, $uid: String!) {
         }
       }
     }
-    ...LoyaltyPageBreadcrumbs
     system {
       uid
       created_at

lib/graphql/Query/NavigationMyPages.graphql

@@ -2,7 +2,7 @@
 #import "../Fragments/PageLink/ContentPageLink.graphql"
 #import "../Fragments/PageLink/LoyaltyPageLink.graphql"
 #import "../Fragments/Refs/MyPages/AccountPage.graphql"
-#import "../Fragments/Refs/ContentPage.graphql"
+#import "../Fragments/Refs/ContentPage/ContentPage.graphql"
 #import "../Fragments/Refs/LoyaltyPage/LoyaltyPage.graphql"
 #import "../Fragments/Refs/System.graphql"
 

server/routers/contentstack/breadcrumbs/output.ts

@@ -57,7 +57,15 @@ export const validateLoyaltyPageBreadcrumbsRefsContentstackSchema = z.object({
 })
 
 export type GetLoyaltyPageBreadcrumbsRefsData = z.infer<
-  typeof validateLoyaltyPageBreadcrumbsContentstackSchema
+  typeof validateLoyaltyPageBreadcrumbsRefsContentstackSchema
+>
+
+export const validateContentPageBreadcrumbsRefsContentstackSchema = z.object({
+  all_content_page: breadcrumbsRefsItems,
+})
+
+export type GetContentPageBreadcrumbsRefsData = z.infer<
+  typeof validateContentPageBreadcrumbsRefsContentstackSchema
 >
 
 const page = z.object({
@@ -110,3 +118,11 @@ export const validateLoyaltyPageBreadcrumbsContentstackSchema = z.object({
 export type GetLoyaltyPageBreadcrumbsData = z.infer<
   typeof validateLoyaltyPageBreadcrumbsContentstackSchema
 >
+
+export const validateContentPageBreadcrumbsContentstackSchema = z.object({
+  all_content_page: breadcrumbsItems,
+})
+
+export type GetContentPageBreadcrumbsData = z.infer<
+  typeof validateContentPageBreadcrumbsContentstackSchema
+>

server/routers/contentstack/breadcrumbs/query.ts

@@ -1,3 +1,7 @@
+import {
+  GetContentPageBreadcrumbs,
+  GetContentPageBreadcrumbsRefs,
+} from "@/lib/graphql/Query/BreadcrumbsContentPage.graphql"
 import {
   GetLoyaltyPageBreadcrumbs,
   GetLoyaltyPageBreadcrumbsRefs,
@@ -9,10 +13,14 @@ import {
 import { contentstackExtendedProcedureUID, router } from "@/server/trpc"
 
 import {
+  type GetContentPageBreadcrumbsData,
+  type GetContentPageBreadcrumbsRefsData,
   type GetLoyaltyPageBreadcrumbsData,
   type GetLoyaltyPageBreadcrumbsRefsData,
   type GetMyPagesBreadcrumbsData,
   type GetMyPagesBreadcrumbsRefsData,
+  validateContentPageBreadcrumbsContentstackSchema,
+  validateContentPageBreadcrumbsRefsContentstackSchema,
   validateLoyaltyPageBreadcrumbsContentstackSchema,
   validateLoyaltyPageBreadcrumbsRefsContentstackSchema,
   validateMyPagesBreadcrumbsContentstackSchema,
@@ -76,6 +84,54 @@ async function getLoyaltyPageBreadcrumbs(variables: Variables) {
   )
 }
 
+async function getContentPageBreadcrumbs(variables: Variables) {
+  const refsResponse = await getRefsResponse<GetContentPageBreadcrumbsRefsData>(
+    GetContentPageBreadcrumbsRefs,
+    variables
+  )
+
+  const validatedRefsData =
+    validateContentPageBreadcrumbsRefsContentstackSchema.safeParse(
+      refsResponse.data
+    )
+
+  if (!validatedRefsData.success) {
+    console.error(
+      `Failed to validate Contentpage Breadcrumbs Refs - (url: ${variables.url})`
+    )
+    console.error(validatedRefsData.error)
+    return null
+  }
+
+  const tags = getTags(validatedRefsData.data.all_content_page, variables)
+
+  const response = await getResponse<GetContentPageBreadcrumbsData>(
+    GetContentPageBreadcrumbs,
+    variables,
+    tags
+  )
+
+  if (!response.data.all_content_page.items[0].web?.breadcrumbs?.title) {
+    return null
+  }
+
+  const validatedBreadcrumbsData =
+    validateContentPageBreadcrumbsContentstackSchema.safeParse(response.data)
+
+  if (!validatedBreadcrumbsData.success) {
+    console.error(
+      `Failed to validate Contentpage Breadcrumbs Data - (url: ${variables.url})`
+    )
+    console.error(validatedBreadcrumbsData.error)
+    return null
+  }
+
+  return getBreadcrumbs(
+    validatedBreadcrumbsData.data.all_content_page.items[0],
+    variables.locale
+  )
+}
+
 async function getMyPagesBreadcrumbs(variables: Variables) {
   const refsResponse = await getRefsResponse<GetMyPagesBreadcrumbsRefsData>(
     GetMyPagesBreadcrumbsRefs,
@@ -133,6 +189,8 @@ export const breadcrumbsQueryRouter = router({
     switch (ctx.contentType) {
       case PageTypeEnum.accountPage:
         return await getMyPagesBreadcrumbs(variables)
+      case PageTypeEnum.contentPage:
+        return await getContentPageBreadcrumbs(variables)
       case PageTypeEnum.loyaltyPage:
         return await getLoyaltyPageBreadcrumbs(variables)
       default:

server/routers/contentstack/contentPage/query.ts

@@ -4,6 +4,7 @@ import { request } from "@/lib/graphql/request"
 import { notFound } from "@/server/errors/trpc"
 import { contentstackExtendedProcedureUID, router } from "@/server/trpc"
 
+import { generateTag } from "@/utils/generateTag"
 import { makeImageVaultImage } from "@/utils/imageVault"
 
 import { validateContentPageSchema } from "./output"
@@ -21,10 +22,17 @@ export const contentPageQueryRouter = router({
   get: contentstackExtendedProcedureUID.query(async ({ ctx }) => {
     const { lang, uid } = ctx
 
-    const response = await request<ContentPageDataRaw>(GetContentPage, {
+    // TODO: Refs request should be done when adding more data to this query
+    // which has references to other pages.
+
+    const response = await request<ContentPageDataRaw>(
+      GetContentPage,
+      {
         locale: lang,
         uid,
-    })
+      },
+      { tags: [generateTag(lang, uid)] }
+    )
 
     if (!response.data) {
       throw notFound(response)