From b2b7f4f85ad9d2017ba82f4175878cc32a922f29 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@weahead.se>
Date: Fri, 16 Aug 2024 10:14:45 +0200
Subject: [PATCH] fix(SW-190): added cache for content page query and added
 breadcrumbs fetching for content page

---
 components/MyPages/Breadcrumbs/index.tsx      |  1 +
 .../Refs/ContentPage/Breadcrumbs.graphql      | 38 ++++++++++++
 .../{ => ContentPage}/ContentPage.graphql     |  2 +-
 lib/graphql/Query/AccountPage.graphql         |  2 +-
 .../Query/BreadcrumbsContentPage.graphql      | 21 +++++++
 lib/graphql/Query/ContentPage.graphql         |  3 -
 lib/graphql/Query/LoyaltyPage.graphql         |  4 +-
 lib/graphql/Query/NavigationMyPages.graphql   |  2 +-
 .../contentstack/breadcrumbs/output.ts        | 18 +++++-
 .../routers/contentstack/breadcrumbs/query.ts | 58 +++++++++++++++++++
 .../routers/contentstack/contentPage/query.ts | 16 +++--
 11 files changed, 151 insertions(+), 14 deletions(-)
 create mode 100644 lib/graphql/Fragments/Refs/ContentPage/Breadcrumbs.graphql
 rename lib/graphql/Fragments/Refs/{ => ContentPage}/ContentPage.graphql (72%)
 create mode 100644 lib/graphql/Query/BreadcrumbsContentPage.graphql

diff --git a/components/MyPages/Breadcrumbs/index.tsx b/components/MyPages/Breadcrumbs/index.tsx
index 3fccd6f25..752f77d5f 100644
--- a/components/MyPages/Breadcrumbs/index.tsx
+++ b/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}>
diff --git a/lib/graphql/Fragments/Refs/ContentPage/Breadcrumbs.graphql b/lib/graphql/Fragments/Refs/ContentPage/Breadcrumbs.graphql
new file mode 100644
index 000000000..b3c887a34
--- /dev/null
+++ b/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
+  }
+}
diff --git a/lib/graphql/Fragments/Refs/ContentPage.graphql b/lib/graphql/Fragments/Refs/ContentPage/ContentPage.graphql
similarity index 72%
rename from lib/graphql/Fragments/Refs/ContentPage.graphql
rename to lib/graphql/Fragments/Refs/ContentPage/ContentPage.graphql
index daf7471a3..80edfcbca 100644
--- a/lib/graphql/Fragments/Refs/ContentPage.graphql
+++ b/lib/graphql/Fragments/Refs/ContentPage/ContentPage.graphql
@@ -1,4 +1,4 @@
-#import "./System.graphql"
+#import "../System.graphql"
 
 fragment ContentPageRef on ContentPage {
   system {
diff --git a/lib/graphql/Query/AccountPage.graphql b/lib/graphql/Query/AccountPage.graphql
index b21150bee..538b7e64a 100644
--- a/lib/graphql/Query/AccountPage.graphql
+++ b/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"
 
diff --git a/lib/graphql/Query/BreadcrumbsContentPage.graphql b/lib/graphql/Query/BreadcrumbsContentPage.graphql
new file mode 100644
index 000000000..fddbffc09
--- /dev/null
+++ b/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
+    }
+  }
+}
diff --git a/lib/graphql/Query/ContentPage.graphql b/lib/graphql/Query/ContentPage.graphql
index 4d3076e14..dee4d9610 100644
--- a/lib/graphql/Query/ContentPage.graphql
+++ b/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
diff --git a/lib/graphql/Query/LoyaltyPage.graphql b/lib/graphql/Query/LoyaltyPage.graphql
index 7026fe288..15900cb3e 100644
--- a/lib/graphql/Query/LoyaltyPage.graphql
+++ b/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
diff --git a/lib/graphql/Query/NavigationMyPages.graphql b/lib/graphql/Query/NavigationMyPages.graphql
index b4708a56a..c0f8acb44 100644
--- a/lib/graphql/Query/NavigationMyPages.graphql
+++ b/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"
 
diff --git a/server/routers/contentstack/breadcrumbs/output.ts b/server/routers/contentstack/breadcrumbs/output.ts
index f8e775b90..2fca07734 100644
--- a/server/routers/contentstack/breadcrumbs/output.ts
+++ b/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
+>
diff --git a/server/routers/contentstack/breadcrumbs/query.ts b/server/routers/contentstack/breadcrumbs/query.ts
index 0379c05ee..113f0430f 100644
--- a/server/routers/contentstack/breadcrumbs/query.ts
+++ b/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:
diff --git a/server/routers/contentstack/contentPage/query.ts b/server/routers/contentstack/contentPage/query.ts
index b49582be3..4cb632785 100644
--- a/server/routers/contentstack/contentPage/query.ts
+++ b/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, {
-      locale: lang,
-      uid,
-    })
+    // 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)