Mutations

Mutations are defined by simply wrapping the result of graphql in useMutation:

src/routes/shows/[id]/edit/+page.jsx

import { graphql, useMutation } from "$houdini";

export default function EditShow({ AllShows }) {
  const [one, setOne] = React.useState("");
  const [two, setTwo] = React.useState("");

  const mutate = useMutation(graphql(`
      mutation OneTwo($one: String!, $two: String!) {
        do(one: $one, two: $two)
      }
  `))

  return (
    <form onSubmit={() => mutate({one, two})}>
      <input value={one} onChange={(e) => setOne(e.target.value)} />
      <input value={two} onChange={(e) => setTwo(e.target.value)} />
      <button type=“submit">submit</button>
    </form>
  )
}

The resulting function will throw if the server response contains an error. The resulting exception will have the message field of every error joined with a period. If you want access to the full error payload, you can access the raw field:

import { type RuntimeGraphQLError } from '$houdini'

try {
    await mutate()
} catch (e) {
    const err = e as RuntimeGraphQLError
    console.log(err.raw)
}