Skip to main content
Version: v12.0.0

commitMutation

commitMutation#

Imperatively execute a mutation.

See also the useMutation API and Guide to Updating Data.

import type {FeedbackLikeMutation} from 'FeedbackLikeMutation.graphql';const React = require('React');
const {graphql, useMutation} = require('react-relay');
function likeFeedback(environment: IEnvironment): Disposable {  return commitMutation<FeedbackLikeMutation>(environment, {    mutation: graphql`      mutation FeedbackLikeMutation($input: FeedbackLikeData!) {        feedback_like(data: $input) {          feedback {            id            viewer_does_like            like_count          }        }      }    `,    variables: {      input: {        id: '123',      },    },  });}

Arguments#

Type MutationConfig<TMutationConfig: MutationParameters>#

  • An object with the following fields:
    • cacheConfig: [Optional] CacheConfig
    • mutation: GraphQLTaggedNode. A mutation specified using a GraphQL literal
    • onError: [Optional] (Error) => void. An optional callback executed if the mutation results in an error.
    • onCompleted: [Optional] ($ElementType<TMutationConfig, 'response'>) => void. An optional callback that is executed when the mutation completes.
    • onUnsubscribe: [Optional] () => void. An optional callback that is executed when the mutation the mutation is unsubscribed, which occurs when the returned Disposable is disposed.
    • optimisticResponse: [Optional] An object whose type matches the raw response type of the mutation. Make sure you decorate your mutation with @raw_response_type if you are using this field.
    • optimisticUpdater: [Optional] SelectorStoreUpdater. A callback that is executed when commitMutation is called, after the optimisticResponse has been normalized into the store.
    • updater: [Optional] SelectorStoreUpdater. A callback that is executed when a payload is received, after the payload has been written into the store.
    • uploadables: [Optional] UploadableMap. An optional uploadable map.
    • variables: $ElementType<TMutationConfig, 'variables'>. The variables to pass to the mutation.

Type CacheConfig#

  • An object with the following fields:
    • force: [Optional] A boolean. If true, causes a query to be issued unconditionally, regardless of the state of any configured response cache.
    • poll: [Optional] A number. Causes a query to live-update by polling at the specified interval, in milliseconds. (This value will be passed to setTimeout).
    • liveConfigId: [Optional] A string. Causes a query to live-update by calling GraphQLLiveQuery; it represents a configuration of gateway when doing live query.
    • metadata: [Optional] An object. User-supplied metadata.
    • transactionId: [Optional] A string. A user-supplied value, intended for use as a unique id for a given instance of executing an operation.

Type SelectorStoreUpdater#

  • A function with signature (store: RecordSourceSelectorProxy, data) => void
  • This interface allows you to imperatively write and read data directly to and from the Relay store. This means that you have full control over how to update the store in response to the subscription payload: you can create entirely new records, or update or delete existing ones. The full API for reading and writing to the Relay store is available here.

Type UploadableMap#

  • An object whose values are File or Blob.

Type MutationParameters#

  • An object with the following fields:
    • response: An object
    • variables: An object
    • rawResponse: An optional object

Flow Type Parameters#

  • TMutation: Type parameter that should corresponds the Flow type for the mutation query. This type is available to import from the the auto-generated file: <mutationName>.graphql.js.
    • Note that this auto-generated type will implement MutationParameters.
caution

If you do not explicitly pass this type parameter, the variables, optimistic response and response passed to onCompleted will not be type-checked!

Return Value#

  • A Disposable which:
    • If called while before the request completes, will cancel revert any optimistic updates and prevent the onComplete and onError callbacks from being executed. It will not necessarily cancel any network request. Will cause the onUnsubscribe callback to be called.
    • If called after the initial request completes, will do nothing.

Interface Disposable#

  • An object with the following key:
    • dispose: () => void. Disposes of the resource.

Is this page useful?