Awesome Open Source
Awesome Open Source


Build React forms based on GraphQL APIs.

The library is currently under active rewriting, please see this ticket for updates

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




Install package

  • install yarn add react-apollo-form

Add script to your project

  • add to your package.json, at the scripts 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 * as React from 'react';
import gql from 'graphql-tag';
import { configure } from 'react-apollo-form';
import { client } from './apollo';
import { applicationFormTheme } from './core/forms/themes/application';

const jsonSchema = require('./core/apollo-form-json-schema.json');

export const ApplicationForm = configure<ApolloFormMutationNames>({
    // tslint:disable-next-line:no-any
    client: client as any,
    theme: applicationFormTheme

        mutation: {
            name: 'create_todo',
            document: gql`mutation {...}`


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

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

The following subjects are specific to ApolloForm:


  • Can I make ApolloForm works with many GraphQL endpoints?

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

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

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



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

ApolloForm is "just" a wrapper around react-jsonschema-form.

It brings some "embed" features:

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

GraphQL to JSON Schema

See graphql-2-json-schema package.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Reactjs (70,931
Graphql (8,128
Form (2,154
Form (2,154
Apollo (1,282
Graphql Api (241
Related Projects