さっと導入!React Queryで API からデータを取得する

2023年2月18日土曜日

react

t f B! P L

React Query と Fetch API を使って、API等からデータを取得する方法について紹介。

インストール

npm 又は yarn で「react-query」インストールしてください。

npm install react-query

準備(QueryClientProviderの追加)

React Query でAPIを実行するコンポーネントは、QueryClientProvider で囲われている必要があるので、特段問題なければ根元の App.js に設定する。

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

export default class App extends Component {
  render() {
    return (
      <QueryClientProvider client={queryClient}>
        <Routes>
          {/* 何かいろいろ */}
        </Routes>
      </QueryClientProvider>
    );
  }
}

useQueryでAPIを実行

APIを実行するコンポーネントで useQuery をインポートします。
今回は、GitHub の API を使って React 公式リポジトリの情報を取得しています。

import {useQuery} from 'react-query';

function Component() {

	// Fetch APIでデータを取得する処理
	const getRepos = async () => {
		const res = await fetch('https://api.github.com/repos/facebook/react')
		return res.json()
	}

	// useQueryでAPIを実行
	const {data, error, isLoading} = useQuery('github', getRepos)

  return (
    <div>
      {/* APIから取得したデータを表示 */}
      <p>リポジトリ名:{data.name}</p>
      <p>オーナー:{data.owner.login}</p>
      <p>概要:{data.description}</p>
    </div>
  )
}
スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ