feat: revalidate my pages breadcrumbs on demand

server/routers/contentstack/breadcrumbs/query.ts

@@ -1,51 +1,120 @@
-import { GetMyPagesBreadcrumbs } from "@/lib/graphql/Query/BreadcrumbsMyPages.graphql"
+import {
+  GetMyPagesBreadcrumbs,
+  GetMyPagesBreadcrumbsRefs,
+} from "@/lib/graphql/Query/BreadcrumbsMyPages.graphql"
 import { request } from "@/lib/graphql/request"
 import { badRequestError, internalServerError } from "@/server/errors/trpc"
 import { publicProcedure, router } from "@/server/trpc"
 
-import { getBreadcrumbsInput } from "./input"
-import { validateBreadcrumbsConstenstackSchema } from "./output"
+import {
+  generateRefsResponseTag,
+  generateTag,
+  generateTags,
+} from "@/utils/generateTag"
+import { removeMultipleSlashes } from "@/utils/url"
 
-import { GetMyPagesBreadcrumbsData } from "@/types/requests/myPages/breadcrumbs"
+import { getBreadcrumbsInput } from "./input"
+import {
+  getBreadcrumbsSchema,
+  validateBreadcrumbsConstenstackSchema,
+  validateBreadcrumbsRefsConstenstackSchema,
+} from "./output"
+import { affix, getConnections, homeBreadcrumbs } from "./utils"
+
+import type {
+  GetMyPagesBreadcrumbsData,
+  GetMyPagesBreadcrumbsRefsData,
+} from "@/types/requests/myPages/breadcrumbs"
 
 export const breadcrumbsQueryRouter = router({
   get: publicProcedure.input(getBreadcrumbsInput).query(async ({ input }) => {
     try {
-      const response = await request<GetMyPagesBreadcrumbsData>(
-        GetMyPagesBreadcrumbs,
-        { locale: input.locale, url: input.href }
+      const refsResponse = await request<GetMyPagesBreadcrumbsRefsData>(
+        GetMyPagesBreadcrumbsRefs,
+        { locale: input.locale, url: input.href },
+        {
+          next: {
+            tags: [generateRefsResponseTag(input.locale, input.href, affix)],
+          },
+        }
       )
-      if (!response.data) {
+
+      if (!refsResponse.data) {
+        console.error("Bad response for `GetMyPagesBreadcrumbsRefs`")
+        console.error({ refsResponse })
+        throw internalServerError()
+      }
+
+      const validatedRefsData =
+        validateBreadcrumbsRefsConstenstackSchema.safeParse(refsResponse.data)
+      if (!validatedRefsData.success) {
+        console.info("Bad validation for `GetMyPagesBreadcrumbsRefs`")
+        console.error(validatedRefsData.error)
         throw badRequestError()
       }
 
-      const validatedBreadcrumbs =
+      const connections = getConnections(validatedRefsData.data)
+      const tags = generateTags(input.locale, connections)
+      const page = validatedRefsData.data.all_account_page.items[0]
+      tags.push(generateTag(input.locale, page.system.uid, affix))
+
+      const response = await request<GetMyPagesBreadcrumbsData>(
+        GetMyPagesBreadcrumbs,
+        { locale: input.locale, url: input.href },
+        { next: { tags } }
+      )
+
+      if (!response.data) {
+        console.error("Bad response for `GetMyPagesBreadcrumbs`")
+        console.error({ input })
+        console.error({ response })
+        throw internalServerError()
+      }
+
+      const validatedBreadcrumbsData =
         validateBreadcrumbsConstenstackSchema.safeParse(response.data)
-      if (!validatedBreadcrumbs.success) {
+      if (!validatedBreadcrumbsData.success) {
+        console.error("Bad validation for `GetMyPagesBreadcrumbs`")
+        console.error(validatedBreadcrumbsData.error)
         throw badRequestError()
       }
 
       const parentBreadcrumbs =
-        validatedBreadcrumbs.data.all_account_page.items[0].breadcrumbs.parents.edges.map(
+        validatedBreadcrumbsData.data.all_account_page.items[0].breadcrumbs.parentsConnection.edges.map(
           (breadcrumb) => {
             return {
-              href: breadcrumb.node.url,
+              href: removeMultipleSlashes(
+                `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
+              ),
               title: breadcrumb.node.breadcrumbs.title,
               uid: breadcrumb.node.system.uid,
             }
           }
         )
-      const pageBreadcrumb =
-        validatedBreadcrumbs.data.all_account_page.items.map((breadcrumb) => {
-          return {
-            href: "",
-            title: breadcrumb.breadcrumbs.title,
-            uid: breadcrumb.system.uid,
-          }
-        })
-      const breadcrumbs = [parentBreadcrumbs, pageBreadcrumb].flat()
 
-      return breadcrumbs
+      const pageBreadcrumb =
+        validatedBreadcrumbsData.data.all_account_page.items.map(
+          (breadcrumb) => {
+            return {
+              title: breadcrumb.breadcrumbs.title,
+              uid: breadcrumb.system.uid,
+            }
+          }
+        )
+
+      const breadcrumbs = [
+        homeBreadcrumbs[input.locale],
+        parentBreadcrumbs,
+        pageBreadcrumb,
+      ].flat()
+      const validatedBreadcrumbs = getBreadcrumbsSchema.safeParse(breadcrumbs)
+      if (!validatedBreadcrumbs.success) {
+        console.info("Bad validation for `validatedBreadcrumbs`")
+        console.error(validatedBreadcrumbs.error)
+        throw badRequestError()
+      }
+
+      return validatedBreadcrumbs.data
     } catch (error) {
       console.info(`Get My Pages Breadcrumbs Error`)
       console.error(error)