mutationOptions

⚠️

mutationOptions is an experimental feature, so this interface may change.

mutationOptions helps you easily reuse and consistently manage option objects for Mutations. This provides similar benefits to the ones offered by queryOptions.


import { mutationOptions, useMutation, Mutation } from '@suspensive/react-query'
 
const editPostMutationOptions = (postId: number) =>
  mutationOptions({
    mutationFn: (content: string) => fetch(`https://example.com/posts/${postId}`, {
      method: 'PATCH',
      body: JSON.stringify({ content }),
    }).then(res => res.json()),
  })
 
// You can directly use mutationOptions without creating custom mutation hooks.
const editPostMutation = useMutation(editPostMutationOptions(1))
 
// Directly use mutationOptions with <Mutation />.
const Example = () => (
  <Mutation {...editPostMutationOptions(1)}>
    {({ mutate, isLoading }) => (
      <div>
        <p>{isLoading ? 'Updating...' : 'Latest updated'}</p>
        <textarea onBlur={(e) => mutate(e.target.value)} disabled={isLoading} />
      </div>
    )}
  </Mutation>
)

import { Mutation, mutationOptions } from '@suspensive/react-query'
import { editPost } from './api'

const editPostMutationOptions = (postId: number) =>
  mutationOptions({
    mutationKey: ['edit-post', postId],
    mutationFn: (content: string) => editPost(postId, content),
  })

export const Example = () => {
  return (
    <Mutation {...editPostMutationOptions(1)}>
      {({ mutate, isLoading }) => (
        <div>
          <p>{isLoading ? 'Updating...' : 'Latest updated'}</p>
          <textarea
            placeholder="Edit content"
            onBlur={(e) => mutate(e.target.value)}
            disabled={isLoading}
          />
        </div>
      )}
    </Mutation>
  )
}

Open Sandbox