React Query

요약

React Query?

이점

• 많은 서버 관련 코드들로 인해 예측하기 힘들어지는 사이드 이펙트를 간단하고 명확한 React Query 로직으로 대체하여 코드 구조를 개선할 수 있습니다.

• 캐싱 처리가 간편합니다.

• 여러 유용한 기능을 제공합니다.

• 웹 애플리케이션 상태를 서버와 원활하게 동기화할 수 있습니다. 항상 최신 데이터를 UI에 띄울 수 있습니다.

Query와 Mutation

• Query: 서버에서 데이터를 가져오는 작업을 주로 함, 주로 useQuery 훅을 사용, GET 요청

• Mutation: 서버의 데이터를 변경하는 부수효과가 있는 작업을 주로 함, 주로 useMutation 훅을 사용, POST-PUT-PATCH-DELETE 요청

• useQueries: 여러 데이터를 병렬로 가져와야 할 때 사용

• useInfiniteQuery: 무한 스크롤처럼 연속적으로 데이터를 가져와야 할 때 사용

• 쿼리를 사용한 컴포넌트가 마운트 되었을 때

• 윈도우가 다시 포커스 되었을 때

• 네트워크가 재연결 되었을 때

• refetchInterval 설정으로 반복적인 refetch가 일어날 때

retry

staleTime

• staleTime: 0
데이터를 가져오는 즉시 오래된 데이터라고 판단한 뒤, 캐시된 데이터를 사용한 후 API를 재호출하여 응답 받은 데이터를 교체합니다.

• staleTime: 2000
2초 이전에 데이터를 요청했다면 캐시된 데이터를 사용합니다. 2초 이후로 데이터를 요청했다면 응답받은 데이터로 교체한 뒤 캐시합니다.

cacheTime

• cacheTime: 2000
2초 이전에 데이터를 요청했다면 캐시된 데이터를 사용하고 API를 호출하여 응답 받은 데이터를 캐시합니다. 2초 이후로 데이터를 요청했다면 캐시했던 데이터는 가비지 컬렉션이 되었기 때문에 사용이 불가능하여 API를 호출하여 응답받은 데이터를 사용하고 캐시합니다.

queryKey

useQuery({ queryKey: ['todos'], ... })
useQuery({ queryKey: ['something', 'special'], ... })
useQuery({ queryKey: ['todo', 5], ... })
useQuery({ queryKey: ['todo', 5, { preview: true }], ...})
useQuery({ queryKey: ['todos', { type: 'done' }], ... })

// 동일한 쿼리
useQuery({ queryKey: ['todos', { status, page }], ... })
useQuery({ queryKey: ['todos', { page, status }], ...})
useQuery({ queryKey: ['todos', { page, status, other: undefined }], ... })

// 다른 쿼리
useQuery({ queryKey: ['todos', status, page], ... })
useQuery({ queryKey: ['todos', page, status], ...})
useQuery({ queryKey: ['todos', undefined, page, status], ...})

캐싱 라이프 사이클

1. A라는 queryKey를 가진 A 쿼리 인스턴스가 mount 

2. 네트워크를 통해 데이터를 가져오고(fetch), 가져오는 데이터는 A라는 queryKey로 캐싱

3. 이 데이터는 신선한(fresh) 상태에서 staleTime이후 오래된(stale) 상태로 변경

4. A 쿼리 인스턴스가 unmount 

5. 캐시는 cacheTime 만큼 유지하다가 가비지 컬렉션

6. 만약 cacheTime이 지나기 전, A 쿼리 인스턴스가 신선한(fresh) 상태라면 새롭게 mount되었을 때 캐시된 데이터를 보여줌

useQuery의 유용한 옵션

select

const QuerySelect = () => {
  const { data } = useQuery({
    queryKey: ["project"],
    queryFn: () => {
      return new Promise((resolve) => {
        setTimeout(() => resolve([1, 2, 3, 4, 5, 6]), 2000);
      });
    },
    select: (value: any) => value.filter((x: any) => x % 2 === 0)
  });

  return <div>{data?.join(",")}</div>;
};

export default QuerySelect;

enabled

const QueryEnable = () => {
  const [isEnable, setEnable] = useState(false);
  const { data } = useQuery({
    queryKey: ["project"],
    queryFn: () => {
      return new Promise((resolve) => {
        setTimeout(() => resolve([1, 2, 3, 4, 5, 6]), 2000);
      });
    },
    enabled: isEnable
  });

  useEffect(() => {
    setTimeout(() => setEnable(true), 2000);
  }, []);

  return <div>{data?.join(",")}</div>;
};

export default QueryEnable;

keepPreviousData

참고