react-query는 서버 상태를 관리하기 위한 라이브러리이다. 서버 상태란 서버에서 받아온 데이터를 관리하는 것을 말한다.

데이터를 서버에서 가져오게 되면, 해당 데이터를 얼마나 유지하고 있어야 하는지, 언제 다시 가져와야 하는지 등을 관리해야 한다.

이때 react-query를 사용하게 되면 쉽게 관리할 수 있다.

v4 버전 부터는 react 뿐만 아니라 vue나 svelte등 다른 프레임워크에서도 사용할 수 있게 개발이 되면서 tanstack-query로 이름이 변경 되었다.

설치 및 세팅

• 설치

  pnpm install @tanstack/react-query
  

• providers.tsx

  src/components/providers.tsx

  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  
  const queryClient = new QueryClient();
  
  export const Providers: React.FC = ({ children }) => {
    return (
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    );
  };
  

데이터 가져오기

데이터를 가져올때애는 useQuery 훅을 사용한다.

const query = useQuery( { queryKey: [ ‘key’ ],   queryFn: callback })

데이터를 가져오는 useQuery 훅은 고유한 키와 콜백함수를 받아서 데이터를 가져온다.

• key : 고유한 키로 캐시를 관리하기 위한 값이다.
• callback : 데이터를 가져오는 함수이다.

const getData = () => fetch(url).then( res  => res.json() );

const query = useQuery( { queryKey: [‘data’],   queryFn: getData });

useQuery()훅은 4가지 프로퍼티와 2가지 메서드를 반환한다.

• 프로퍼티

  1. data : 반환된 데이터
  2. error : 에러
  3. isLoading : 로딩중인지 여부
  4. isError : 오류가 발생했는지 여부

• 메서드를

  1. refetch : 수동으로 데이터를 다시 가져오기
  2. remove : 캐시에서 특정 쿼리를 제거하는 함수

가져온 값을 캐실할때에는 다음과같이 staleTime과 cacheTime을 사용할 수 있다.

const query = useQuery({
      queryKey: ['data'],
      queryFn: 'getData',
      staleTime: 5000,
      cacheTime: 60000 
    })

• staleTime : 데이터가 만료되기 전까지의 시간
• cacheTime : 데이터가 캐시에 저장되는 시간

데이터 쓰기

데이터를 쓸때에는 useMutation 훅을 사용한다.

const mutation =  useMutation({ mutationFn: mutationFunction })

useMutation 훅은 4가지 프로퍼티 및 메서드를 반환한다.

• 프로퍼티

  1. data : 반환된 데이터
  2. isError : 오류가 발생했는지 여부
  3. isLoading : 로딩중인지 여부
  4. isSuccess : 성공했는지 여부

• 메서드

  1. mutate : 뮤테이션을 실행하기 위해 호출하는 함수
  2. reset : 데이터를 초기화하는 함수
  3. onSuccess : 성공시 실행되는 함수
  4. onError : 에러시 실행되는 함수

데이터를 쓸때에도 useQuery를 사용할 수 있지만 useMutation을 사용하면 데이터를 업데이트후 query key를 통해 관련 데이터를 다시 가져오게 한다 던가 하는 작업을 할 수 있다.

const { mutate } = useMutation({
    mutationKey: ['/products/update'],
    mutationFn: () => getProduct(),
    onSuccess: () => { 
      queryClient.invalidateQueries({ queryKey: ['/products/find'] });
    },
  });

위와 같이 useMutation을 사용하면 성공시에 onSuccess를 통해 다시 데이터를 가져오게 할 수 있다.