很多同学认为，拥有ServerAction+useFormState，是不是可以放弃·useQuery？

其实，useQuery的功能远不止于此。它默认的缓存功能，可以极大优化我们的客户端体验，并且可以与ServerAction配合使用，实现更加强大的功能。

• action.ts文件内容如下：

"use server";
export async function getUsers() {
  await new Promise((resolve) =>
    setTimeout(resolve, 1000 + Math.random() * 1000)
  );
  return [
    { id: 1, name: `John_${Math.random()}` },
    { id: 2, name: `Mary_${Math.random()}` },
    { id: 3, name: `Tom_${Math.random()}` },
  ];
}

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

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

export default function Page() {
  const query = useQuery({ queryKey: ["users"], queryFn: getUsers });
  return (
    <>
      <button
        disabled={query.isLoading}
        className='btn'
        onClick={() => query.refetch()}
      >
        {query.isLoading ? "Loading..." : "Call Server Action"}
      </button>
      <div>
        datas:
        {query.data?.map((item, index) => (
          <div key={index}>{item.name}</div>
        ))}
      </div>
    </>
  );
}