什么是React Query，为什么需要使用它？

サーバーとの処理などを良い感じにやってくれるライブラリ

Reactは状態の変化には強いが、サーバーとのやり取りのあたりはそこまで力を入れていない

つまり開発者やチームによってAPIのハンドリングなどが異なる

详细地说明

fetchやaxiosの代わりに、ではなくそれらを使った上でReact Queryを使う

import { useQuery } from 'react-query'
const fetchUsers = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  return res.json();
};

const result = useQuery('users', fetchUsers);
console.log(result)

↑今のところ特に使い所なさそう…が

 const { data, isLoading, isError, error } = useQuery('users', fetchUsers);

色んなプロパティを用意してくれているみたい

isLoading = true の時はローディング画面にしておく、や isError = true のときはエラー画面を表示するなど

処理が返ってきていないときはisLoadingという変数を用意して…と自分たちで実装しなくて良くなる

キャッシュがとても良いらしい

キャッシュを用いて先ほどの data のように値を返し、さらにバックグラウンドでfetchしているので差分があればfetch後に返す値を変えてくれる

参考：

• https://react-query-v3.tanstack.com/overview

https://reffect.co.jp/react/react-use-query