React Query

유용한 분야는 실시간 데이터를 보여줘야 하면 유용함.

대부분의 사이트는 그렇지 않기 때문에 그냥 한번 보고 넘어갈 것임

설치

npm install react-query

import

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' 
const queryClient = new QueryClient();
...
  <QueryClientProvider client={queryClient}> 

서버에서 유저이름 가져와보여주기

위와 같이 진행할 예정임.

  import { useQuery } from '@tanstack/react-query';

  let result = useQuery(['작명'], () => 
    axios.get('https://codingapple1.github.io/userdata.json').then((a) => {
      return a.data;
    })
  );

  console.log(result);

위와 같이 사용하면 되고,

쓰는 이유, 장점1. 성공/ 실패/ 로딩중 쉽게 파악이 가능하다.

위에서

result.data // data값
result.isLoading // 로딩중일 때
result.error // 에러 시 

장점 2 틈만나면 재요청 해줌.

refetch 를 자동으로 해준다.

실시간으로 그 상태를 계속해서 보여줘야 하면 쓴다.

  let result = useQuery(['name'], () => 
    axios.get('https://codingapple1.github.io/userdata.json').then((a) => {
      return a.data;
    }),
    {staleTime: 20000}
  );

위와 같이 refetch 하는 시간도 설정할 수 있다.

장점 3. 요청 실패 시 retry 해줌.

장점 4. state 공유 안해도 된다.

그냥 어디서나 요청해주면 가져와지는데 react query는 똑똑해서 두군데서 해주는게 아니라 하나 가져와서 사용한다.

장점 5. ajax 결과 캐싱 기능 언제 가져왔는지 기록을 남김.

또 RTK Query 라는 redux toolkit 에서 제공해주는 Query를 써도 된단다.