Suspense用にデータフェッチするhook

loadable.ts

import { useState } from "react";

export class Loadable<T> {
  private promise: Promise<T>;
  private value?: T;
  private error?: unknown;
  private status: "pending" | "resolved" | "rejected" = "pending";

  constructor(promise: Promise<T>) {
    this.promise = promise
      .then((value) => {
        this.status = "resolved";
        this.value = value;
        return value;
      })
      .catch((error) => {
        this.status = "rejected";
        this.error = error;
        throw error;
      });
  }

  load(): T {
    if (this.status === "pending") {
      throw this.promise;
    }
    if (this.status === "rejected") {
      throw this.error;
    }
    return this.value as T;
  }
}

export function useLoadable<T>(
  promise: Promise<T>,
): [Loadable<T>, (promise: Promise<T>) => void] {
  const [loadable, setLoadable] = useState(new Loadable(promise));
  const setLoadablePromise = (promise: Promise<T>) => {
    setLoadable(new Loadable(promise));
  };
  return [loadable, setLoadablePromise];
}