UserProfileList fix

UserProfileList.tsx

/* Given gist shown the "fetch-on-render" patter - the most popular, but with
the "waterfall" downside.

"Waterfall" means starting fetching AFTER rendering process is finished.
This task implies to show the "render-as-you-fetch" pattern - to start these 2
processes simultaneously. To achieve it the requests should be sent not in the
useEffect (coupled with rendering) but in Relay's layer often called "resource".

Under the hood this "resource":
1. either throws the contract-based object and the nearest <ErrorBoundary/> parent catches it
2. or throws another object and <Suspense/> parent shows a fallback prop
3. or returns a promise-based data which can be accessed and rendered

Problems in given task are:
1. No fallback is provided in the <Suspense>
2. From p.1 - instead of a fallback, the values will be rendered as `undefined` (nothing).
3. Component should request the data in itself, not in the `useEffect`. Relay + Suspense + ErrorBoundary will do the rest.
*/

import { Suspense } from "react";
import { fetchUserProfile } from "./fetch-user";

const resource = fetchUserProfile();

const SuspensefulUserProfile = ({ userId }) => {
  const userData = resource.user.read(userId);

  return (
    <Suspense fallback={<>loading...</>}>
      <UserProfile data={userData} />
    </Suspense>
  );
};
const UserProfile = ({ data }) => {
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};
const UserProfileList = () => (
  <>
    <SuspensefulUserProfile userId={1} />
    <SuspensefulUserProfile userId={2} />
    <SuspensefulUserProfile userId={3} />
  </>
);