split category fetching from menu items

src/pages/[slug].astro

@@ -1,7 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import '../styles/globals.css'
-import { getCollection, type CollectionEntry } from 'astro:content'
 import { Header } from '../sections/Header'
 import { Footer } from '../sections/Footer'
 import { Enum_Category_Group } from '../graphql/graphql'
@@ -10,9 +9,9 @@ import type { MenuItemsQuery } from '../graphql/graphql'
 import type { SiteConfigContact } from '../lib/cms/contact/types'
 import { siteConfigQuery } from '../graphql-documents/site-config.gql.generated'
 import { menuItemsQuery } from '../graphql-documents/menu-items.gql.generated'
+import { categoryQuery } from '../graphql-documents/category.gql.generated'
 
 export async function getStaticPaths() {
-  const categories = await getCollection('categories')
   const [siteResult, menuItemsResult] = await Promise.all([siteConfigQuery.execute(), menuItemsQuery.execute()])
   if (siteResult.errors?.length) {
     throw new Error(siteResult.errors.map(e => e.message).join(', '))
@@ -27,12 +26,9 @@ export async function getStaticPaths() {
   const solutionCategories = menuItems.filter(c => c.group === Enum_Category_Group.Solution)
   const serviceCategories = menuItems.filter(c => c.group === Enum_Category_Group.Service)
 
-  return categories.map((entry: CollectionEntry<'categories'>) => ({
-    params: { slug: entry.id },
+  return menuItems.map(category => ({
+    params: { slug: category.slug },
     props: {
-      title: entry.data.title,
-      description: entry.data.description,
-      vendors: entry.data.vendors,
       contacts,
       solutionCategories,
       serviceCategories,
@@ -41,25 +37,44 @@ export async function getStaticPaths() {
 }
 
 interface Props {
-  title: string
-  description: string
-  vendors: {
-    name: string
-    description: string
-    products?: string[]
-  }[]
   contacts: SiteConfigContact[]
   solutionCategories: NonNullable<MenuItemsQuery['categories'][number]>[]
   serviceCategories: NonNullable<MenuItemsQuery['categories'][number]>[]
 }
 
-const { title, description, vendors, contacts, solutionCategories, serviceCategories } = Astro.props as Props
+const { contacts, solutionCategories, serviceCategories } = Astro.props as Props
+const slug = Astro.params.slug
+
+if (!slug) {
+  throw new Error('Missing slug param for category page')
+}
+
+const categoryResult = await categoryQuery.execute({ slug })
+
+if (categoryResult.errors?.length) {
+  throw new Error(categoryResult.errors.map(e => e.message).join(', '))
+}
+
+const category = categoryResult.data?.categories?.find(c => c != null)
+
+if (!category) {
+  throw new Error(`Category not found for slug: ${slug}`)
+}
+
+const title = category.title ?? undefined
+const description = category.description ?? undefined
+const badge = category.badge ?? undefined
+const vendors = (category.vendors?.filter(v => v != null) ?? []).map(vendor => ({
+  name: vendor.title ?? undefined,
+  description: vendor.description ?? undefined,
+  products: (vendor.products?.filter(p => p != null) ?? []).map(product => product.value),
+}))
 ---
 
 <Layout>
   <div class="min-h-screen bg-white w-full overflow-x-hidden">
     <Header client:load contacts={contacts} solutions={solutionCategories} services={serviceCategories} />
-    <CategoryView client:load title={title} description={description} vendors={vendors} />
+    <CategoryView client:load badge={badge} title={title} description={description} vendors={vendors} />
     <Footer client:load contacts={contacts} solutionCategories={solutionCategories} />
   </div>
 </Layout>