とりあえずBlueskyのAPIを呼ぶためのライブラリを自作してみる

公式のものはBskyAgentがミュータブルに変更されたりして、Reactのステートに乗せるのが難しいので、Reactのためのライブラリを作ったほうがきれいになりそうだと思っている

最終的にはこんな感じになることを想定している

(実現できるかはさておき...)

function UserProfile({did}: {did: string}) {
  /*
  ログインしていない場合はessentialはundefinedになる
  本当はログインするまでpromiseをresolveせずに待機できればそれが一番いい

  cacheオプションを付けた場合localStorageにセッションを保存し、
  次回ログイン時に同じ情報でログインする場合に再利用する

  ログインしている場合にはessentialがクライアントになる
  fetch<なんちゃら>やconnect<なんちゃら>みたいな関数がたくさん生えている

  fetch系統はPromise<?>を返すのでこれをuse()して使う

  connect系統はまだ決めていない(w)
  WebSocketなどをよしなにつなぎ、いい具合にリアルタイム通信したいね...

  <Unwrapper />は内部でuseを呼び
  手に入ったデータを基にコンポーネントをレンダリングするためのもの
  */
  const { client, login } = useBskyClient({ cache: true });
  const profilePromise = client.fetchProfile({ did: did });

  return (
    <Suspense fallback={<UserProfileDummy />}>
      <Unwrapper promise={profilePromise} componentRender={(profile) => (
        <div className="profileContainer">
          <div className="iconWrapper">
            <img src={profile.avatar} className="profileIcon" />
          </div>
          <div className="detailsContainer">
            <span className="profileName">{profile.name}</span>
            <span className="profileHandle">{profile.handle}</span>
          </div>
        </div>
      )} />
    </Suspense>
  );
}

Blueskyクライアントを自作するためのメモ