refactor: separate queries for loyalty and mypages

components/MyPages/Breadcrumbs/index.tsx

@@ -12,9 +12,12 @@ import { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
 export default async function Breadcrumbs({
   pageType = PageTypes.Account,
 }: BreadcrumbsProps) {
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    pageType,
-  })
+  let breadcrumbs
+  if (pageType == PageTypes.Account) {
+    breadcrumbs = await serverClient().contentstack.breadcrumbs.getMyPages()
+  } else {
+    breadcrumbs = await serverClient().contentstack.breadcrumbs.getLoyaltyPage()
+  }
   return (
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>

lib/graphql/Query/BreadcrumbsLoyaltyPage.graphql

@@ -2,7 +2,7 @@
 #import "../Fragments/Refs/LoyaltyPage/Breadcrumbs.graphql"
 
 query GetLoyaltyPageBreadcrumbs($locale: String!, $url: String!) {
-  all_page: all_loyalty_page(locale: $locale, where: { url: $url }) {
+  all_loyalty_page(locale: $locale, where: { url: $url }) {
     items {
       ...LoyaltyPageBreadcrumbs
       system {
@@ -13,7 +13,7 @@ query GetLoyaltyPageBreadcrumbs($locale: String!, $url: String!) {
 }
 
 query GetLoyaltyPageBreadcrumbsRefs($locale: String!, $url: String!) {
-  all_page: all_loyalty_page(locale: $locale, where: { url: $url }) {
+  all_loyalty_page(locale: $locale, where: { url: $url }) {
     items {
       ...LoyaltyPageBreadcrumbsRefs
     }

lib/graphql/Query/BreadcrumbsMyPages.graphql

@@ -2,7 +2,7 @@
 #import "../Fragments/Refs/MyPages/Breadcrumbs.graphql"
 
 query GetMyPagesBreadcrumbs($locale: String!, $url: String!) {
-  all_page: all_account_page(locale: $locale, where: { url: $url }) {
+  all_account_page(locale: $locale, where: { url: $url }) {
     items {
       ...MyPagesBreadcrumbs
       system {
@@ -13,7 +13,7 @@ query GetMyPagesBreadcrumbs($locale: String!, $url: String!) {
 }
 
 query GetMyPagesBreadcrumbsRefs($locale: String!, $url: String!) {
-  all_page: all_account_page(locale: $locale, where: { url: $url }) {
+  all_account_page(locale: $locale, where: { url: $url }) {
     items {
       ...MyPagesBreadcrumbsRefs
     }

server/routers/contentstack/breadcrumbs/output.ts

@@ -10,64 +10,76 @@ export const getBreadcrumbsSchema = z.array(
   })
 )
 
-export const validateBreadcrumbsRefsContentstackSchema = z.object({
-  all_page: z.object({
-    items: z.array(
-      z.object({
-        web: z.object({
-          breadcrumbs: z.object({
-            parentsConnection: z.object({
-              edges: z.array(
-                z.object({
-                  node: z.object({
-                    system: z.object({
-                      content_type_uid: z.string(),
-                      uid: z.string(),
-                    }),
+const breadCrumbsRefsItems = z.object({
+  items: z.array(
+    z.object({
+      web: z.object({
+        breadcrumbs: z.object({
+          parentsConnection: z.object({
+            edges: z.array(
+              z.object({
+                node: z.object({
+                  system: z.object({
+                    content_type_uid: z.string(),
+                    uid: z.string(),
                   }),
-                })
-              ),
-            }),
+                }),
+              })
+            ),
           }),
         }),
-        system: z.object({
-          content_type_uid: z.string(),
-          uid: z.string(),
-        }),
-      })
-    ),
-  }),
+      }),
+      system: z.object({
+        content_type_uid: z.string(),
+        uid: z.string(),
+      }),
+    })
+  ),
 })
 
-export const validateBreadcrumbsContentstackSchema = z.object({
-  all_page: z.object({
-    items: z.array(
-      z.object({
-        web: z.object({
-          breadcrumbs: z.object({
-            title: z.string(),
-            parentsConnection: z.object({
-              edges: z.array(
-                z.object({
-                  node: z.object({
-                    breadcrumbs: z.object({
-                      title: z.string(),
-                    }),
-                    system: z.object({
-                      locale: z.nativeEnum(Lang),
-                      uid: z.string(),
-                    }),
-                    url: z.string(),
+export const validateMyPagesBreadcrumbsRefsContentstackSchema = z.object({
+  all_account_page: breadCrumbsRefsItems,
+})
+
+export const validateLoyaltyPageBreadcrumbsRefsContentstackSchema = z.object({
+  all_loyalty_page: breadCrumbsRefsItems,
+})
+
+const breadCrumbsItems = z.object({
+  items: z.array(
+    z.object({
+      web: z.object({
+        breadcrumbs: z.object({
+          title: z.string(),
+          parentsConnection: z.object({
+            edges: z.array(
+              z.object({
+                node: z.object({
+                  breadcrumbs: z.object({
+                    title: z.string(),
                   }),
-                })
-              ),
-            }),
+                  system: z.object({
+                    locale: z.nativeEnum(Lang),
+                    uid: z.string(),
+                  }),
+                  url: z.string(),
+                }),
+              })
+            ),
           }),
         }),
-        system: z.object({
-          uid: z.string(),
-        }),
-      })
-    ),
-  }),
+      }),
+      system: z.object({
+        uid: z.string(),
+      }),
+    })
+  ),
+})
+
+export const validateMyPagesBreadcrumbsContentstackSchema = z.object({
+  all_account_page: breadCrumbsItems,
+})
+
+export const validateLoyaltyPageBreadcrumbsContentstackSchema = z.object({
+  all_loyalty_page: breadCrumbsItems,
 })

server/routers/contentstack/breadcrumbs/query.ts

@@ -17,107 +17,176 @@ import {
 } from "@/utils/generateTag"
 import { removeMultipleSlashes } from "@/utils/url"
 
-import { PageTypeEnum, PageTypes } from "./input"
 import {
   getBreadcrumbsSchema,
-  validateBreadcrumbsContentstackSchema,
-  validateBreadcrumbsRefsContentstackSchema,
+  validateLoyaltyPageBreadcrumbsContentstackSchema,
+  validateLoyaltyPageBreadcrumbsRefsContentstackSchema,
+  validateMyPagesBreadcrumbsContentstackSchema,
+  validateMyPagesBreadcrumbsRefsContentstackSchema,
 } from "./output"
 import { affix, getConnections, homeBreadcrumbs } from "./utils"
 
 import type {
+  GetLoyaltyPageBreadcrumbsData,
+  GetLoyaltyPageBreadcrumbsRefsData,
   GetMyPagesBreadcrumbsData,
   GetMyPagesBreadcrumbsRefsData,
 } from "@/types/requests/myPages/breadcrumbs"
 
 export const breadcrumbsQueryRouter = router({
-  get: contentstackProcedure
-    .input(PageTypeEnum)
-    .query(async ({ ctx, input }) => {
-      let refsResponse, GetPageBreadcrumbs, GetPageBreadcrumbRefs
-
-      if (input.pageType == PageTypes.Account) {
-        GetPageBreadcrumbs = GetMyPagesBreadcrumbs
-        GetPageBreadcrumbRefs = GetMyPagesBreadcrumbsRefs
-      } else if (input.pageType == PageTypes.Loyalty) {
-        GetPageBreadcrumbs = GetLoyaltyPageBreadcrumbs
-        GetPageBreadcrumbRefs = GetLoyaltyPageBreadcrumbsRefs
-      } else {
-        return []
+  getMyPages: contentstackProcedure.query(async ({ ctx }) => {
+    const refsResponse = await request<GetMyPagesBreadcrumbsRefsData>(
+      GetMyPagesBreadcrumbsRefs,
+      { locale: ctx.lang, url: ctx.pathname },
+      {
+        next: {
+          tags: [generateRefsResponseTag(ctx.lang, ctx.pathname, affix)],
+        },
       }
-      refsResponse = await request<GetMyPagesBreadcrumbsRefsData>(
-        GetPageBreadcrumbRefs,
-        { locale: ctx.lang, url: ctx.pathname },
-        {
-          next: {
-            tags: [generateRefsResponseTag(ctx.lang, ctx.pathname, affix)],
-          },
-        }
+    )
+    if (!refsResponse.data) {
+      throw notFound(refsResponse)
+    }
+
+    const validatedRefsData =
+      validateMyPagesBreadcrumbsRefsContentstackSchema.safeParse(
+        refsResponse.data
       )
-      if (!refsResponse.data) {
-        throw notFound(refsResponse)
-      }
+    if (!validatedRefsData.success) {
+      throw internalServerError(validatedRefsData.error)
+    }
 
-      const validatedRefsData =
-        validateBreadcrumbsRefsContentstackSchema.safeParse(refsResponse.data)
-      if (!validatedRefsData.success) {
-        throw internalServerError(validatedRefsData.error)
-      }
+    const connections = getConnections(validatedRefsData.data.all_account_page)
+    const tags = generateTags(ctx.lang, connections)
+    const page = validatedRefsData.data.all_account_page.items[0]
+    tags.push(generateTag(ctx.lang, page.system.uid, affix))
 
-      const connections = getConnections(validatedRefsData.data)
-      const tags = generateTags(ctx.lang, connections)
-      const page = validatedRefsData.data.all_page.items[0]
-      tags.push(generateTag(ctx.lang, page.system.uid, affix))
+    const response = await request<GetMyPagesBreadcrumbsData>(
+      GetMyPagesBreadcrumbs,
+      { locale: ctx.lang, url: ctx.pathname },
+      { next: { tags } }
+    )
+    if (!response.data) {
+      throw notFound(response)
+    }
 
-      const response = await request<GetMyPagesBreadcrumbsData>(
-        GetPageBreadcrumbs,
-        { locale: ctx.lang, url: ctx.pathname },
-        { next: { tags } }
-      )
-      if (!response.data) {
-        throw notFound(response)
-      }
+    const validatedBreadcrumbsData =
+      validateMyPagesBreadcrumbsContentstackSchema.safeParse(response.data)
 
-      const validatedBreadcrumbsData =
-        validateBreadcrumbsContentstackSchema.safeParse(response.data)
+    if (!validatedBreadcrumbsData.success) {
+      throw internalServerError(validatedBreadcrumbsData.error)
+    }
 
-      if (!validatedBreadcrumbsData.success) {
-        throw internalServerError(validatedBreadcrumbsData.error)
-      }
-
-      const parentBreadcrumbs =
-        validatedBreadcrumbsData.data.all_page.items[0].web.breadcrumbs.parentsConnection.edges.map(
-          (breadcrumb) => {
-            return {
-              href: removeMultipleSlashes(
-                `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
-              ),
-              title: breadcrumb.node.breadcrumbs.title,
-              uid: breadcrumb.node.system.uid,
-            }
-          }
-        )
-
-      const pageBreadcrumb = validatedBreadcrumbsData.data.all_page.items.map(
+    const parentBreadcrumbs =
+      validatedBreadcrumbsData.data.all_account_page.items[0].web.breadcrumbs.parentsConnection.edges.map(
         (breadcrumb) => {
           return {
-            title: breadcrumb.web.breadcrumbs.title,
-            uid: breadcrumb.system.uid,
+            href: removeMultipleSlashes(
+              `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
+            ),
+            title: breadcrumb.node.breadcrumbs.title,
+            uid: breadcrumb.node.system.uid,
           }
         }
       )
 
-      const breadcrumbs = [
-        homeBreadcrumbs[ctx.lang],
-        parentBreadcrumbs,
-        pageBreadcrumb,
-      ].flat()
+    const pageBreadcrumb =
+      validatedBreadcrumbsData.data.all_account_page.items.map((breadcrumb) => {
+        return {
+          title: breadcrumb.web.breadcrumbs.title,
+          uid: breadcrumb.system.uid,
+        }
+      })
 
-      const validatedBreadcrumbs = getBreadcrumbsSchema.safeParse(breadcrumbs)
-      if (!validatedBreadcrumbs.success) {
-        throw internalServerError(validatedBreadcrumbs.error)
+    const breadcrumbs = [
+      homeBreadcrumbs[ctx.lang],
+      parentBreadcrumbs,
+      pageBreadcrumb,
+    ].flat()
+
+    const validatedBreadcrumbs = getBreadcrumbsSchema.safeParse(breadcrumbs)
+    if (!validatedBreadcrumbs.success) {
+      throw internalServerError(validatedBreadcrumbs.error)
+    }
+
+    return validatedBreadcrumbs.data
+  }),
+  getLoyaltyPage: contentstackProcedure.query(async ({ ctx }) => {
+    const refsResponse = await request<GetLoyaltyPageBreadcrumbsRefsData>(
+      GetLoyaltyPageBreadcrumbsRefs,
+      { locale: ctx.lang, url: ctx.pathname },
+      {
+        next: {
+          tags: [generateRefsResponseTag(ctx.lang, ctx.pathname, affix)],
+        },
       }
+    )
+    if (!refsResponse.data) {
+      throw notFound(refsResponse)
+    }
 
-      return validatedBreadcrumbs.data
-    }),
+    const validatedRefsData =
+      validateLoyaltyPageBreadcrumbsRefsContentstackSchema.safeParse(
+        refsResponse.data
+      )
+
+    if (!validatedRefsData.success) {
+      throw internalServerError(validatedRefsData.error)
+    }
+
+    const connections = getConnections(validatedRefsData.data.all_loyalty_page)
+    const tags = generateTags(ctx.lang, connections)
+    const page = validatedRefsData.data.all_loyalty_page.items[0]
+    tags.push(generateTag(ctx.lang, page.system.uid, affix))
+
+    const response = await request<GetLoyaltyPageBreadcrumbsData>(
+      GetLoyaltyPageBreadcrumbs,
+      { locale: ctx.lang, url: ctx.pathname },
+      { next: { tags } }
+    )
+    if (!response.data) {
+      throw notFound(response)
+    }
+
+    const validatedBreadcrumbsData =
+      validateLoyaltyPageBreadcrumbsContentstackSchema.safeParse(response.data)
+
+    if (!validatedBreadcrumbsData.success) {
+      throw internalServerError(validatedBreadcrumbsData.error)
+    }
+
+    const parentBreadcrumbs =
+      validatedBreadcrumbsData.data.all_loyalty_page.items[0].web.breadcrumbs.parentsConnection.edges.map(
+        (breadcrumb) => {
+          return {
+            href: removeMultipleSlashes(
+              `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
+            ),
+            title: breadcrumb.node.breadcrumbs.title,
+            uid: breadcrumb.node.system.uid,
+          }
+        }
+      )
+
+    const pageBreadcrumb =
+      validatedBreadcrumbsData.data.all_loyalty_page.items.map((breadcrumb) => {
+        return {
+          title: breadcrumb.web.breadcrumbs.title,
+          uid: breadcrumb.system.uid,
+        }
+      })
+
+    const breadcrumbs = [
+      homeBreadcrumbs[ctx.lang],
+      parentBreadcrumbs,
+      pageBreadcrumb,
+    ].flat()
+
+    const validatedBreadcrumbs = getBreadcrumbsSchema.safeParse(breadcrumbs)
+    if (!validatedBreadcrumbs.success) {
+      throw internalServerError(validatedBreadcrumbs.error)
+    }
+
+    return validatedBreadcrumbs.data
+  }),
 })

server/routers/contentstack/breadcrumbs/utils.ts

@@ -1,12 +1,12 @@
 import { Lang } from "@/constants/languages"
 
-import type { GetMyPagesBreadcrumbsRefsData } from "@/types/requests/myPages/breadcrumbs"
+import type { GetBreadcrumbsItems } from "@/types/requests/myPages/breadcrumbs"
 import type { Edges } from "@/types/requests/utils/edges"
 import type { NodeRefs } from "@/types/requests/utils/refs"
 
-export function getConnections(refs: GetMyPagesBreadcrumbsRefsData) {
+export function getConnections(refs: GetBreadcrumbsItems) {
   const connections: Edges<NodeRefs>[] = []
-  refs.all_page.items.forEach((ref) => {
+  refs.items.forEach((ref) => {
     connections.push(ref.web.breadcrumbs.parentsConnection)
   })
   return connections

types/requests/myPages/breadcrumbs.ts

@@ -28,7 +28,15 @@ interface MyPagesBreadcrumbs {
 interface AllPageResponse extends AllRequestResponse<MyPagesBreadcrumbs> {}
 
 export interface GetMyPagesBreadcrumbsData {
-  all_page: AllPageResponse
+  all_account_page: AllPageResponse
+}
+
+export interface GetLoyaltyPageBreadcrumbsData {
+  all_loyalty_page: AllPageResponse
+}
+
+export interface GetBreadcrumbsItems {
+  items: MyPagesBreadcrumbRefs[]
 }
 
 interface MyPagesBreadcrumbRefs extends System {
@@ -43,5 +51,9 @@ interface AllPageRefsResponse
   extends AllRequestResponse<MyPagesBreadcrumbRefs> {}
 
 export interface GetMyPagesBreadcrumbsRefsData {
-  all_page: AllPageRefsResponse
+  all_account_page: AllPageRefsResponse
+}
+
+export interface GetLoyaltyPageBreadcrumbsRefsData {
+  all_loyalty_page: AllPageRefsResponse
 }