「ReactQueryでつくるWebアプリケーション開発」の感想・備忘録

スポンサーリンク
posted with ヨメレバ
Amazon

点数

65点

感想

ReactQueryとはどんなものかは理解できたが、残念ながら役に立つ内容ではなかった。

いくつか誤記があった点、およびuseMutationやキャッシュの説明がかなり物足りない点、が気になった。

ReactQueryとは(TanStackQueryとは)

  1. APIコール時の結果(loadingやerrorなど)のハンドリングが簡単になる
    （ReactQueryを使わない場合、非同期処理内で自力で行わないといけない）
  2. APIの結果をキャッシュすることができる

導入

インストール

npm install @tanstack/react-query

index.js

// 〜省略〜
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

useQueryフック

// 〜省略〜
import { useQuery } from "@tanstack/react-query";
// 〜省略〜
const studentsQuery = useQuery({
  queryKey: ['students'],
  queryFn: () => axios.get('https://xxx.xx/api'),
});
console.log(studentsQuery.data);
console.log(studentsQuery.status); // pending, success, error
if (studentsQuery.status === "pending") return <p>ローディング中・・・</p>;
if (studentsQuery.status === "error") return <p>エラー！</p>;
return (
  <div>
    {studentsQuery.data.map((student) => (
      <p key={student.id}>{student.name}</p>
    ))}
  </div>
);
// 〜省略〜
  • studentsQuery.statusは最初pending、その後successとなる
  • queryKeyは[‘students’, keyword],のように変数を指定すると、変数が変わった場合のみクエリが実行され、キャッシュ有無の判定にも使われる
  • useQueryの第3引数にオブジェクトでonSuccess, onError, onSettledなどを渡すことができる
  • axiosではなくfetchを使う場合、レスポンスがなかった時に例外がthrowされないので自分で例外を投げる必要がある

useMutationフック

// 〜省略〜
import { useMutation } from "@tanstack/react-query";
// 〜省略〜
const taskMutation = useMutation({
  mutationFn: () => axios.post('https://xxx.xx/create', { name: 'hoge' }
});
// 〜省略〜
<button onClick={() => taskMutation.mutate()}>作成</button>
  • useMutationの第2引数にオブジェクトでonSuccess, onError, onSettledなどを渡すことができる
スポンサーリンク

コメント