feat: move overview page query to tRPC request

app/[lang]/(live)/(protected)/my-pages/overview/page.tsx

@@ -1,108 +1,23 @@
 import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
-import { request } from "@/lib/graphql/request"
-import { GetAccountPage } from "@/lib/graphql/Query/AccountPage.graphql"
-
-import { Lang } from "@/constants/languages"
 
+import Content from "@/components/MyPages/AccountPage/Content"
 import MaxWidth from "@/components/MaxWidth"
-import Overview from "@/components/MyPages/Blocks/Overview"
-import UpcomingStays from "@/components/MyPages/Blocks/Overview/UpcomingStays"
-import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 
 import styles from "./page.module.css"
 
-import {
-  ContentEntries,
-  DynamicContentComponents,
-  DynamicContent,
-} from "@/types/requests/myPages/accountpage"
-import {
-  AccountPageContentItem,
-  GetAccountPageData,
-} from "@/types/requests/myPages/accountpage"
 import type { LangParams, PageArgs } from "@/types/params"
-import { User } from "@/types/user"
 
 export default async function MyPageOverview({ params }: PageArgs<LangParams>) {
   const user = await serverClient().user.get()
-  const response = await request<GetAccountPageData>(
-    GetAccountPage,
-    {
-      locale: params.lang,
-      url: "/my-pages/overview",
-    },
-    {
-      tags: [`'/my-pages/overview',-en`],
-    }
-  )
-
-  if (!response.data?.all_account_page?.total) {
-    console.log("#### DATA ####")
-    console.log(response.data)
-    throw new Error("Not found")
-  }
-
-  const pageData = response.data.all_account_page.items[0]
-
-  function DynamicComponent({
-    user,
-    lang,
-    content,
-  }: {
-    content: DynamicContent
-    lang: Lang
-    user: User
-  }) {
-    console.log({ content })
-    switch (content.component) {
-      case DynamicContentComponents.membership_overview:
-        return <Overview user={user} />
-      case DynamicContentComponents.benefits:
-      case DynamicContentComponents.previous_stays:
-        return null
-      case DynamicContentComponents.upcoming_stays:
-        return <UpcomingStays lang={lang} stays={user.stays} />
-      default:
-        return null
-    }
-  }
-
-  function Content({ content }: { content: AccountPageContentItem[] }) {
-    return (
-      <>
-        {content.map((item) => {
-          switch (item.__typename) {
-            case ContentEntries.AccountPageContentDynamicContent:
-              return (
-                <DynamicComponent
-                  user={user}
-                  lang={params.lang}
-                  content={item.dynamic_content}
-                />
-              )
-            case ContentEntries.AccountPageContentShortcuts:
-              const shortcuts = item.shortcuts.shortcuts.map(
-                (shortcut) => shortcut.linkConnection.edges[0].node
-              )
-              return (
-                <Shortcuts
-                  shortcuts={shortcuts}
-                  subtitle={item.preamble}
-                  title={item.title}
-                />
-              )
-            default:
-              return null
-          }
-        })}
-      </>
-    )
-  }
+  const accountPage = await serverClient().contentstack.accountPage.get({
+    uri: "/my-pages/overview",
+    lang: params.lang,
+  })
 
   return (
     <MaxWidth className={styles.blocks} tag="main">
-      <Content content={pageData.content} />
+      <Content user={user} lang={params.lang} content={accountPage.content} />
     </MaxWidth>
   )
 }

components/MyPages/AccountPage/Content.tsx

@@ -0,0 +1,73 @@
+import { Lang } from "@/constants/languages"
+import {
+  AccountPageContentItem,
+  ContentEntries,
+  DynamicContent,
+  DynamicContentComponents,
+} from "@/types/requests/myPages/accountpage"
+import { User } from "@/types/user"
+import Overview from "@/components/MyPages/Blocks/Overview"
+import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
+import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"
+
+function DynamicComponent({
+  user,
+  lang,
+  content,
+}: {
+  content: DynamicContent
+  lang: Lang
+  user: User
+}) {
+  switch (content.component) {
+    case DynamicContentComponents.membership_overview:
+      return <Overview user={user} />
+    case DynamicContentComponents.benefits:
+    case DynamicContentComponents.previous_stays:
+      return null
+    case DynamicContentComponents.upcoming_stays:
+      return <UpcomingStays lang={lang} stays={user.stays} />
+    default:
+      return null
+  }
+}
+
+export default function Content({
+  user,
+  lang,
+  content,
+}: {
+  user: User
+  lang: Lang
+  content: AccountPageContentItem[]
+}) {
+  return (
+    <>
+      {content.map((item) => {
+        switch (item.__typename) {
+          case ContentEntries.AccountPageContentDynamicContent:
+            return (
+              <DynamicComponent
+                user={user}
+                lang={lang}
+                content={item.dynamic_content}
+              />
+            )
+          case ContentEntries.AccountPageContentShortcuts:
+            const shortcuts = item.shortcuts.shortcuts.map(
+              (shortcut) => shortcut.linkConnection.edges[0].node
+            )
+            return (
+              <Shortcuts
+                shortcuts={shortcuts}
+                subtitle={item.preamble}
+                title={item.title}
+              />
+            )
+          default:
+            return null
+        }
+      })}
+    </>
+  )
+}

lib/graphql/Fragments/MyPages/AccountPageContentShortcuts.graphql

@@ -1,5 +1,3 @@
-#import "../PageLinks.graphql"
-
 fragment AccountPageContentShortcuts on AccountPageContentShortcuts {
   shortcuts {
     title
@@ -18,3 +16,30 @@ fragment AccountPageContentShortcuts on AccountPageContentShortcuts {
     }
   }
 }
+
+fragment AccountPageLink on AccountPage {
+  system {
+    locale
+    uid
+  }
+  title
+  url
+}
+
+fragment LoyaltyPageLink on LoyaltyPage {
+  system {
+    locale
+    uid
+  }
+  title
+  url
+}
+
+fragment ContentPageLink on ContentPage {
+  system {
+    locale
+    uid
+  }
+  title
+  url
+}

server/routers/contentstack/accountPage/index.ts

@@ -0,0 +1,3 @@
+import { mergeRouters } from "@/server/trpc"
+import { accountPageQueryRouter } from "./query"
+export const accountPageRouter = mergeRouters(accountPageQueryRouter)

server/routers/contentstack/accountPage/query.ts

@@ -0,0 +1,28 @@
+import { z } from "zod"
+import { badRequestError } from "@/server/errors/trpc"
+import { publicProcedure, router } from "@/server/trpc"
+import { request } from "@/lib/graphql/request"
+import { Lang } from "@/constants/languages"
+import GetAccountPage from "@/lib/graphql/Query/AccountPage.graphql"
+import type { GetAccountPageData } from "@/types/requests/myPages/accountpage"
+export const accountPageQueryRouter = router({
+  get: publicProcedure
+    .input(z.object({ uri: z.string(), lang: z.nativeEnum(Lang) }))
+    .query(async ({ input }) => {
+      const accountPage = await request<GetAccountPageData>(
+        GetAccountPage,
+        {
+          locale: input.lang,
+          url: input.uri,
+        },
+        {
+          tags: [`${input.uri}-${input.lang}`],
+        }
+      )
+      if (accountPage.data && accountPage.data.all_account_page.total) {
+        return accountPage.data.all_account_page.items[0]
+      }
+
+      throw badRequestError()
+    }),
+})

server/routers/contentstack/index.ts

@@ -1,5 +1,6 @@
 import { router } from "@/server/trpc"
 
+import { accountPageRouter } from "./accountPage"
 import { breadcrumbsRouter } from "./breadcrumbs"
 import { contactConfigRouter } from "./contactConfig"
 import { loyaltyPageRouter } from "./loyaltyPage"
@@ -7,5 +8,6 @@ import { loyaltyPageRouter } from "./loyaltyPage"
 export const contentstackRouter = router({
   breadcrumbs: breadcrumbsRouter,
   loyaltyPage: loyaltyPageRouter,
+  accountPage: accountPageRouter,
   contactConfig: contactConfigRouter,
 })