React Query2

Overview

• ajax 성공/실패 시 html 보여주기, 몇 초마다 ajax 요청, 실패 시 몇초 후 다시 요청 ? 하는 등의 다양한 기능을 유연하게 사용할 수 있도록 제공

Install

npm install @tanstack/react-query 

Settings

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

const queryClient = new QueryClient();
...
root.render(
  <QueryClientProvider client={queryClient}>
  ...
  </QueryClientProvider>
...

• index.js
• Provider 적용

Use

import axios
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'

function Component() {
  ...
  let result = useQuery('작명', () => { 
    return axios.get(url).then((a)=>{ 
        return a.data 
      }
    },
    { staleTime : 2000 }
  )
  ...
  
  return (
    ...
    // { result.isLoading ? "Loading..." : result.data.name }
    { result.isLoading && "Loading..." }
    { result.error && "Error" }
    { result.data && result.data.name }
    ...
  )
}

• 변수에 담아서 속성을 통해 성공/실패/로딩 중을 쉽게 파악이 가능해진다.
  • isLoading
  • error
  • data
  • 쌩으로 만들었다면, useState를 사용해야하는 데, 이를 피할 수 있다.
• 자동으로 재요청을 해준다.
  • Browser 또는 다른 Tap으로 갔다와도 다시 호출되는데, 이를 **"refetch를 해준다"**고 한다.
  • 실시간으로 바로 새로운 정보로 렌더링해줘야할 때 유용한 것이다.
  • staleTime과 같은 속성으로 이를 제어할 수 있다. (refetch에 대한 제한도 건 것이다.)
    • 위에서는 2초 안에 것은 refetch 안한다.
• 자동으로 실패 시, retry 해준다.
• react 쿼리는 똑똑하게, 중복되는 ajax 요청은 알아서 제어한다.
  • 10분 전에 ajax 요청 수행 ? 일단 10분 전 것 결과를 우선 보여줌. 그 이후 요청 (유저 입장에서는 빠른 느낌)