useMutation

Dispatch mutations from the client. The same hook is used by the <Form> component internally.

Client

Usage

Create an async function that executes the mutation.

import { useUrlBuilder } from '@microeinhundert/radonis'


const urlBuilder = useUrlBuilder()


async function storeComment({
  postId,
  authorId,
  comment,
}: { 
  postId: string
  authorId: string
  comment: string
}) {
  const response = await fetch(
    urlBuilder.make$(
      'PostsController.storeComment', 
      { 
        params: {
          id: postId,
        },
      },
    ),
    {
      method: 'POST',
      body: JSON.stringify({ authorId, comment }),
    },
  )


  if (!response.ok) throw new Error(response.statusText)


  return response.json()
}

Use this function like this.

import { useMutation } from '@microeinhundert/radonis'


// Pass the previously created async function to the hook
const [mutate, { status }] = useMutation(storeComment)


// Execute the mutation by calling the `mutate` function 
// returned from the hook and passing your data to it
mutate({ postId, authorId, comment })