use-mutation.md

title
useMutation

{{ $frontmatter.title }}

The useMutation method allows you to use the original useMutation.

• The result is the same as the original function.
• The mutationKey is [method, path].
• data and error are fully typed.

::: tip You can find more information about useMutation on the @tanstack/react-query documentation. :::

Example

::: code-group

import { $api } from "./api";

export const App = () => {
  const { mutate } = $api.useMutation("patch", "/users");

  return (
    <button onClick={() => mutate({ body: { firstname: "John" } })}>
      Update
    </button>
  );
};

import createFetchClient from "openapi-fetch";
import createClient from "openapi-react-query";
import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript

const fetchClient = createFetchClient<paths>({
  baseUrl: "https://myapi.dev/v1/",
});
export const $api = createClient(fetchClient);

:::

Api

const query = $api.useQuery(method, path, options, queryOptions);

Arguments

• method (required)
  • The HTTP method to use for the request.
  • The method is used as key. See Query Keys for more information.
• path (required)
  • The pathname to use for the request.
  • Must be an available path for the given method in your schema.
  • The pathname is used as key. See Query Keys for more information.
• queryOptions
  • The original useMutation options.
  • See more information