react query

Overview

• ajax 성공/실패 시 HTML을 보여주려면 ?
• 몇 초마다 자동으로 ajax를 요청하려면 ?
• 실패 시 몇초 후 요청을 재시도하려면 ?
• 미리 페이지를 받아오는 등의 prefetch를 하려면 ?
• React Query 라이브러리를 사용하면 위 내용들을 쉽게 구현이 가능해진다. (실시간 SNS 등에만 유용하긴함)

Install & Setting

cd <project>
npm install '@tanstack/react-query'

---

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

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

• index.js

Features

성공/실패/로딩 중

let result = useQuery("Lotto", () => { axios.get("<dataUrl>").then((a) => { return a.data }) })

• 위와 같이 변수로 담아서 axios를 통한 통신 상태를 확인할 수 있다.

result.data
result.isLoading
result.error

• 위와 같이, react-query를 사용하면 변수로 여러 상태들을 확인 및 처리하기 용이해진다.

<Nav className='ms-auto'>{result.isLoading ? 'Loading ...' : result.data.name}</Nav>

• 이런식으로 로딩중이라거나하는 상황에서 다른 UI를 보여주는데 도움이된다.

<Nav className='ms-auto'>
            {result.isLoading && "로딩중"}
            {result.error && "에러"}
            {result.data && result.data.name}
</Nav>

자동 재요청

let result = useQuery("Lotto", () => {
    axios.get("https://codingapple1.github.io/userdata.json").
      then((a) => { console.log("요청"); return a.data })
  })

• tab을 이동해보면, 지속적으로 수행됨을 알 수 있다.
• 이를 refetch라고 하는데, 실시간으로 신선한 데이터들을 Display할 수 있다.

let result = useQuery("Lotto", () => {
    axios.get("https://codingapple1.github.io/userdata.json").
      then((a) => {
        console.log("요청");
        return a.data;
      }),
      { staleTime: 2000 }
  })

• staleTime을 통해 해당 ms안에서의 tab 변경은 무시하도록 할 수 있다.
  • refetch 간격을 설정해주는 것이다.

실패시, Retry

state 공유 필요 X

• 같은 url에서의 데이터 요청은 react-query 내부에서 알아서 여러번 요청하지 않고, 한번에 처리해서 ajax 코드를 호출한 부분에 전송해준다. props 전송이 필요 없다는 것이다.

ajax 결과 caching

• 5분 캐싱을 예로들면, 3분 뒤 axios 요청을 했을 때, 3분 전의 데이터를 먼저 보여주고, axios 요청이 수행된다. 이는 3분 전의 데이터를 보여주고(성공한 데이터) 나서 새로운 데이터도 보여주는 것이므로 사용자 입장에서는 빠른 것으로 보일 수 있다.

---

• redux-toolkit 설치 시 RTK Query 자동설치되므로 이거 써도 된다.