mutationOptions

mutationOptions는 Mutation에서 옵션 객체를 쉽게 재사용하고 일관성 있게 관리할 수 있도록 도와줍니다. 이는 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()),
  })
 
// 커스텀 Mutation 훅을 만들 필요 없이 mutationOptions를 직접 활용할 수 있습니다.
const editPostMutation = useMutation(editPostMutationOptions(1))
 
// <Mutation />에서 직접 mutationOptions를 활용할 수 있습니다.
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