react-queryのinitialDataが便利だなって話

react-queryではuseQueryなどのhooks利用時にinitialDataという初期データを投入することができます。

この初期データというのは、useQueryで取得してくるデータ（厳密にはなんでもいいけど、そんな使い方するならplaceholder使う？）で、すでに何かしらの方法で初期データがあれば、fetchをせずに、その初期データを利用するというもの。

また、queryClientを利用すれば、react-queryで管理しているキャッシュを拾ってくれるので、initialDataと組み合わせればいい感じにパフォーマンスアップを期待できる。

const useHoge = () => {
  ...
  const queryClient = useQueryClient();
  
  const query = useQuery(['hoge'], () => someRequest(), {
    initialData() {
      return queryClient.getQueryData(['hoge'])?.find( data => data.id == someId)
    }
  })

...
}

queryClientのデータを、別ページで取得していたことあるデータから拾ってくるなど、うまいこと組み合わせるといい感じです。

ちなみに、initialDataがundefinedであれば、普通に拾いに行ってくれます。