Unpack required field and render recursive.

Author: Jarosław Dakowicz

packages/graphql-form/src/render/fields.tsx

@@ -1,5 +1,5 @@
 import { NewFieldProps } from '@/models';
-import { getTypeName, Options, ScalarTypes, TypeDefinition, TypeSystemDefinition } from 'graphql-js-tree';
+import { getTypeName, Options, ParserField, ScalarTypes, TypeDefinition, TypeSystemDefinition } from 'graphql-js-tree';
 import React from 'react';
 
 export const Fields: React.FC<NewFieldProps> = (props) => {
@@ -21,8 +21,17 @@ export const Fields: React.FC<NewFieldProps> = (props) => {
     if (node.type.fieldType.type === Options.array) {
         return <ArrayField {...props} />;
     }
-    if(node.type.fieldType.type === Options.required){
-        return <Fields {...props} required />
+    if (node.type.fieldType.type === Options.required) {
+        const nodeWithoutRequired: ParserField = {
+            ...node,
+            type: {
+                ...node.type,
+                fieldType: {
+                    ...node.type.fieldType.nest,
+                },
+            },
+        };
+        return <Fields {...props} required={true} node={nodeWithoutRequired} />;
     }
     if (isInput) {
         return <ObjectField {...props} node={seekNode} />;

packages/graphql-form/src/render/index.tsx

@@ -1,18 +1,20 @@
 import { NewFieldProps, VarFormProps } from '@/models';
 import { Fields } from '@/render/fields';
-import { Parser, ScalarTypes, generateNodeId, decompileType } from 'graphql-js-tree';
+import { Parser, ScalarTypes, generateNodeId, decompileType, Options } from 'graphql-js-tree';
 import React from 'react';
 
 export const Render: React.FC<NewFieldProps> = (props) => {
     const {
+        node,
         shared: {
             components: { FormLabel, FormField },
         },
     } = props;
+
     return (
-        <FormField {...props}>
-            <FormLabel {...props} />
-            <Fields {...props} />
+        <FormField {...props} required={node.type.fieldType.type === Options.required}>
+            <FormLabel {...props} required={node.type.fieldType.type === Options.required} />
+            <Fields {...props} required={node.type.fieldType.type === Options.required} />
         </FormField>
     );
 };

packages/sandbox/src/pages/index.tsx

@@ -34,6 +34,7 @@ const HomePage = () => {
         vars: [
             { name: 'createObject', type: 'CreateSource' },
             { name: 'myVar', type: 'String!' },
+            { name: 'Clients', type: '[EditClientData!]!' },
         ],
     });
     console.log(myForm);