{"id":19011613,"url":"https://github.com/graphql-editor/graphql-react-admin","last_synced_at":"2025-10-18T18:37:10.500Z","repository":{"id":100001392,"uuid":"325770598","full_name":"graphql-editor/graphql-react-admin","owner":"graphql-editor","description":"Admin components for GraphQL schemas","archived":false,"fork":false,"pushed_at":"2021-01-25T09:17:53.000Z","size":174,"stargazers_count":5,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-17T16:03:18.066Z","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":"mit","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":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-12-31T10:01:26.000Z","updated_at":"2023-05-01T10:26:56.000Z","dependencies_parsed_at":"2023-05-11T15:00:26.979Z","dependency_job_id":null,"html_url":"https://github.com/graphql-editor/graphql-react-admin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-react-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-react-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-react-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-react-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphql-editor","download_url":"https://codeload.github.com/graphql-editor/graphql-react-admin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250339383,"owners_count":21414351,"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-11-08T19:15:00.223Z","updated_at":"2025-10-18T18:37:10.420Z","avatar_url":"https://github.com/graphql-editor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GraphQL React Admin\n\nEasily generate react forms for your GraphQL schema and create instant Form based GraphiQL.\n\n- [GraphQL React Admin](#graphql-react-admin)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [FormQL](#formql)\n    - [ZeusForm](#zeusform)\n  - [Themes](#themes)\n  - [Deps](#deps)\n  - [Development](#development)\n  - [Releasing](#releasing)\n\n## Installation\n\n```sh\nnpm i graphql-react-admin react react-dom @rjsf/core\n```\n\n## Usage\n\n### FormQL\n\nInteractive component for full GraphiQL experience using forms\n\n```tsx\nimport { FormQL } from 'graphql-react-admin';\nimport React from 'react';\n\nconst schema = `\ntype Query{\n\tlistBooks: [Book!]!\n\tlistAuthors: [Author!]!\n\tgetBook(\n\t\tid: String\n\t): Book!\n\tgetAuthor(\n\t\tid: String\n\t): Author!\n\t\"\"\"\n\ttype object node\n\t\"\"\"\n\tgetAllRentals: [RentABook!]\n}\n\ntype Book{\n\tid: ID\n\tname: String!\n\tauthor: Author!\n}\n\ntype Author{\n\tid: ID\n\tfirstName: String!\n\tlastName: String!\n}\n\n\"\"\"\ntype object node\n\"\"\"\ntype RentABook{\n\t\"\"\"\n\ttype object node\n\t\"\"\"\n\tclient: Customer!\n\t\"\"\"\n\tscalar object node\n\t\"\"\"\n\tstart: Date!\n\t\"\"\"\n\tscalar object node\n\t\"\"\"\n\tend: Date\n}\n\n\"\"\"\ntype object node\n\"\"\"\ntype Customer{\n\t\"\"\"\n\tString object node\n\t\"\"\"\n\tfirstName: String\n\t\"\"\"\n\tString object node\n\t\"\"\"\n\tlastName: String\n\t\"\"\"\n\tID object node\n\t\"\"\"\n\tID: ID\n}\n\n\"\"\"\nscalar object node\n\"\"\"\nscalar Date\n\ntype Mutation{\n\tcreateAuthor(\n\t\tauthor: CreateAuthorInput\n\t): Author!\n\tupdateAuthor(\n\t\tauthor: UpdateAuthorInput\n\t): Author!\n\tupdateBook(\n\t\tbook: UpdateBookInput\n\t): Book!\n\t\"\"\"\n\ttype object node\n\t\"\"\"\n\tcreateCustomer(\n\t\tinputNode: CreateCustomerInput\n\t): Customer\n\t\"\"\"\n\ttype object node\n\t\"\"\"\n\trent(\n\t\tinputNode: rentInput\n\t): RentABook\n}\n\ninput CreateAuthorInput{\n\tfirstName: String!\n\tlastName: String!\n}\n\ninput UpdateAuthorInput{\n\tid: ID!\n\tfirstName: String!\n\tlastName: String!\n}\n\ninput UpdateBookInput{\n\tid: ID!\n\tname: String!\n\tauthor: String!\n}\n\n\"\"\"\ninput object node\n\"\"\"\ninput CreateCustomerInput{\n\t\"\"\"\n\tString object node\n\t\"\"\"\n\tfirstName: String\n\t\"\"\"\n\tString object node\n\t\"\"\"\n\tlastName: String\n}\n\n\"\"\"\ninput object node\n\"\"\"\ninput rentInput{\n\t\"\"\"\n\tString object node\n\t\"\"\"\n\tcustomerID: String\n\t\"\"\"\n\tString object node\n\t\"\"\"\n\tbookID: String\n}\n\ninput CreateBookInput{\n\tname: String!\n\tauthor: String!\n}\nschema{\n\tquery: Query,\n\tmutation: Mutation\n}\n`;\n\nexport const App = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003cFormQL schema={schema} /\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n### ZeusForm\n\nMighty `graphql-zeus` powered form with validation field generation.\n\n1. Generate zeus for your GraphQL schema.\n2. Import `ValueTypes` from generated schema\n3. You have a form with validation and full typings basing on schema and inputs\n\n```tsx\nimport React from 'react';\nimport { PaymentType, ValueTypes } from './graphql-zeus';\nimport { ZeusForm } from 'graphql-react-admin';\nconst Form = ZeusForm\u003cValueTypes\u003e({ url: 'https://faker.graphqleditor.com/a-team/potus/graphql' });\nconst AddOrderForm = Form('AdminMutation', 'createOrder');\n\nexport const ZeusApp = () =\u003e {\n    return (\n        \u003cdiv style={{ padding: 60 }}\u003e\n            \u003cAddOrderForm\n                formData={{\n                    createOrder: {\n                        refId: Math.floor(10000 * Math.random()) + '',\n                        loadAddressKey: { addressKey: '123' },\n                        plannedEndDate: new Date().toISOString(),\n                        unloadAddressKey: { addressKey: '123' },\n                    },\n                }}\n                onSubmit={(e) =\u003e {\n                    console.log(e);\n                }}\n            /\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n## Themes\n\nAs this form is based on `@rjsf/core` package it support its themes\n\n```tsx\nimport { withTheme } from '@rjsf/core';\n\nexport const App = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003cFormQL\n                FormComponent={withTheme({\n                    /* Create your theme here */\n                })}\n                schema={schema}\n            /\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n## Deps\n\nAdmin uses `@rjsf/core` under the hood. They have some really cool themes including `fluent`, `antd` and `material-ui`\n\n## Development\n\nIf you would like to develop `graphql-react-admin`\n\n```sh\ngit clone https://github.com/graphql-editor/graphql-react-admin\ncd graphql-react-admin\nnpm i\nnpm run start\n```\n\n## Releasing\n\nBump version and push to develop or master to release with `@latest` or `@beta` tag.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphql-editor%2Fgraphql-react-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphql-editor%2Fgraphql-react-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphql-editor%2Fgraphql-react-admin/lists"}