@graphcommerce/hygraph-dynamic-rows 6.2.0-canary.8

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @graphcommerce/hygraph-dynamic-rows
+
+## 6.2.0-canary.8
+
+### Minor Changes
+
+- [#1912](https://github.com/graphcommerce-org/graphcommerce/pull/1912) [`a43d389e9`](https://github.com/graphcommerce-org/graphcommerce/commit/a43d389e956fe69b73238b12c98c781b7044e4bb) - Added dynamic rows feature and better performance for Hygraph ([@JoshuaS98](https://github.com/JoshuaS98))

package/graphql/AllDynamicRows.graphql

@@ -0,0 +1,11 @@
+query AllDynamicRows {
+  dynamicRows(first: 1000) {
+    id
+    conditions {
+      __typename
+      ...ConditionNumber
+      ...ConditionText
+      ...ConditionAnd
+    }
+  }
+}

package/graphql/Conditions.graphql

@@ -0,0 +1,29 @@
+fragment ConditionNumber on ConditionNumber {
+  __typename
+  property
+  operator
+  numberValue: value
+}
+
+fragment ConditionText on ConditionText {
+  __typename
+  property
+  stringValue: value
+}
+
+fragment ConditionOr on ConditionOr {
+  __typename
+  conditions {
+    ...ConditionNumber
+    ...ConditionText
+  }
+}
+
+fragment ConditionAnd on ConditionAnd {
+  __typename
+  conditions {
+    ...ConditionNumber
+    ...ConditionText
+    ...ConditionOr
+  }
+}

package/graphql/DynamicRow.graphql

@@ -0,0 +1,19 @@
+fragment DynamicRow on DynamicRow @injectable {
+  placement
+  target {
+    ... on Node {
+      id
+    }
+  }
+
+  row {
+    __typename
+    ... on Node {
+      id
+    }
+
+    ...RowColumnOne
+    ...RowQuote
+    ...RowLinks
+  }
+}

package/graphql/DynamicRows.graphql

@@ -0,0 +1,5 @@
+query DynamicRows($rowIds: [ID!]!) {
+  dynamicRows(where: { id_in: $rowIds }) {
+    ...DynamicRow
+  }
+}

package/graphql/index.ts

@@ -0,0 +1,4 @@
+export * from './AllDynamicRows.gql'
+export * from './Conditions.gql'
+export * from './DynamicRow.gql'
+export * from './DynamicRows.gql'

package/lib/hygraphDynamicRows.ts

@@ -0,0 +1,145 @@
+/**
+ * - Boven de product description zetten? in rowrenderer zetten
+ * - Hoe gaan we dit optioneel maken?
+ * - Hoe gaan we dit upgradebaar maken? management sdk
+ */
+
+import { HygraphPagesQuery } from '@graphcommerce/graphcms-ui'
+import { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import {
+  AllDynamicRowsDocument,
+  ConditionTextFragment,
+  ConditionNumberFragment,
+  ConditionOrFragment,
+  ConditionAndFragment,
+  DynamicRowsDocument,
+} from '../graphql'
+
+/**
+ * This generally works the same way as lodash get, however, when encountering an array it will
+ * return all values.
+ */
+function getByPath(
+  value: unknown,
+  query: string | Array<string | number>,
+): (undefined | string | number | bigint)[] {
+  const splitQuery = Array.isArray(query)
+    ? query
+    : query
+        .replace(/(\[(\d)\])/g, '.$2')
+        .replace(/^\./, '')
+        .split('.')
+
+  if (!splitQuery.length || splitQuery[0] === undefined)
+    return [value as undefined | string | number | bigint]
+
+  const key = splitQuery[0]
+
+  if (Array.isArray(value)) {
+    return value.map((item) => getByPath(item, splitQuery)).flat(1000)
+  }
+
+  if (
+    typeof value !== 'object' ||
+    value === null ||
+    !(key in value) ||
+    (value as Record<string | number, unknown>)[key] === undefined
+  ) {
+    return [undefined]
+  }
+
+  const res = getByPath((value as Record<string | number, unknown>)[key], splitQuery.slice(1))
+  return Array.isArray(res) ? res : [res]
+}
+
+/** A recursive match function that is able to match a condition against the requested conditions. */
+function matchCondition(
+  condition:
+    | ConditionTextFragment
+    | ConditionNumberFragment
+    | ConditionOrFragment
+    | ConditionAndFragment,
+  obj: object,
+) {
+  if (condition.__typename === 'ConditionOr')
+    return condition.conditions.some((c) => matchCondition(c, obj))
+
+  if (condition.__typename === 'ConditionAnd')
+    return condition.conditions.every((c) => matchCondition(c, obj))
+
+  if (condition.__typename === 'ConditionNumber') {
+    return getByPath(obj, condition.property).some((v) => {
+      const value = Number(v)
+      if (!value || Number.isNaN(value)) return false
+
+      if (condition.operator === 'EQUAL') return value === condition.numberValue
+      if (condition.operator === 'LTE') return value <= condition.numberValue
+      if (condition.operator === 'GTE') return value >= condition.numberValue
+      return false
+    })
+  }
+  if (condition.__typename === 'ConditionText') {
+    return getByPath(obj, condition.property).some((value) => value === condition.stringValue)
+  }
+
+  return false
+}
+
+/**
+ * Fetch the page content for the given urls.
+ *
+ * - Uses an early bailout to check to reduce hygraph calls.
+ * - Implements an alias sytem to merge the content of multiple pages.
+ */
+export async function hygraphDynamicRows(
+  client: ApolloClient<NormalizedCacheObject>,
+  pageQuery: Promise<{ data: HygraphPagesQuery }>,
+  url: string,
+  cached: boolean,
+  additionalProperties?: Promise<object> | object,
+): Promise<{ data: HygraphPagesQuery }> {
+  const alwaysCache = process.env.NODE_ENV !== 'development' ? 'cache-first' : undefined
+  const fetchPolicy = cached ? alwaysCache : undefined
+
+  const allRoutes = await client.query({ query: AllDynamicRowsDocument, fetchPolicy: alwaysCache })
+
+  // Get the required rowIds from the conditions
+  const properties = { ...(await additionalProperties), url }
+
+  const rowIds = allRoutes.data.dynamicRows
+    .filter((availableDynamicRow) =>
+      availableDynamicRow.conditions.some((condition) => matchCondition(condition, properties)),
+    )
+    .map((row) => row.id)
+
+  const dynamicRows =
+    rowIds.length !== 0
+      ? client.query({ query: DynamicRowsDocument, variables: { rowIds }, fetchPolicy })
+      : undefined
+
+  const [pageResult, dynamicResult] = await Promise.all([pageQuery, dynamicRows])
+
+  // Create a copy of the content array.
+  const content = [...(pageResult.data.pages[0]?.content ?? [])]
+
+  dynamicResult?.data.dynamicRows.forEach((dynamicRow) => {
+    const { placement, target, row } = dynamicRow
+    if (!row) return
+
+    if (!target) {
+      if (placement === 'BEFORE') content.unshift(row)
+      else content.push(row)
+      return
+    }
+
+    const targetIdx = content.findIndex((c) => c.id === target.id)
+    if (placement === 'BEFORE') content.splice(targetIdx, 0, row)
+    if (placement === 'AFTER') content.splice(targetIdx + 1, 0, row)
+    if (placement === 'REPLACE') content.splice(targetIdx, 1, row)
+  })
+
+  if (!content.length) return pageResult
+
+  // Return the merged page result.
+  return { data: { ...pageResult.data, pages: [{ ...pageResult.data.pages[0], content }] } }
+}

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@graphcommerce/hygraph-dynamic-rows",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "6.2.0-canary.8",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.8",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.8",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.8"
+  },
+  "dependencies": {
+    "@graphcommerce/graphql": "6.2.0-canary.8",
+    "@graphcommerce/image": "6.2.0-canary.8",
+    "@graphcommerce/next-ui": "6.2.0-canary.8",
+    "@graphcommerce/graphcms-ui": "6.2.0-canary.8"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.10.16",
+    "next": "^13.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/plugins/hygraphDynamicRowsPageContent.ts

@@ -0,0 +1,19 @@
+import type { hygraphPageContent } from '@graphcommerce/graphcms-ui'
+import type { MethodPlugin } from '@graphcommerce/next-config'
+import { hygraphDynamicRows } from '../lib/hygraphDynamicRows'
+
+export const func = 'hygraphPageContent'
+export const exported = '@graphcommerce/graphcms-ui'
+
+const hygraphDynamicRowsPageContent: MethodPlugin<typeof hygraphPageContent> = (
+  prev,
+  client,
+  url,
+  additionalProperties,
+  cached = false,
+) => {
+  const pageQuery = prev(client, url, additionalProperties, cached)
+  return hygraphDynamicRows(client, pageQuery, url, cached, additionalProperties)
+}
+
+export const plugin = hygraphDynamicRowsPageContent

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}