Resource class for React Suspence

Resource.ts

type Status = "pending" | "success" | "error";

export default class Resource<T> {
  static from<T>(promise: Promise<T>) {
    return new this(promise);
  }

  private status: Status;
  private result: T;
  private suspender: Promise<void>;

  private constructor(promise: Promise<T>) {
    this.suspender = promise.then(
      r => {
        this.status = "success";
        this.result = r;
      },
      e => {
        this.status = "error";
        this.result = e;
      }
    );
  }

  read() {
    switch (this.status) {
      case "pending": {
        throw this.suspender;
      }

      case "error": {
        throw this.result;
      }

      case "success": {
        return this.result;
      }

      default: {
        throw new RangeError(
          `invariant status: ${JSON.stringify(this.status)}`
        );
      }
    }
  }
}

const usersResource = Resource.from(fetchUsers())

const UsersList: React.FC = () => {
  const users = usersResource.read()

  ......
}

🤔

const users$ = Resource.from(fetchUsers())

const UsersList: React.FC = () => {
  const users = users$.read()

  ......
}