Merge pull request #22 from graphql-editor/fix-required-fields

Fix required fields

Author: Gombek7

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "graphql-form-mui",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "description": "Easy form creation with GraphQL Editor and React",
     "main": "lib/index.js",
     "scripts": {
@@ -21,7 +21,7 @@
     "license": "MIT",
     "homepage": "https://form.graphqleditor.com",
     "peerDependencies": {
-        "graphql-form": "*",
+        "graphql-form": "^0.1.9",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
     },

packages/graphql-form-mui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "graphql-form",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "description": "Easy form creation with GraphQL Editor and React",
     "main": "lib/index.js",
     "scripts": {

packages/graphql-form/package.json

@@ -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/fields.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/graphql-form/src/render/index.tsx

@@ -1,6 +1,6 @@
 {
     "name": "sandbox",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "private": true,
     "scripts": {
         "export": "next build && next export",
@@ -13,8 +13,8 @@
         "@mui/material": "^5.8.0",
         "dotenv-cli": "^5.0.0",
         "framer-motion": "^6.2.8",
-        "graphql-form": "*",
-        "graphql-form-mui": "*",
+        "graphql-form": "^0.1.9",
+        "graphql-form-mui": "^0.1.9",
         "graphql-js-tree": "^0.1.1",
         "gray-matter": "^4.0.3",
         "highlight.js": "^11.5.0",

packages/sandbox/package.json

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

packages/sandbox/src/pages/index.tsx

@@ -1,6 +1,6 @@
 {
     "name": "zeus-form-mui",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "description": "Easy form creation with GraphQL Editor and React",
     "main": "lib/index.js",
     "scripts": {
@@ -21,7 +21,7 @@
     "license": "MIT",
     "homepage": "https://form.graphqleditor.com",
     "peerDependencies": {
-        "graphql-form": "*",
+        "graphql-form": "^0.1.9",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
     },

packages/zeus-form-mui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zeus-form",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "description": "Easy form creation with GraphQL Editor and React",
     "main": "lib/index.js",
     "scripts": {