{"id":13683489,"url":"https://github.com/charlypoly/react-apollo-form","last_synced_at":"2025-04-04T11:12:33.456Z","repository":{"id":49991082,"uuid":"131273137","full_name":"charlypoly/react-apollo-form","owner":"charlypoly","description":"Build React forms based on GraphQL APIs.","archived":false,"fork":false,"pushed_at":"2025-03-29T07:35:58.000Z","size":1379,"stargazers_count":199,"open_issues_count":26,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T11:02:37.152Z","etag":null,"topics":["apollo","form","forms","graphql","graphql-api","mutations","react","reactforms"],"latest_commit_sha":null,"homepage":"","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/charlypoly.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2018-04-27T09:06:56.000Z","updated_at":"2024-10-18T18:36:48.000Z","dependencies_parsed_at":"2023-12-21T05:17:17.874Z","dependency_job_id":"34d7b4f6-3e88-48dc-b95d-dad0a5073e2f","html_url":"https://github.com/charlypoly/react-apollo-form","commit_stats":{"total_commits":65,"total_committers":4,"mean_commits":16.25,"dds":"0.24615384615384617","last_synced_commit":"fa5c4e5b243876fd9a265cecb385c30edd3ba07f"},"previous_names":["wittydeveloper/react-apollo-form"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charlypoly%2Freact-apollo-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charlypoly%2Freact-apollo-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charlypoly%2Freact-apollo-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charlypoly%2Freact-apollo-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charlypoly","download_url":"https://codeload.github.com/charlypoly/react-apollo-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"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":["apollo","form","forms","graphql","graphql-api","mutations","react","reactforms"],"created_at":"2024-08-02T13:02:12.966Z","updated_at":"2025-04-04T11:12:33.440Z","avatar_url":"https://github.com/charlypoly.png","language":"TypeScript","readme":"# \u0026lt;ApolloForm\u0026gt; ![https://img.shields.io/circleci/project/github/wittydeveloper/react-apollo-form.svg](https://img.shields.io/circleci/project/github/wittydeveloper/react-apollo-form.svg) ![https://img.shields.io/npm/v/react-apollo-form.svg](https://img.shields.io/npm/v/react-apollo-form.svg) ![https://img.shields.io/npm/dt/react-apollo-form.svg](https://img.shields.io/npm/dt/react-apollo-form.svg)\n\n*Build React forms based on GraphQL APIs.*\n\n-----------------\n\n## The library is currently under active rewriting, please [see this ticket](https://github.com/wittydeveloper/react-apollo-form/issues/31) for updates\n\n-----------------\n\n![https://s3.eu-west-2.amazonaws.com/github-oss/react-apollo-form/read-me-demo-preview.png](https://s3.eu-west-2.amazonaws.com/github-oss/react-apollo-form/read-me-demo-preview.png)\n\n-------------------------\n\n### To get started more easily, please read [Getting started: build a GraphQL Form in 5 minutes](https://github.com/wittydeveloper/react-apollo-form/wiki/Getting-started:-build-a-GraphQL-Form-in-5-minutes)\n\n\n-------------------------\n\n## Pre-requisites\n\n- `apollo-codegen` (globally)\n- `react@^15` \n- `react-apollo@^15`\n\n*Optionally*\n- `typescript@^2.8.4`\n\n-------------------------\n\n## Installation\n\n\n### Install package\n- install `yarn add react-apollo-form`\n\n### Add script to your project\n- add to your `package.json`, at the `scripts` section :\n\n```json\n{\n    \"scripts\": {\n        \"react-apollo-form\": \"react-apollo-form fetch-mutations \u003cgraphql_endpoint\u003e \u003coutpurDir\u003e\"\n    }\n}\n\n```\n\nThis script will generated 3 files needed by `\u003cApolloForm\u003e`:\n- `schema.json` (GraphQL Introspection Query result as JSON)\n- `mutations.d.ts` (all available mutations names as TypeScript type definition)\n- `apollo-form-json-schema.json` (GraphQL Schema as JSON Schema)\n\n*Tips: you can change the output directory of theses with the second argument or `-o` option*\n\n-------------------------\n\n## Usage\n\nOnce the files generated, we can setup a Form.\n\n```ts\nimport * as React from 'react';\nimport gql from 'graphql-tag';\nimport { configure } from 'react-apollo-form';\nimport { client } from './apollo';\nimport { applicationFormTheme } from './core/forms/themes/application';\n\n\nconst jsonSchema = require('./core/apollo-form-json-schema.json');\n\nexport const ApplicationForm = configure\u003cApolloFormMutationNames\u003e({\n    // tslint:disable-next-line:no-any\n    client: client as any,\n    jsonSchema,\n    theme: applicationFormTheme\n});\n\n\u003cApplicationForm\n    config={{\n        mutation: {\n            name: 'create_todo',\n            document: gql`mutation {...}`\n        }\n    }}\n    data={{}}\n/\u003e\n```\n\n-------------------------\n\n## API\n\n`ApolloForm` is based on the amazing Mozilla library [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form).\nMost of the questions regarding JSON Schema, validations or rendering are in [react-jsonschema-form documentation](https://github.com/mozilla-services/react-jsonschema-form)\n\nTo get started more easily, please read [Getting started: build a GraphQL Form in 5 minutes](https://github.com/wittydeveloper/react-apollo-form/wiki/Getting-started:-build-a-GraphQL-Form-in-5-minutes)\n\nThe following subjects are specific to `ApolloForm`:\n\n- [configure your \"Form component\"](https://github.com/wittydeveloper/react-apollo-form/wiki/configure-your-%22Form-component%22)\n- [Theming](https://github.com/wittydeveloper/react-apollo-form/wiki/Theming)\n- [Build a form without mutation](https://github.com/wittydeveloper/react-apollo-form/wiki/Build-a-form-without-mutation)\n- [Add a form specific Widget (outside a theme)](https://github.com/wittydeveloper/react-apollo-form/wiki/Add-a-form-specific-Widget-(outside-a-theme))\n- [Conditional fields](https://github.com/wittydeveloper/react-apollo-form/wiki/Conditional-fields)\n- [Form rendering customisation](https://github.com/wittydeveloper/react-apollo-form/wiki/Form-Rendering-customisation-with-renderers)\n- [Add RegExp constraint to a field](https://github.com/wittydeveloper/react-apollo-form/wiki/Add-regex-constraints-to-a-field)\n- [Error messages customization](https://github.com/wittydeveloper/react-apollo-form/wiki/Error-messages-customisation)\n\n-------------------------\n\n## Q\u0026A\n\n- **Can I make `ApolloForm` works with many GraphQL endpoints?**\n\n*Yes, just setup multiple scripts in your project `package.json` with one output folder per endpoint,\nthen just configure a \"component form\" for each endpoint*\n\n- **Where can I find some documentation about `widgets`, `fields` or theming in general?**\n\n*Please take a look at the [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) documentation that will answers 90% of the rendering questions.\nIf not, please take a look at [Theming](https://github.com/wittydeveloper/react-apollo-form/wiki/Theming)*\n\n-------------------------\n\n## Architecture\n\n\n\n### General\n\nThe idea is to build forms using mutations from the GraphQL API.\n\n\n`ApolloForm` is \"just\" a wrapper around [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form).\n\nIt brings some \"embed\" features: \n- JSON schema generation from GraphQL Schema\n- conditionals forms\n- form rendering customisation with `render props`\n- build JSON Schema with functions (with [functional-json-schema](https://github.com/wittydeveloper/functional-json-schema))\n\n### GraphQL to JSON Schema\n\nSee [graphql-2-json-schema](https://github.com/wittydeveloper/graphql-to-json-schema) package.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlypoly%2Freact-apollo-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharlypoly%2Freact-apollo-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlypoly%2Freact-apollo-form/lists"}