查询

点击查询, 利用query来控制何时请求, 通过boolean条件来控制queryFn的执行 https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries#typesafe-disabling-of-queries-using-skiptoken

const getUser = async (username: string, password: string) => {
  try {
    const res = await fetch("http://localhost:8080/users/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username, password }),
    });
    const data: LoginResponse = await res.json();
    return data;
  } catch (error) {
    throw new Error(error);
  }
};

export default function Login() {
  const [username, setUsername] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [query, setQuery] = useState<boolean>(false);

  const { isError, data, error } = useQuery({
    queryKey: ["login", username, password],
    queryFn: query ? () => getUser(username, password) : skipToken,
  });

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  const handleLogin = () => {
    setQuery(true);
  };

  if (data) {
    console.log("data", data);
  }

  return (
    <>
    </>
}