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

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