@graphcommerce/hygraph-dynamic-rows-ui 9.0.0-canary.69 → 9.0.0-canary.70

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @graphcommerce/hygraph-dynamic-rows-ui
 
+## 9.0.0-canary.70
+
+### Patch Changes
+
+- [#2347](https://github.com/graphcommerce-org/graphcommerce/pull/2347) [`7fa50a2`](https://github.com/graphcommerce-org/graphcommerce/commit/7fa50a2f21ee9edbc67d06d7694316f101f9415f) - Resolve issue where the dynamic rows UI wouldn’t load any definitions ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.69
 
 ## 9.0.0-canary.68

package/components/PropertyPicker.tsx

@@ -1,91 +1,59 @@
-import { ApolloClient, InMemoryCache } from '@apollo/client'
-import { useFieldExtension } from '@hygraph/app-sdk-react'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { ApolloClient, gql, InMemoryCache, useQuery } from '@apollo/client'
+import { FieldExtensionProps, useFieldExtension } from '@hygraph/app-sdk-react'
 import { TextField } from '@mui/material'
+import { getIntrospectionQuery, IntrospectionQuery } from 'graphql'
 import { useEffect, useMemo, useState } from 'react'
-import { createOptionsFromInterfaceObject, objectifyGraphQLInterface } from '../lib'
-import { fetchGraphQLInterface } from '../lib/fetchGraphQLInterface'
-import { __Field } from '../types'
+import { getFieldPaths } from '../lib/getFieldPaths'
+
+function useClient(extension: FieldExtensionProps['extension']) {
+  return useMemo(
+    () =>
+      new ApolloClient({
+        uri:
+          typeof extension.config.backend === 'string'
+            ? extension.config.backend
+            : 'https://graphcommerce.vercel.app/api/graphql', // fallback on the standard GraphCommerce Schema
+        cache: new InMemoryCache(),
+      }),
+    [extension.config.backend],
+  )
+}
 
 export function PropertyPicker() {
-  const { value, onChange, extension } = useFieldExtension()
+  const fieldExtension = useFieldExtension()
+
+  const { value, onChange, extension } = fieldExtension
   const [localValue, setLocalValue] = useState<string | undefined | null>(
     typeof value === 'string' ? value : undefined,
   )
-  const [fields, setFields] = useState<__Field[] | null>(null)
+
+  const client = useClient(extension)
+  const { data, loading, error } = useQuery<IntrospectionQuery>(gql(getIntrospectionQuery()), {
+    client,
+  })
+  // eslint-disable-next-line no-underscore-dangle
+  const schema = data?.__schema
 
   useEffect(() => {
     onChange(localValue).catch((err) => err)
   }, [localValue, onChange])
 
-  const graphQLInterfaceQuery = useMemo(() => {
-    const client = new ApolloClient({
-      uri:
-        typeof extension.config.backend === 'string'
-          ? extension.config.backend
-          : 'https://graphcommerce.vercel.app/api/graphql', // fallback on the standard GraphCommerce Schema
-      cache: new InMemoryCache(),
-    })
-    return fetchGraphQLInterface(client)
-  }, [extension.config.backend])
-
-  // Prepare options
-  const numberOptions = useMemo(
-    () =>
-      createOptionsFromInterfaceObject(
-        objectifyGraphQLInterface(fields, 'number', ['ProductInterface']),
-      ),
-    [fields],
-  )
-  const textOptions = useMemo(
-    () =>
-      createOptionsFromInterfaceObject(
-        objectifyGraphQLInterface(fields, 'text', ['ProductInterface']),
-      ),
-    [fields],
-  )
-  const allOptions = useMemo(
-    () => ({
-      text: [...textOptions, { label: 'url', id: 'url' }].sort((a, b) => {
-        if (!a.label.includes('.') && !b.label.includes('.')) {
-          return a.label.localeCompare(b.label)
-        }
-        if (a.label.includes('.')) {
-          return 1
-        }
-        return -1
-      }),
-      number: [...numberOptions, { label: 'url', id: 'url' }],
-    }),
-    [numberOptions, textOptions],
-  )
-
-  // For now this we can not split number and text field options anymore as Hygraph made parent field apiId unreachable :/
-  // const fieldType = field.parent.apiId ?? 'ConditionText'
-  // const options = fieldType === 'ConditionNumber' ? allOptions.number : allOptions.text
-  const options = [...allOptions.text, ...allOptions.number]
-
-  if (!fields) {
-    Promise.resolve(graphQLInterfaceQuery)
-      .then((res) => {
-        const newFields: __Field[] = res?.data.__type?.fields
-
-        setFields(newFields)
-      })
-      .catch((err) => err)
-
-    return <div>Loading fields...</div>
-  }
-  if (options.length < 1) return <div>No properties available</div>
-  if (options.length > 10000) return <div>Too many properties to display</div>
+  const fieldPaths = useMemo(() => {
+    if (!schema) return []
+    return getFieldPaths(schema, ['ProductInterface'])
+      .sort((a, b) => a.depth() - b.depth())
+      .map((fp) => fp.stringify())
+      .filter<string>((v) => v !== undefined)
+  }, [schema])
 
   return (
     <TextField
       id='property-selector'
-      select
+      select={!!fieldPaths.length}
+      variant='outlined'
+      size='small'
       SelectProps={{
         native: true,
-        variant: 'outlined',
       }}
       value={localValue}
       onChange={(v) => {
@@ -95,6 +63,7 @@ export function PropertyPicker() {
       fullWidth
       sx={{
         mt: '4px',
+        fontSize: '0.8em',
         '& .MuiInputBase-root': {
           borderRadius: { xs: '2px!important' },
         },
@@ -119,11 +88,18 @@ export function PropertyPicker() {
         },
       }}
     >
-      {options.map((o) => (
-        <option key={o.id} value={o.id}>
-          {o.label}
-        </option>
-      ))}
+      {fieldPaths.length > 0 ? (
+        <>
+          <option value='url'>url</option>
+          {fieldPaths.map((fp) => (
+            <option key={fp} value={fp}>
+              {fp}
+            </option>
+          ))}
+        </>
+      ) : (
+        <>{loading ? 'Loading..' : error?.message}</>
+      )}
     </TextField>
   )
 }

package/lib/getFieldPaths.ts

@@ -0,0 +1,66 @@
+import { IntrospectionField, IntrospectionOutputTypeRef, IntrospectionSchema } from 'graphql'
+
+function getType(type: IntrospectionOutputTypeRef) {
+  switch (type.kind) {
+    case 'NON_NULL':
+    case 'LIST':
+      return getType(type.ofType)
+    default:
+      return type
+  }
+}
+
+class FieldPath {
+  constructor(
+    public field: IntrospectionField,
+    private prev: FieldPath | undefined,
+  ) {}
+
+  stringify(filter?: string[]): string | undefined {
+    if (this.field.type.kind === 'SCALAR' && filter && !filter.includes(this.field.type.name)) {
+      return undefined
+    }
+
+    const prevStr = this.prev?.stringify(filter)
+    return prevStr ? `${prevStr}.${this.field.name}` : this.field.name
+  }
+
+  depth = () => (this?.prev?.depth() ?? 0) + 1
+}
+
+export function getFieldPaths(
+  schema: IntrospectionSchema,
+  types: string[],
+  prevPath: FieldPath | undefined = undefined,
+): FieldPath[] {
+  const typeName = types[types.length - 1]
+
+  const paths: FieldPath[] = []
+  const type = schema.types.find((t) => t.name === typeName)
+
+  if (!type) return paths
+
+  if ((prevPath?.depth() ?? 0) > 3) return paths
+
+  if (type.kind === 'OBJECT' || type.kind === 'INTERFACE') {
+    type.fields.forEach((field) => {
+      const t = getType(field.type)
+
+      if (!types.includes(t.name) && !field.deprecationReason) {
+        const newTypes = [...types, t.name]
+
+        const newPath = new FieldPath(field, prevPath)
+
+        if (t.kind === 'OBJECT' || t.kind === 'INTERFACE') {
+          paths.push(...getFieldPaths(schema, newTypes, newPath))
+        } else if (t.kind === 'SCALAR' || t.kind === 'ENUM') {
+          paths.push(newPath)
+        } else if (t.kind === 'UNION') {
+          // not supported currently
+        }
+      }
+    })
+  }
+
+  return paths
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/hygraph-dynamic-rows-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.69",
+  "version": "9.0.0-canary.70",
   "sideEffects": false,
   "type": "commonjs",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@apollo/client": "~3.10.8",
-    "@graphcommerce/next-config": "9.0.0-canary.69",
+    "@graphcommerce/next-config": "9.0.0-canary.70",
     "@hygraph/app-sdk-react": "^0.0.4",
     "@lingui/core": "^4.11.2",
     "@lingui/macro": "^4.11.2",
@@ -32,9 +32,9 @@
     "webpack": "~5.93.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "9.0.0-canary.69",
-    "@graphcommerce/prettier-config-pwa": "9.0.0-canary.69",
-    "@graphcommerce/typescript-config-pwa": "9.0.0-canary.69",
+    "@graphcommerce/eslint-config-pwa": "9.0.0-canary.70",
+    "@graphcommerce/prettier-config-pwa": "9.0.0-canary.70",
+    "@graphcommerce/typescript-config-pwa": "9.0.0-canary.70",
     "@types/react-is": "^18.3.0",
     "babel-plugin-macros": "^3.1.0",
     "eslint": "^8",

package/pages/property-picker.tsx

@@ -1,15 +1,14 @@
 import { Wrapper } from '@hygraph/app-sdk-react'
-import React from 'react'
-import { PropertyPicker } from '..'
+import React, { useEffect } from 'react'
+import { PropertyPicker } from '../components/PropertyPicker'
 
 export default function DRPropertyPicker() {
   const fieldContainer = React.useRef<HTMLDivElement | null>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     /**
      * Some styling is being undone here to resolve conflicts between Hygraph App SDK and CssAndFramerMotionProvider.
      */
-
     const frameBox1 = fieldContainer?.current?.parentElement
     if (frameBox1) {
       frameBox1.style.position = 'static'

package/pages/setup.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Page } from '..'
 
 export default function Setup() {
@@ -8,7 +8,7 @@ export default function Setup() {
    * This is a hack to fix the height of the iframe, which was malfunctioning because of a conflict
    * with FramerNextPages
    */
-  React.useEffect(() => {
+  useEffect(() => {
     const framerParent = appContainer?.current?.parentElement
     if (framerParent) {
       framerParent.style.position = 'static'

package/lib/createOptionsFromInterfaceObject.ts

@@ -1,42 +0,0 @@
-import { ProductProperty } from '../types'
-
-export const createOptionsFromInterfaceObject = (
-  obj: object,
-  path = '',
-  inputs: ProductProperty[] = [],
-  parent = '',
-): ProductProperty[] => {
-  for (const [key, value] of Object.entries(obj)) {
-    /** Keep count of the current path and parent */
-    const currentPath: string = path ? `${path}.${key}` : key
-    const currentParent: string = parent ? `${parent}/` : ''
-
-    /**
-     * If the value is a string, number or boolean, add it to the inputs array. If the value is an
-     * array, recurse on the first item. If the value is an object, recurse on all it's keys.
-     */
-    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-      inputs.push({
-        label: currentPath,
-        id: currentPath,
-      })
-    } else if (Array.isArray(value) && value.length > 0) {
-      createOptionsFromInterfaceObject(
-        value[0] as object,
-        `${currentPath}[0]`,
-        inputs,
-        `${currentParent}${key}`,
-      )
-    } else if (typeof value === 'object' && value !== null) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      createOptionsFromInterfaceObject(
-        value as object,
-        currentPath,
-        inputs,
-        `${currentParent}${key}`,
-      )
-    }
-  }
-
-  return inputs
-}

package/lib/createRecursiveIntrospectionQuery.ts

@@ -1,13 +0,0 @@
-export const createRecursiveIntrospectionQuery = (type: string, depth: number) => {
-  let baseQuery = `__type(name: "${type}") { name fields { name `
-  let endQuery = ' } }'
-
-  for (let i = 0; i < depth; i++) {
-    baseQuery += 'type { name ofType { name fields { name isDeprecated '
-    endQuery += ' } } }'
-  }
-
-  const result = baseQuery + endQuery
-
-  return result
-}

package/lib/fetchGraphQLInterface.ts

@@ -1,14 +0,0 @@
-import { ApolloClient, NormalizedCacheObject, gql } from '@apollo/client'
-import { createRecursiveIntrospectionQuery } from './createRecursiveIntrospectionQuery'
-
-export const fetchGraphQLInterface = (client: ApolloClient<NormalizedCacheObject>) => {
-  const introspectionQuery = createRecursiveIntrospectionQuery('ProductInterface', 4)
-
-  return client.query({
-    query: gql`
-        query getSchema {
-          ${introspectionQuery}
-        }
-      `,
-  })
-}

package/lib/index.ts

@@ -1,4 +0,0 @@
-export * from './createOptionsFromInterfaceObject'
-export * from './createRecursiveIntrospectionQuery'
-export * from './fetchGraphQLInterface'
-export * from './objectifyGraphQLInterface'

package/lib/objectifyGraphQLInterface.ts

@@ -1,62 +0,0 @@
-import { __Field } from '../types'
-
-/**
- * In this function we create an object from the GraphQL interface.
- * We need this so we can map out the properties of an interface that is needed
- * for the Dynamic Rows Autocomplete.
- * @param fields - The GraphQL interface object that is read from the schema.
- * @returns
- */
-export const objectifyGraphQLInterface = (
-  fields: __Field[] | null,
-  conditionType: 'text' | 'number' | 'all',
-  skip: string[],
-): object => {
-  let objectifiedInterface: object = {}
-
-  if (!fields) return objectifiedInterface
-
-  for (const [, value] of Object.entries(fields)) {
-    const nestedFields = value?.type?.ofType?.fields
-    const { isDeprecated } = value
-    const typeOf = value?.type?.name
-    const typeName = value?.type?.ofType?.name ?? ''
-
-    /**
-     * With typevalue we can know of which type a property is, so we for example can determine to to hide string values in ConditionNumbers.
-     */
-    let typeValue: 'number' | 'text' | 'boolean'
-    switch (typeOf) {
-      case 'Float' || 'Int':
-        typeValue = 'number'
-        break
-      case 'Boolean':
-        typeValue = 'text' // Seperate booleans are not supported yet.
-        break
-      default:
-        typeValue = 'text'
-        break
-    }
-
-    if (skip.includes(typeName) || isDeprecated || !value?.name) {
-      // do nothing
-    } else if (nestedFields) {
-      objectifiedInterface = {
-        ...objectifiedInterface,
-        [value.name]: objectifyGraphQLInterface(nestedFields, conditionType, [...skip, typeName]),
-      }
-    } else if (typeOf && conditionType === 'all') {
-      objectifiedInterface = {
-        ...objectifiedInterface,
-        [value.name]: typeValue,
-      }
-    } else if (conditionType === typeValue) {
-      objectifiedInterface = {
-        ...objectifiedInterface,
-        [value.name]: typeValue,
-      }
-    }
-  }
-
-  return objectifiedInterface
-}