suspense-client.js

import React, { Suspense } from "react";
import { GET_LAUNCHES } from "./queries";
import { useAPI } from "./useAPI";

const Launches = ({ launches }) => {
  return (
    <div>
      {launches.read().launchesPast.map((item) => (
        <div>
          <h1>{item.mission_name}</h1>
          <p>{item.rocket.rocket_name}</p>
        </div>
      ))}
    </div>
  );
};

export default function App() {
  const { data } = useAPI(GET_LAUNCHES);

  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <Launches launches={data} />
      </Suspense>
    </div>
  );
}