【初心者向け】React QueryでQiita APIを叩いてみる #React

これはなに？

個人的に最近話題のReact Queryについて入門してみようと思うので導入がてら記事を書いてみました。

やってみようと思った背景

個人的に話題と書いたのにも理由があり、npm trendsで見てみると今年の1月頃から急激に伸びているのです。
これを見た筆者は驚いて今書いている、という感じです。

出典: npm trends

作ったもの

Qiita APIを使って記事を取得してそのまま表示する画面を作成しました！

導入手順

導入するにあたって、今回は以下の要件で進めていきます

React FW: Next.js
UIライブラリ: Chakra UI

1. プロジェクトの作成

作成手順は別の記事でも書いているので、ここでは省略させていただきます。

2. パッケージの追加

バージョンは執筆時点で最新の3.33.5です。

3. 導入

まずApp.tsxにProviderを記載します

App.tsx

import "@/styles/globals.css"
import type { AppProps } from "next/app"
import React from "react"
import { ChakraProvider } from "@chakra-ui/react"
import { QueryClient, QueryClientProvider } from "react-query"

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnWindowFocus: false,
      staleTime: 300000,
    },
  },
})

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </QueryClientProvider>
  )
}
export default MyApp

次にreact queryを使ってQiita APIを呼び出している部分

pages/reactQuery.tsx

import { Box, ListItem, Text, UnorderedList } from "@chakra-ui/react"
import { NextPage } from "next"
import React from "react"
import { useQuery } from "react-query"
import axios from "axios"

const ReactQuery: NextPage = () => {
  const query = "nextjs"

  const { data, isLoading } = useQuery("qiita", async () => {
    const { data } = await axios.get("https://qiita.com/api/v2/items", {
      params: {
        page: "1",
        per_page: "20",
        query: query,
      },
    })
    return data
  })

  if (isLoading) {
    return <Text>Loading...</Text>
  }

  if (!data) {
    return <Text>Error Occured</Text>
  }

  return (
    <Box>
      <UnorderedList>
        {data?.map((item: any, index: number) => {
          return <ListItem key={index}>{item.title}</ListItem>
        })}
      </UnorderedList>
    </Box>
  )
}

export default ReactQuery

オプションに関してはApp.tsxのqueryClientで、実際に使用するreactQuery.tsxではわずか10行ほどで実装できてとてもシンプルです。

defaultOptionsをトップレベルに書くだけで全画面で適用されるので無限に再フェッチするというアホみたいなことを防げたりするので良いなと思いました。

今回適用したデフォルトオプション

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnWindowFocus: false,
      staleTime: 300000,
    },
  },
})

retry:
リクエストに失敗した場合に何回まで再リクエストを送るか

refetchOnWindowFocus:
window.focus時に再取得を行うかどうか

staleTime:
再取得する間隔の指定
デフォルトでは0なので注意
ミリ秒で指定

まとめ

今回はReact Queryを使って実際に動かすところまでやってみましたが、mutationsやquery invalidation、その他のオプションをまだ使いきれていないので、また次回調べながら記事にしていこうと思います。