Update & Delete Mutations in React

// Update mutation
function EditPost({ post }) {
  const queryClient = useQueryClient()

  const updateMutation = useMutation({
    mutationFn: ({ id, ...data }) => updatePost(id, data),
    onSuccess: (data) => {
      // Update specific item in cache
      queryClient.setQueryData(['post', data.id], data)
      // Invalidate list
      queryClient.invalidateQueries({ queryKey: ['posts'] })
    }
  })

  const deleteMutation = useMutation({
    mutationFn: deletePost,
    onSuccess: (_, postId) => {
      // Remove from cache
      queryClient.removeQueries({ queryKey: ['post', postId] })
      queryClient.invalidateQueries({ queryKey: ['posts'] })
    }
  })

  return (
    <div>
      <button onClick={() => updateMutation.mutate({
        id: post.id,
        title: 'Updated Title'
      })}>
        Update
      </button>
      <button onClick={() => deleteMutation.mutate(post.id)}>
        Delete
      </button>
    </div>
  )
}