React-apollo-forms NPM

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.