[초보자용] React Query로 Qita API 두드리기.

이거 뭐야?

개인적으로 최근 화제가 된 리액트 큐리에 대해 입문을 시도해보고 싶어 도입과 함께 기사를 썼다.

해보고 싶은 배경.

개인적으로 쓴 화제도 이유가 있는데, 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를 사용하여 Qita 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줄 정도만 가능하며 매우 간단하다.
default Options를 맨 위에 쓰면 전체 화면에 적용할 수 있기 때문에 무한히 이런 바보 같은 일을 다시는 얻지 못하게 하는 것이 좋다고 생각합니다.

이 응용 프로그램의 기본 설정

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

retry :
요청이 실패한 경우 몇 번의 요청을 반복해서 보내야 합니까refetchOnWindowFocus :
window.포커스에서 다시 가져올지 여부staleTime :
다시 가져올 간격 지정
기본값은 0입니다.
밀리초 설정

총결산

이번에 리액트 큐리를 사용해 실제로 해봤는데 mutations와query invalidation 다른 옵션은 아직 다 못 썼으니 다음에는 조사하면서 기사를 쓰도록 하겠습니다.