testYup.tsx

import {
  QueryClient,
  QueryClientProvider,
  useQuery
} from "@tanstack/react-query";
import * as yup from "yup";

const TEST_ERROR = false;
const queryClient = new QueryClient();

const userValidator = yup.object({
  id: yup.string().required(),
  name: yup.string().required(),
  email: yup.string().email().nullable().notRequired()
});

// You could do this too:
// type UserType = yup.InferType<typeof userValidator>

async function testFetch(url: string) {
  const userId = url.split("/").slice(-1)[0];
  return {
    json: async () => ({
      id: userId,
      name: TEST_ERROR ? 42 : "Christian"
    })
  };
}

function UserData(userId: string) {
  return useQuery(["user-query"], async () => {
    const res = await testFetch(`api/user/${userId}`);
    const data = await res.json();
    return userValidator.validate(data, { strict: true });
  });
}

function User({ userId }: { userId: string }) {
  const { data, isLoading } = UserData(userId);
  if (isLoading) {
    return <h1>Loading</h1>;
  }
  if (!data) {
    return <h1>Who are you?</h1>;
  }
  return <h1>Hello {data.name}</h1>;
}

export default function App() {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <User userId="test-user-id" />
      </QueryClientProvider>
    </div>
  );
}