Non-Potable Macchiato

    react-apollo-forms

    2.0.0 • Public • Published

    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.

    Install

    npm i react-apollo-forms

    DownloadsWeekly Downloads

    10

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    30.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • zhso