jotaiでAtomの値を強制的に更新する(javascript)

JavaScript

jotaiという状態管理ライブラリを初めて使ってみたのですが、get onlyのatomを強制的に再取得させる方法が簡単には見つからなかったのでメモしておきます。

atomFamilyを使って少し複雑にしていますが、基本的にはatomの代わりにatomWithRefreshを呼べばOK.

export const refreshFamily = atomFamily((id: string) =>
  atomWithRefresh(async () => {
    return fetch(`/api/hogehoge/${id}`).then((res) => res.json());
  })
);

function atomWithRefresh<T>(fn: (get: Getter) => T) {
  const refreshCounter = atom(0);

  return atom(
    (get) => {
      get(refreshCounter);
      return fn(get);
    },
    (_, set) => set(refreshCounter, (i) => i + 1)
  );
}

利用する側は以下のような形で使います。

const [hoge, refreshHoge] = useAtom(pdfDownloadHistoryByGroupIdFamily(analysesGroup.id));

onClick = ()=> refreshHoge()

コメント