非同期データクエリをRecoilのselectorで実現する

概要

非同期データクエリにRecoilのselectorを使ってみた場合にどのような動きをするかの実験。

なおコードはこちらで動作を確認できる
https://codesandbox.io/s/ecstatic-austin-k2c3z

アプリの説明

いわゆるキーワード検索で名前をリストするだけのアプリ。データはネットワーク越しにキーワード検索することを想定（実際はローカルで絞り込んでwaitかけてるだけ）。

検索結果の非同期ロード中にはloading indicatorが検索結果にオーバレイするようになっている。

コードの解説

atom/selectorの定義

/**
 * states
 */
const keywordInputState = atom({
  key: "keywordInput",
  default: ""
});

const keywordState = atom({
  key: "keyword",
  default: ""
});

const searchResultState = selector({
  key: "searchResult",
  async get({ get }) {
    const keyword = get(keywordState);
    const results = await searchEntries(keyword);
    return results;
  }
});

キーワードの入力を表すatom (keywordInputState)と確定したキーワードを表すatom(keywordState)、およびキーワード検索結果を表すselector(searchResultState)を用意。

searchResultStateは確定したキーワードを利用して非同期コールであるsearchEntries()を呼び出し、その結果を返すようなselectorとなっている。

コンポーネントの定義

キーワード入力と検索ハンドラ

function KeywordSearchForm() {
  const [keywordInput, setKeywordInput] = useRecoilState(keywordInputState);
  const onSearch = useRecoilCallback(async ({ getPromise, set }) => {
    const keyword = await getPromise(keywordInputState);
    set(keywordState, keyword);
  }, []);
  return (
    <div className="search-form">
      <input
        type="text"
        value={keywordInput}
        onChange={e => setKeywordInput(e.target.value)}
        onKeyDown={e => (e.keyCode === 13 ? onSearch() : null)}
      />
      <button onClick={onSearch}>Search</button>
    </div>
  );
}

キーワードの入力状態はkeywordInputStateをuseRecoilStateで参照して制御している。もちろんこれくらいならべつにuseStateでもいいし、なんならuncontrolledでもいいのだけど、とりあえず。リターンキーが押下されたとき、Searchボタンが押されたときにonSearch()ハンドラが発動するようになっている。

onSearch()ではkeywordInputStateの値を読み取ってそれを確定キーワード(keywordState)にセットしているだけ。

検索結果の表示

function SearchResult() {
  const searchResultLoadable = useRecoilValueReplayLoadable(searchResultState);
  const searchResult = searchResultLoadable.getLastResolvedValue();
  return (
    <div className="result">
      {searchResult ? (
        <ul className="list">
          {searchResult.map(item => (
            <li>{item.name}</li>
          ))}
        </ul>
      ) : (
        undefined
      )}
      {searchResultLoadable.state === "loading" ? (
        <div className="loading">
          <span>loading...</span>
        </div>
      ) : (
        undefined
      )}
      {searchResultLoadable.state === "hasError" ? (
        <div className="error">{searchResultLoadable.contents.message}</div>
      ) : (
        undefined
      )}
    </div>
  );
}

検索結果はsearchResultStateを参照するhooksを利用する。非同期のローディング状態を判別するために、Loadableオブジェクトとして取得している。もちろんuseRecoilValueで直接値を取得してもいいけど、その場合<Suspense>で囲う必要がある。

なお直接useRecoilValueLoadableを使うのではなく、後述するようにuseRecoilValueReplayLoadableというカスタムフックを利用している。

アプリ全体

export default function App() {
  return (
    <div className="App">
      <KeywordSearchForm />
      <SearchResult />
    </div>
  );
}

カスタムフック

Recoilの場合、非同期処理中はコンポーネントを<Suspense>で囲うことで代替コンテンツを表示可能だが、同じコンポーネントでの前回の結果をそのまま表示したい、などという場合にはむずかしい。さらにオフィシャルのuseRecoilStateLoadableでは、そのままでは非同期直前の解決済み値を取得できない。そのため最後に解決した値を取得できるようにLoadableオブジェクトにgetLastResolvedValue()なるメソッドを生やすカスタムフックを用意した。

import { useRef, useEffect } from "react";
import { useRecoilValueLoadable, Loadable, RecoilValue } from "recoil";

type ReplayLoadable<T> = Loadable<T> & {
  getLastResolvedValue(): T | undefined;
};

export function useRecoilValueReplayLoadable<T>(
  state: RecoilValue<T>
): ReplayLoadable<T> {
  const loadable = useRecoilValueLoadable(state);
  const lastValueRef = useRef<T>();
  useEffect(() => {
    if (loadable.state === "hasValue") {
      lastValueRef.current = loadable.contents;
    }
  }, [loadable]);
  return {
    ...loadable,
    getLastResolvedValue() {
      return this.state === "hasValue" ? this.contents : lastValueRef.current;
    }
  };
}

ここらへん、Concurrent ModeでuseTransitionとかつかえばうまくできるのかもしれない。

実験

キャッシュ(memoize)について

上記のアプリのキーワードを変えて検索してみる。

searchEntries()には強制的に1sec程度のwaitがかかっているが、違うキーワードで検索したあとに一度利用した同じキーワードで検索したときには、即座に検索結果が返ってくる。

このことから、非同期selectorであっても計算結果はキャッシュされている ことがわかる。また 依存するstateの直前の値だけでなく、変化したすべて(?)のstate値についての結果がmemoされている こともわかる。

非同期エラーについて

実際にはsearchEntries()は、1/10の確率でエラーを返すようになっている（ネットワークエラーなどを想定）。これはランダムなので、同じキーワードで検索かけたらエラーにはならない可能性もあるだろうけど、エラーとなった同じキーワードで再度検索実行すると必ず無条件に即時エラーとなる。このことから 非同期処理中に発生したエラーについてもキャッシュされてしまう ということがわかる。

今の時点では、query version のようなatomを用意して、強制的にキャッシュの無効化（実際にはmemoization keyを変えてるだけだが）できるような依存をsearchResultState selectorに作っておくかする必要がありそう。