use react query to post json data to an api in typescript

index.ts
npm install react-query
24 chars
2 lines

index.ts
yarn add react-query
21 chars
2 lines

index.ts
import { useMutation } from "react-query";

interface PostData {
  name: string;
  age: number;
}

async function postData(data: PostData) {
  const response = await fetch("https://example.com/api", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });

  if (!response.ok) {
    throw new Error("Network response was not ok");
  }

  return response.json();
}
431 chars
23 lines

index.ts
function App() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);

  const [postMutation, { status }] = useMutation(postData);

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    postMutation({ name, age });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <br />
      <label>
        Age:
        <input type="number" value={age} onChange={(e) => setAge(parseInt(e.target.value))} />
      </label>
      <br />
      <button type="submit" disabled={status === "loading"}>
        {status === "loading" ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
}
781 chars
31 lines