React

【React】React Queryを使って、APIを取得する

作成日：2022年06月01日

更新日：2022年06月01日

React Query を使って、API の取得を管理します。

まずは、React Query をインストールします。

プロジェクトのターミナルで、npm install --save react-queryを実行します。

App.tsx で React Query のプロバイダを作成します。

react-queryから、QueryClient、QueryClientProviderをインポートします。

QueryClientを作成します。

tsx
const queryClient = new QueryClient();

コンポーネントをQueryClientProviderで囲みます。

tsx
return (
  <QueryClientProvider client={queryClient}>
    <Page />
  </QueryClientProvider>
);

次に、Page コンポーネントでreact-queryからuseQueryをインポートします。

tsx
import { useQuery } from "react-query";

useQuery を使い、API のデータを取得します。

今回は、React Query 公式サイト（https://react-query.tanstack.com/）のgithubのAPIを取得します。

tsx
const { isLoading, isError, data } = useQuery("repoData", () =>
  fetch("https://api.github.com/repos/tannerlinsley/react-query").then((res) =>
    res.json()
  )
);

useQuery の後の文字列は、わかりやすい文字列にします。

fetch の中に API の URL を入力し、res.json()を返すようにします。

読み取り中の時は、isLoading が true になります。

また、エラーが発生した場合は、isError が true になります。

ローディング中は、Loading…と表示されるようにし、エラーが発生した場合は、Error が表示されるようにしましょう。

tsx
if (isLoading) return <>Loading...</>;

if (isError) return <>Error</>;

data を取得することができたら、データ内容を表示するようにします。

tsx
import React from "react";
import { useQuery } from "react-query";

export default function Page() {
  const { isLoading, isError, data } = useQuery("repoData", () =>
    fetch("https://api.github.com/repos/tannerlinsley/react-query").then(
      (res) => res.json()
    )
  );

  if (isLoading) return <>Loading...</>;

  if (isError) return <>Error</>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

一通り完成したので、一度確認してみましょう。

一瞬、Loading…が表示され、API 内容が表示されました。

試しに、API の URL を間違って入力し、リロードすると、

tsx
const { isLoading, isError, data } = useQuery("repoData", () =>
  fetch("https://api.githubaaaaaaaaa.com/repos/tannerlinsley/react-query").then(
    (res) => res.json()
  )
);