Repository files navigation

Build React forms based on GraphQL APIs.

• apollo-codegen (globally)
• react@^15
• react-apollo@^15

Optionally

• typescript@^2.8.4

• installyarn add react-apollo-form

• add to yourpackage.json, at thescripts section :

{"scripts": {"react-apollo-form":"react-apollo-form fetch-mutations <graphql_endpoint> <outpurDir>"    }}

This script will generated 3 files needed by<ApolloForm>:

• schema.json (GraphQL Introspection Query result as JSON)
• mutations.d.ts (all available mutations names as TypeScript type definition)
• apollo-form-json-schema.json (GraphQL Schema as JSON Schema)

Tips: you can change the output directory of theses with the second argument or-o option

Once the files generated, we can setup a Form.

import*asReactfrom'react';importgqlfrom'graphql-tag';import{configure}from'react-apollo-form';import{client}from'./apollo';import{applicationFormTheme}from'./core/forms/themes/application';constjsonSchema=require('./core/apollo-form-json-schema.json');exportconstApplicationForm=configure<ApolloFormMutationNames>({// tslint:disable-next-line:no-anyclient:clientasany,    jsonSchema,theme:applicationFormTheme});<ApplicationFormconfig={{mutation:{name:'create_todo',document:gql`mutation {...}`}}}data={{}}/>

ApolloForm is based on the amazing Mozilla libraryreact-jsonschema-form.Most of the questions regarding JSON Schema, validations or rendering are inreact-jsonschema-form documentation

To get started more easily, please readGetting started: build a GraphQL Form in 5 minutes

The following subjects are specific toApolloForm:

• configure your "Form component"
• Theming
• Build a form without mutation
• Add a form specific Widget (outside a theme)
• Conditional fields
• Form rendering customisation
• Add RegExp constraint to a field
• Error messages customization

• Can I makeApolloForm works with many GraphQL endpoints?

Yes, just setup multiple scripts in your projectpackage.json with one output folder per endpoint,then just configure a "component form" for each endpoint

• Where can I find some documentation aboutwidgets,fields or theming in general?

Please take a look at thereact-jsonschema-form documentation that will answers 90% of the rendering questions.If not, please take a look atTheming

The idea is to build forms using mutations from the GraphQL API.

ApolloForm is "just" a wrapper aroundreact-jsonschema-form.

It brings some "embed" features:

• JSON schema generation from GraphQL Schema
• conditionals forms
• form rendering customisation withrender props
• build JSON Schema with functions (withfunctional-json-schema)

Seegraphql-2-json-schema package.