{"id":13929218,"url":"https://github.com/graphql-editor/graphql-form","last_synced_at":"2025-04-22T23:27:23.834Z","repository":{"id":41386109,"uuid":"493645839","full_name":"graphql-editor/graphql-form","owner":"graphql-editor","description":"GraphQL Form. Driver driven forms in react","archived":false,"fork":false,"pushed_at":"2023-08-14T15:04:10.000Z","size":1521,"stargazers_count":3,"open_issues_count":13,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T15:04:49.361Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/graphql-editor.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-05-18T12:05:32.000Z","updated_at":"2023-05-01T10:58:15.000Z","dependencies_parsed_at":"2024-01-14T18:09:21.102Z","dependency_job_id":null,"html_url":"https://github.com/graphql-editor/graphql-form","commit_stats":{"total_commits":72,"total_committers":3,"mean_commits":24.0,"dds":0.09722222222222221,"last_synced_commit":"a572676222bc09a01f2636ef82f3032a60b796c0"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphql-editor","download_url":"https://codeload.github.com/graphql-editor/graphql-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248698850,"owners_count":21147543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-07T18:02:11.283Z","updated_at":"2025-04-17T03:30:48.873Z","avatar_url":"https://github.com/graphql-editor.png","language":"TypeScript","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"# GraphQL Form\n\nSet of Graphql forms that allow to build react forms from files exported from [GraphQL Editor](https://graphqleditor.com)\n\n## Usage\n\nGo to [GraphQL Editor](https://graphqleditor.com) and create a form in the form builder there.\n\n### With defined UI lib\n\nThis example refers to `graphql-form-mui` but is also valid for other libraries\n\n### Defining your own form library\n\nYou need to provide components of type `React.FC\u003cPassedFormProps\u003e` for every type of field to create your own form displayer. Then just provide `.ts` file with form definition to render the form\n\n```tsx\nimport ArrayField from '@/components/ArrayField';\nimport BooleanField from '@/components/BooleanField';\nimport EnumField from '@/components/EnumField';\nimport FormField from '@/components/FormField';\nimport FormLabel from '@/components/FormLabel';\nimport NullField from '@/components/NullField';\nimport NumberField from '@/components/NumberField';\nimport ObjectField from '@/components/ObjectField';\nimport UniversalField from '@/components/UniversalField';\nimport { FormDisplayer, FormLibraryProps } from 'graphql-form';\nimport React from 'react';\n\nconst MuiForm: React.FC\u003cFormLibraryProps\u003e = (props) =\u003e {\n    return (\n        \u003cFormDisplayer\n            {...props}\n            components={{\n                ArrayField: ArrayField,\n                BooleanField: BooleanField,\n                EnumField: EnumField,\n                FormField: FormField,\n                FormLabel: FormLabel,\n                NullField: NullField,\n                NumberField: NumberField,\n                ObjectField: ObjectField,\n                UniversalField: UniversalField,\n            }}\n        /\u003e\n    );\n};\n\nexport default MuiForm;\n```\n\n### Defining custom widgets\n\n### Validation\n\n```tsx\nimport { Layout } from '@/src/layouts';\nimport MuiForm from 'graphql-form-mui';\nimport { getTypeName, Parser, ScalarTypes, TypeDefinition } from 'graphql-js-tree';\nimport addSource from '@/src/data/addSource';\nimport schema from '@/src/data/schema';\nimport { useState } from 'react';\nimport { createWidget, validateForm, eraseForm } from 'graphql-form';\nimport styled from '@emotion/styled';\nimport Head from 'next/head';\nimport { Button } from '@mui/material';\n\nconst parsedSchema = Parser.parse(schema);\n\nconst DateWidget = createWidget\u003cany\u003e({\n    name: 'date',\n    Component: () =\u003e {\n        return \u003cinput type=\"date\" /\u003e;\n    },\n    requirements: ({ f, nodes }) =\u003e {\n        const typeName = getTypeName(f.type.fieldType);\n        const seekNode = nodes.find((n) =\u003e n.name === typeName);\n        return typeName === ScalarTypes.String || seekNode?.data.type === TypeDefinition.ScalarTypeDefinition;\n    },\n});\nconst url = 'https://faker.graphqleditor.com/aexol-internal/company-manager/graphql';\n\nconst execute = async (query: string) =\u003e {\n    const computedHeaders = Object.assign(\n        {},\n        {\n            Accept: 'application/json',\n            'Content-Type': 'application/json',\n        },\n        // ...(schemaHeaders?.map((v) =\u003e ({ [v[0]]: v[1] })) || []),\n    );\n    const response = await fetch(url, {\n        method: 'POST',\n        body: JSON.stringify({ query }),\n        headers: computedHeaders,\n    })\n        .then((r) =\u003e r.json())\n        .then((r) =\u003e r.data);\n    return response;\n};\n\nconst HomePage = () =\u003e {\n    const [myForm, setMyForm] = useState(addSource);\n    const [query, setQuery] = useState('');\n    const [userSubmittedInvalidForm, setUserSubmittedInvalidForm] = useState(false);\n    return (\n        \u003c\u003e\n            \u003cHead\u003e\n                \u003clink\n                    rel=\"stylesheet\"\n                    href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\u0026display=swap\"\n                /\u003e\n            \u003c/Head\u003e\n            \u003cLayout pageTitle=\"HomePage\"\u003e\n                \u003cCenterForm\u003e\n                    \u003cMuiForm\n                        formFile={myForm}\n                        nodes={parsedSchema.nodes}\n                        onChange={(e, q) =\u003e {\n                            if (userSubmittedInvalidForm) {\n                                const [form] = validateForm(e, parsedSchema.nodes, {\n                                    REQUIRED: 'This value is required',\n                                    VALUE_IN_ARRAY_REQUIRED: 'Value in array is required',\n                                });\n                                setMyForm(form);\n                            } else {\n                                setMyForm(e);\n                            }\n                            setQuery(q);\n                        }}\n                        runQuery={execute}\n                        widgetComponents={[DateWidget]}\n                    /\u003e\n                    \u003cToTheLeft\u003e\n                        \u003cButton onClick={() =\u003e setMyForm(eraseForm(myForm, parsedSchema.nodes))} variant=\"contained\"\u003e\n                            Erase\n                        \u003c/Button\u003e\n                        \u003cButton\n                            onClick={() =\u003e {\n                                const [form, isValid] = validateForm(myForm, parsedSchema.nodes, {\n                                    REQUIRED: 'This value is required',\n                                    VALUE_IN_ARRAY_REQUIRED: 'Value in array is required',\n                                });\n                                console.log(isValid, form);\n                                setMyForm(form);\n                                setUserSubmittedInvalidForm(!isValid);\n                                if (isValid) {\n                                    execute(query);\n                                }\n                            }}\n                            variant=\"contained\"\n                        \u003e\n                            Submit\n                        \u003c/Button\u003e\n                    \u003c/ToTheLeft\u003e\n                \u003c/CenterForm\u003e\n            \u003c/Layout\u003e\n        \u003c/\u003e\n    );\n};\n\nexport default HomePage;\nconst CenterForm = styled.div`\n    max-width: 480px;\n    margin: auto;\n    margin-bottom: 100px;\n`;\nconst ToTheLeft = styled.div`\n    display: flex;\n    justify-content: flex-end;\n`;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphql-editor%2Fgraphql-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphql-editor%2Fgraphql-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphql-editor%2Fgraphql-form/lists"}