Added support for loading CMS Pages from Magento

.changeset/gentle-rules-learn.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cms': patch
+---
+
+Added support for loading CMS Pages from Magento

examples/magento-open-source/pages/[...url].tsx

@@ -9,6 +9,8 @@ import {
   findParentBreadcrumbItem,
   getCategoryStaticPaths,
 } from '@graphcommerce/magento-category'
+import type { CmsPageQuery } from '@graphcommerce/magento-cms'
+import { CmsPageContent, CmsPageDocument } from '@graphcommerce/magento-cms'
 import type {
   FilterTypes,
   ProductFiltersQuery,
@@ -26,7 +28,12 @@ import {
   productListLink,
   useProductList,
 } from '@graphcommerce/magento-product'
-import { redirectOrNotFound, redirectTo, StoreConfigDocument } from '@graphcommerce/magento-store'
+import {
+  PageMeta,
+  redirectOrNotFound,
+  redirectTo,
+  StoreConfigDocument,
+} from '@graphcommerce/magento-store'
 import type { GetStaticProps } from '@graphcommerce/next-ui'
 import { Container, LayoutHeader, LayoutTitle } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
@@ -43,7 +50,8 @@ import type { CategoryPageQuery } from '../graphql/CategoryPage.gql'
 import { CategoryPageDocument } from '../graphql/CategoryPage.gql'
 import { graphqlSharedClient, graphqlSsrClient } from '../lib/graphql/graphqlSsrClient'
 
-export type CategoryProps = CategoryPageQuery &
+export type CategoryProps = CmsPageQuery &
+  CategoryPageQuery &
   ProductListQuery &
   ProductFiltersQuery & { filterTypes?: FilterTypes; params?: ProductListParams }
 export type CategoryRoute = { url: string[] }
@@ -52,7 +60,7 @@ type GetPageStaticPaths = GetStaticPaths<CategoryRoute>
 type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, CategoryProps, CategoryRoute>
 
 function CategoryPage(props: CategoryProps) {
-  const { categories, ...rest } = props
+  const { categories, cmsPage, ...rest } = props
   const productList = useProductList({
     ...rest,
     category: categories?.items?.[0],
@@ -64,14 +72,24 @@ function CategoryPage(props: CategoryProps) {
 
   return (
     <PrivateQueryMaskProvider mask={productList.mask}>
-      <CategoryMeta params={params} {...category} />
       <LayoutHeader floatingMd hideMd={import.meta.graphCommerce.breadcrumbs}>
         <LayoutTitle size='small' component='span'>
           {category?.name}
         </LayoutTitle>
       </LayoutHeader>
+      {cmsPage && (
+        <>
+          <PageMeta
+            title={cmsPage.meta_title || cmsPage.title || cmsPage.content_heading || 'Page'}
+            metaDescription={cmsPage.meta_description || undefined}
+          />
+          <CmsPageContent cmsPage={cmsPage} />
+        </>
+      )}
       {isCategory && isLanding && (
         <>
+          <CategoryMeta params={params} {...category} />
+
           {import.meta.graphCommerce.breadcrumbs && (
             <Container maxWidth={false}>
               <CategoryBreadcrumbs
@@ -93,6 +111,8 @@ function CategoryPage(props: CategoryProps) {
       )}
       {isCategory && !isLanding && (
         <>
+          <CategoryMeta params={params} {...category} />
+
           {import.meta.graphCommerce.productFiltersPro &&
             import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR' && (
               <ProductListLayoutSidebar
@@ -155,10 +175,9 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
 
   const staticClient = graphqlSsrClient(context)
 
-  const categoryPage = staticClient.query({
-    query: CategoryPageDocument,
-    variables: { url },
-  })
+  const categoryPage = staticClient.query({ query: CategoryPageDocument, variables: { url } })
+  const cmsPage = staticClient.query({ query: CmsPageDocument, variables: { url } })
+
   const layout = staticClient.query({
     query: LayoutDocument,
     fetchPolicy: cacheFirst(staticClient),
@@ -197,7 +216,9 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
       })
     : undefined
 
-  if (!hasCategory) return redirectOrNotFound(staticClient, conf, params, locale)
+  const hasPage = (await cmsPage).data.cmsPage
+
+  if (!hasCategory && !hasPage) return redirectOrNotFound(staticClient, conf, params, locale)
 
   if ((await products)?.errors) {
     const totalPages = (await filters)?.data.filters?.page_info?.total_pages ?? 0
@@ -223,6 +244,7 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
       ...(await products)?.data,
       ...(await filters)?.data,
       ...(await layout).data,
+      ...(await cmsPage).data,
       filterTypes: await filterTypes,
       params: productListParams,
       apolloState: await conf.then(() => client.cache.extract()),

packages/magento-cms/CmsPageContent.tsx → packages/magento-cms/components/CmsPageContent/CmsPageContent.tsx

@@ -1,19 +1,19 @@
 import { Container, Typography } from '@mui/material'
 import type { CmsPageContentFragment } from './CmsPageContent.gql'
 
-export type CmsPageContentProps = CmsPageContentFragment
+export type CmsPageContentProps = { cmsPage: CmsPageContentFragment }
 
 export function CmsPageContent(props: CmsPageContentProps) {
-  const { content_heading, content } = props
+  const { cmsPage } = props
   return (
     <Container>
-      {content_heading && (
+      {cmsPage.content_heading && (
         <Typography variant='h2' component='h1'>
-          {content_heading}
+          {cmsPage.content_heading}
         </Typography>
       )}
       {/* eslint-disable-next-line react/no-danger */}
-      {content && <div dangerouslySetInnerHTML={{ __html: content }} />}
+      {cmsPage.content && <div dangerouslySetInnerHTML={{ __html: cmsPage.content }} />}
     </Container>
   )
 }

packages/magento-cms/graphql/CmsPage.graphql

@@ -0,0 +1,7 @@
+query CmsPage($url: String!) {
+  cmsPage(identifier: $url) {
+    identifier
+    ...CmsPageMeta
+    ...CmsPageContent
+  }
+}

packages/magento-cms/index.ts

@@ -1,2 +1,5 @@
-export * from './CmsPageContent'
-export * from './CmsPageMeta'
+export * from './components/CmsPageContent/CmsPageContent'
+export * from './components/CmsPageContent/CmsPageContent.gql'
+export * from './components/CmsPageMeta/CmsPageMeta'
+export * from './components/CmsPageMeta/CmsPageMeta.gql'
+export * from './graphql/CmsPage.gql'