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

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

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

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

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

QueryClientを作成します。

const queryClient = new QueryClient()

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

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

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

import { useQuery } from "react-query"

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

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

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 が表示されるようにしましょう。

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

if (isError) return <>Error</>

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

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>
  )
}

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

image2

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

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

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

image3

image4

エラーと表示されました。

ちなみにエラーになるまで、3 回 API を取得しようとします。

ブログ一覧