通过useMutation可以实现对服务器端的操作，比如create，update，delete，patch。

• action.ts文件内容如下：

"use server";
export async function send(message:string) {
  await new Promise((resolve) => setTimeout(resolve, 1000 + Math.random() * 1000));
  global.messages.push({message})
}

• page.tsx`文件内容如下：

"use client";
import { useQuery , mutationFn } from "@tanstack/react-query";
import { getUsers } from "../action";
import Code from "./code.mdx";

export default function Page() {
   const messages = useQuery({ queryKey: ["messages"], queryFn: get });
  const mutation = useMutation({
    mutationFn: send,
    onSettled: () => messages.refetch(),
  });

  return (
    <>
      <ul>
        {messages.data?.map((m, i) => (
          <li key={i}> {m.message} </li>
        ))}
      </ul>
      <form
        action={async (data) =>
          mutation.mutate(data.get("message")!.toString())
        }
      >
        <input className="input" type="text" name="message" />
        <SubmitButton />
      </form>
    </>
  );
}