外部リソースとatomを同期する

要件としては、

めちゃくちゃ抽象的に見れば、以下2つを満たせば良い

参照できる

更新できる

そのatomの利用者は、

それが外部リソースと同期しているかは忘れることができて、

単に、

そのatomから参照

そのatomを更新

だけすれば良いという風にできる

これは、LocalStorageやCookieに対しては上記のような考え方で使える

しかし、keyの部分が他のatomに依存できないので、外部のDBなどを見るのにあまり使えない

例えば、動的にuserIdを指定してUserProfileとかができない

そこで、別の考え方をする

以下の2つを用意する

参照用のatom

read only

更新処理用のatom

気にすべき点としては

更新処理を行ったあとに、参照用のatomも更新する必要があること

いわばcacheのrevalidateぽいことをする必要がある

以下の3つを用意する

参照用のatom

e.g. postAtom

mutationResultAtomに値があればそれを、なければ普通にfetchする

更新処理用のatom

e.g. mutateAtom

更新処理は同期関数で書く

更新した結果を入れるatom

e.g. mutationResultAtom

これにPromiseを直接いれる

code:ts

const mutationResultAtom = atom<Promise<{ title: string }> | null>(null);