Update Requests with React Query

App.tsx

import React from "react";
import { useQuery, useMutation } from "react-query";

type Person = {
  id: number;
  firstName: string;
  lastName: string;
};

async function getPerson({ queryKey }: { queryKey: [string, { id: number }] }) {
  const [, { id }] = queryKey;

  const response = await fetch(`http://localhost:3004/people/${id}`);
  if (!response.ok) {
    throw Error("Problem fetching person");
  }
  const data = await response.json();
  assertIsPerson(data);
  return data;
}

function assertIsPerson(data: any): asserts data is Person {
  if (!("id" in data && "firstName" in data && "lastName" in data)) {
    throw new Error("Not a person");
  }
}

export function App() {
  const { status: queryStatus, error: queryError, data } = useQuery<
    Person,
    Error
  >(["person", { id: 1 }], getPerson);
  
  const { mutate, status: mutateStatus, error: mutateError } = useMutation<
    Person, // return type
    Error,
    Person  // params type
  >(updatePerson);
      
  if (queryStatus === "loading") {
    return <div>...</div>;
  }
  if (queryStatus === "error") {
    return <div>{queryError!.message}</div>;
  }
      
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const firstName = formData.get("firstName") as string;
    const lastName = formData.get("lastName") as string;
    mutate({ id: data!.id, firstName, lastName });
  }
      
  return (
    <div>
      {data && (
        <form onSubmit={handleSubmit}>
          <p>ID: {data.id}</p>
          <fieldset disabled={mutateStatus === "loading"}>
            <div>
              <label htmlFor="firstName">First name</label>
              <input
                type="text"
                id="firstName"
                name="firstName"
                defaultValue={data.firstName}
              />
            </div>
            <div>
              <label htmlFor="lastName">Last name</label>
              <input
                type="text"
                id="lastName"
                name="lastName"
                defaultValue={data.lastName}
              />
            </div>
          </fieldset>
          <button type="submit">Save</button>
        </form>
      )}
      {mutateStatus === "success" && <p>Change successfully saved</p>}
      {mutateStatus === "error" && <p>{mutateError!.message}</p>}
    </div>
  );
}