react-apollo-forms

<Button>

import React from 'react';
import { Button } from 'react-apollo-forms';
import mutation from './update.gql';

export const SaveButton = () => (
  <Button
    mutation={mutation}
    variables={{
      name: 'Barry Allen',
    }}
  >
    Change Name
  </Buttom>
);

<Input>

import React from 'react';
import { Input } from 'react-apollo-forms';
import mutation from './update.gql';

export const UserInput = () => (
  <Input
    type="text"
    mutation={mutation}
    value="Clark Kent"
    onChange={({
      target: {
        value: name,
      },
    }, mutate) => mutate({
      variables: {
        name,
      },
    })}
  />
);

<Textarea>

import React from 'react';
import { Textarea } from 'react-apollo-forms';
import mutation from './update.gql';

export const DescriptionInput = () => (
  <Textarea
    type="text"
    mutation={mutation}
    value="Bruce Wayne"
    onChange={({
      target: {
        value: description,
      },
    }, mutate) => mutate({
      variables: {
        description,
      },
    })}
  />
);

Props

Prop	Type	Required	Default	Description
mutation	DocumentNode	Yes		A GraphQL mutation document parsed into an AST by graphql-tag. Optional for the useMutation Hook since the mutation can be passed in as the first parameter to the Hook. Required for the Mutation component.
variables	{ [key: string]: any }		{}	An object containing all of the variables your mutation needs to execute
update	(cache: DataProxy, mutationResult: FetchResult)		undefined	A function used to update the cache after a mutation occurs
ignoreResults	boolean		false	If true, the returned data property will not update with the mutation result.
optimisticResponse	Object		undefined	Provide a mutation response before the result comes back from the server
refetchQueries	Array<string|{ query: DocumentNode, variables?: TVariables}>|((mutationResult: FetchResult) => Array<string|{ query: DocumentNode, variables?: TVariables}>)		undefined	An array or function that allows you to specify which queries you want to refetch after a mutation has occurred. Array values can either be queries (with optional variables) or just the string names of queries to be refeteched.
awaitRefetchQueries	boolean		false	Queries refetched as part of refetchQueries are handled asynchronously, and are not waited on before the mutation is completed (resolved). Setting this to true will make sure refetched queries are completed before the mutation is considered done. false by default.
onCompleted	(data: TData) => void		undefined	A callback executed once your mutation successfully completes
onError	(error: ApolloError) => void		undefined	A callback executed in the event of an error.
mutateEvent	String		onClick	It supports all the DOM even types, and specifies the condition of firing the mutation.

This component accepts all the options base on useMutation hook except context and client

This component accepts all the HTML attributes and event handlers passed in.