Hygraph abstraction (GCOM-1260)

docs/framework/config.md

@@ -239,13 +239,6 @@ The Google Tagmanager ID to be used on the site.
 
 This value is required even if you are configuring different values for each locale.
 
-#### hygraphManagementApi: string
-
-Hygraph Management API. **Only used for migrations.**
-
-Optional: If the hygraphEndpoint is configured with the 'High Performance Content
-API', this field is not required.
-
 #### hygraphProjectId: string
 
 Hygraph Project ID. **Only used for migrations.**

docs/hygraph/cli.md

@@ -50,24 +50,10 @@ The following steps are needed to utilize this tool:
       - Can see schema view
    5. Add this new token to your env file:
       `GC_HYGRAPH_WRITE_ACCESS_TOKEN="{YOUR_WRITE_ACCESS_TOKEN}"`
-2. Run `yarn graphcommerce hygraph-migrate`
-3. Select the migration you want to run and press enter.
-4. The migrations should now be applied, check your Hygraph Schema if changes
+2. Add your hygraphProjectId to your env file like this:
+   1. Settings > Project > Id
+   2. `GC_HYGRAPH_PROJECT_ID="{YOUR_PROJECT_ID}"`
+3. Run `yarn graphcommerce hygraph-migrate`
+4. Select the migration you want to run and press enter.
+5. The migrations should now be applied, check your Hygraph Schema if changes
    are made.
-
-### Addtional config
-
-These configurations should not be necessary and can be deduced from the
-hygraphEndpoint URL. This allows you to override them in case something goes
-wrong.
-
-Before adding these make sure you've configure the 'High Performance Content
-API' als your hygraphEndpoint.
-
-- Add your hygraphProjectId to your env file like this:
-  1.  Settings > Project > Id
-  2.  Add the project ID to your env file:
-      `GC_HYGRAPH_PROJECT_ID="{YOUR_PROJECT_ID}"`
-- Add your hygraphManagementApi to your env file like this:
-  1.  Copy the Management API URL and add to your env file:
-      `GC_HYGRAPH_MANAGEMENT_API="{YOUR_MANAGEMENT_API}"`

examples/magento-graphcms/.meshrc.yml

@@ -13,11 +13,11 @@ sources:
             # Remove mutations: `mutation { * }`
             - 'Mutation.!*'
             # Remove queries: `query { node, row*, asset*, scheduled*, *Version, user* }`
-            - 'Query.!{node,asset*,scheduled*,*Version,user*}'
+            - 'Query.!{node,asset*,scheduled*,*Version,user*,page}'
             # Remove field arguments: `query { anyfield(after,before,last,forceParentLocale,locales) { ... } }`
             - '*.*.!{after,before,last,forceParentLocale,locales,stage}'
             # Remove type any input or type fields: `input MyInput {}` or `type MyType { anyfield }`
-            - '*.!{localizations,scheduledIn,documentInStages*,createdAt*,updatedAt*,publishedAt*,createdBy,updatedBy,publishedBy,history,scheduledIn*}'
+            - '*.!{scheduledIn,documentInStages*,createdAt*,updatedAt*,publishedAt*,createdBy,updatedBy,publishedBy,history,scheduledIn*}'
       - prune:
           skipPruning: []
   - name: m2
@@ -36,7 +36,6 @@ sources:
           X-Forwarded-For: "{context.headers['x-forwarded-for']}"
 serve:
   playground: true
-
 plugins:
   - '@graphcommerce/graphql-mesh/plugin/forward-headers':
       forwardHeaders:

examples/magento-graphcms/components/Blog/RowBlogContent.graphql

@@ -1,4 +1,5 @@
 fragment RowBlogContent on RowBlogContent {
+  id
   content {
     raw
   }

examples/magento-graphcms/components/Layout/FooterQueryFragment.graphql → examples/magento-graphcms/components/GraphCMS/Footer/FooterQueryFragment.graphql

@@ -1,4 +1,4 @@
-fragment FooterQueryFragment on Query {
+fragment FooterQueryFragment on Query @inject(into: ["LayoutFragment"]) {
   footer(where: { identity: "footer" }) {
     id
     socialLinks {

examples/magento-graphcms/components/GraphCMS/RowRenderer.graphql → examples/magento-graphcms/components/GraphCMS/GcPage_Data_Hygraph.graphql

@@ -1,5 +1,5 @@
-fragment RowRenderer on Page @inject(into: ["HygraphPage"]) {
-  content {
+fragment PageRows_Hygraph on Page @inject(into: ["PageRows"]) {
+  rows {
     __typename
     ... on Node {
       id
@@ -14,7 +14,7 @@ fragment RowRenderer on Page @inject(into: ["HygraphPage"]) {
     ...RowButtonLinkList
     ...RowServiceOptions
     ...RowContentLinks
-    ...RowProduct
     ...RowLinks
+    ...RowCategory
   }
 }

examples/magento-graphcms/components/GraphCMS/GcRow.graphqls

@@ -0,0 +1,14 @@
+union PageRow =
+  | RowBlogContent
+  | RowButtonLinkList
+  | RowCategory
+  | RowColumnOne
+  | RowColumnThree
+  | RowColumnTwo
+  | RowContentLinks
+  | RowHeroBanner
+  | RowLinks
+  | RowProduct
+  | RowQuote
+  | RowServiceOptions
+  | RowSpecialBanner

examples/magento-graphcms/components/GraphCMS/RowCategory/GetMagentoRowCategory.graphql

@@ -0,0 +1,7 @@
+query GetMagentoRowCategory($uid: String!) {
+  categories(filters: { category_uid: { eq: $uid } }) {
+    items {
+      ...MagentoRowCategory
+    }
+  }
+}

examples/magento-graphcms/components/GraphCMS/RowCategory/MagentoRowCategory.graphql

@@ -0,0 +1,15 @@
+fragment MagentoRowCategory on CategoryTree {
+  uid
+  name
+  url_path
+  include_in_menu
+  available_sort_by
+  ...CategoryDescription
+  products(pageSize: 8) {
+    items {
+      __typename
+      uid
+      ...ProductListItem
+    }
+  }
+}

examples/magento-graphcms/components/GraphCMS/RowCategory/RowCategory.graphql

@@ -0,0 +1,8 @@
+fragment RowCategory on RowCategory {
+  id
+  categoryUrl
+  rowCategoryVariant: variant
+  category {
+    ...MagentoRowCategory
+  }
+}

examples/magento-graphcms/components/GraphCMS/RowCategory/RowCategory.tsx

@@ -0,0 +1,74 @@
+import { InContextMaskProvider, useInContextQuery } from '@graphcommerce/graphql'
+import { Box } from '@mui/material'
+import { useRouter } from 'next/router'
+import { GetMagentoRowCategoryDocument } from './GetMagentoRowCategory.gql'
+import { RowCategoryFragment } from './RowCategory.gql'
+import { Grid } from './variant/Grid'
+import { Swipeable } from './variant/Swipeable'
+
+type VariantRenderer = Record<
+  NonNullable<RowCategoryFragment['rowCategoryVariant']>,
+  React.FC<RowCategoryFragment>
+>
+
+type RowCategoryProps = RowCategoryFragment & {
+  renderer?: Partial<VariantRenderer>
+}
+
+const defaultRenderer: Partial<VariantRenderer> = {
+  Grid,
+  Swipeable,
+}
+
+function RowCategoryPreview(props: RowCategoryProps) {
+  const { category, categoryUrl, rowCategoryVariant, renderer } = props
+  const router = useRouter()
+  const canShow = router.isPreview || process.env.NODE_ENV !== 'production'
+  if (category || !canShow) return null
+
+  return (
+    <Box
+      sx={(theme) => ({
+        p: 2,
+        border: `3px dashed ${theme.palette.error.light}`,
+        m: 2,
+        borderRadius: 2,
+      })}
+    >
+      Hygraph RowCategory ({rowCategoryVariant}) was configured with Category URL &quot;
+      <code>{categoryUrl}</code>&quot;, However Magento didn&apos;t return any results.
+    </Box>
+  )
+}
+
+export function RowCategory(props: RowCategoryProps) {
+  const { renderer, rowCategoryVariant, category, ...rest } = props
+  const mergedRenderer = { ...defaultRenderer, ...renderer } as VariantRenderer
+
+  const scoped = useInContextQuery(
+    GetMagentoRowCategoryDocument,
+    { variables: { uid: category?.uid ?? '' }, skip: !category?.uid },
+    { categories: { items: category ? [category] : [] } },
+  )
+
+  if (!rowCategoryVariant) return null
+
+  const RenderType =
+    mergedRenderer?.[rowCategoryVariant] ??
+    (() => {
+      if (process.env.NODE_ENV !== 'production')
+        return <>renderer for {rowCategoryVariant} not found</>
+      return null
+    })
+
+  return (
+    <InContextMaskProvider mask={scoped.mask}>
+      <RowCategoryPreview {...props} />
+      <RenderType
+        {...rest}
+        rowCategoryVariant={rowCategoryVariant}
+        category={scoped.data.categories?.items?.[0]}
+      />
+    </InContextMaskProvider>
+  )
+}

examples/magento-graphcms/components/GraphCMS/RowCategory/variant/Grid.tsx

@@ -0,0 +1,34 @@
+import { productListLink } from '@graphcommerce/magento-product'
+import { ContainerWithHeader } from '@graphcommerce/next-ui'
+import { Link } from '@mui/material'
+import { ProductListItems } from '../../../ProductListItems'
+import { RowCategoryFragment } from '../RowCategory.gql'
+
+type GridProps = RowCategoryFragment
+
+export function Grid(props: GridProps) {
+  const { category } = props
+
+  if (!category?.name) return null
+  const { name, include_in_menu, url_path, products } = category
+
+  return (
+    <ContainerWithHeader
+      title={name}
+      rightArea={
+        include_in_menu &&
+        url_path && (
+          <Link
+            color='inherit'
+            href={productListLink({ url: url_path, filters: {}, sort: {} })}
+            underline='always'
+          >
+            {name}
+          </Link>
+        )
+      }
+    >
+      <ProductListItems title={name} items={products?.items} size='small' titleComponent='h3' />
+    </ContainerWithHeader>
+  )
+}

examples/magento-graphcms/components/GraphCMS/RowCategory/variant/Swipeable.tsx

@@ -0,0 +1,53 @@
+import { AddProductsToCartForm } from '@graphcommerce/magento-product'
+import {
+  filterNonNullableKeys,
+  RenderType,
+  responsiveVal,
+  SidebarSlider,
+  SidebarSliderProps,
+} from '@graphcommerce/next-ui'
+import { Typography } from '@mui/material'
+import { productListRenderer } from '../../../ProductListItems'
+import { RowCategoryFragment } from '../RowCategory.gql'
+
+type SwipeableProps = RowCategoryFragment & Pick<SidebarSliderProps, 'sx'>
+
+export function Swipeable(props: SwipeableProps) {
+  const { category, sx = [] } = props
+
+  // const items = category?.products?.items
+  if (!category || !category.products?.items) return null
+
+  const { name } = category
+  const items = filterNonNullableKeys(category.products.items)
+
+  return (
+    <AddProductsToCartForm>
+      <SidebarSlider
+        sx={[
+          {
+            [SidebarSlider.selectors.scroller]: {
+              gridAutoColumns: `minmax(${responsiveVal(180, 800)}, 60vh)`,
+            },
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+        sidebar={
+          <Typography variant='h2' sx={{ textTransform: 'uppercase' }}>
+            {name}
+          </Typography>
+        }
+      >
+        {items.map((item) => (
+          <RenderType
+            key={item.uid}
+            renderer={productListRenderer}
+            {...item}
+            imageOnly
+            sizes={responsiveVal(180, 900)}
+          />
+        ))}
+      </SidebarSlider>
+    </AddProductsToCartForm>
+  )
+}

examples/magento-graphcms/components/GraphCMS/RowProduct/GetMagentoRowProduct.graphql

@@ -0,0 +1,8 @@
+query GetMagentoRowProduct($urlKey: String!) {
+  products(filter: { url_key: { eq: $urlKey } }, pageSize: 1) {
+    items {
+      uid
+      ...PageRows_CategoryData
+    }
+  }
+}