Skip to main content
Version: v18.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, commitMutation} = 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.
      • The value passed to onCompleted is the the mutation fragment, as read out from the store, after updaters and declarative mutation directives are applied. This means that data from within unmasked fragments will not be read, and records that were deleted (e.g. by @deleteRecord) may also be null.
    • onUnsubscribe: [Optional] () => void. An optional callback that is executed when 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

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?

Help us make the site even better by answering a few quick questions.