React Queryってなんぞや

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