[React] React-Query 사용해보기 (useQuery와 useMutation)

QueryClientProvider를 사용한 기본 세팅 방법부터 useQuery와 useMutation을 사용하는 방법에 대해서 알아보도록 하자.

📝 QueryClientProvider

리액트 쿼리의 설정을 초기화하고, 기능을 사용할 수 있도록 전역적인 context를 제공한다.

사용 방법

• QueryClient 인스턴스를 생성한다.
• QueryClientProvider를 최상단에 감싸준다.
• client={queryClient}를 통해 provider에 생성한 인스턴스를 전달한다.

import React from 'react';
import { QueryClient, QueryClientProvider} from 'react-query';

// QueryClient 인스턴스 생성
const queryClient = new QueryClient();

function App() {
  return (
    // QueryClientProvider로 애플리케이션 감싸기
    <QueryClientProvider client={queryClient}>
      <ToDoList />
    </QueryClientProvider>
  );
}

📝 useQuery

GET요청과 같이 데이터를 읽는 작업에 사용되며, 읽어온 데이터는 자동으로 캐싱된다.

사용 방법

• queryKey : 데이터 캐싱과 재사용을 위해 사용하는 unique key로, 같은 키를 가진 쿼리는 같은 데이터를 공유한다.
• queryFn : API를 호출하는 함수이다.
• Options : staleTime, enabled, refetchInterval, select 등 다양한 옵션을 설정할 수 있다.

import { useQuery } from 'react-query';

const { isLoading, error, data } = useQuery({
    queryKey: ['todos', { status, page }],
    queryFn: () => fetchTodoList(status, page),
  	staleTime: 5 * 1000,
  });

주로 사용하는 isLoading, error, data 이외에도 다양한 return값들이 있는데, 이에 대해서는 공식문서에서 자세히 알아볼 수 있다.

select
쿼리를 통해 받아온 데이터를 변경하거나 필요한 데이터만 추출할 수 있다.

const { isLoading, error, data } = useQuery({
    queryKey: ['todos', { status, page }],
    queryFn: () => fetchTodoList(status, page),
  	select: data => data.map(user => { 
        name: user.name, email: user.email 
    }),
  });

📝 useMutation

POST, PUT, DELETE 요청과 같이 데이터를 변경하는 작업에 사용된다.

사용 방법

useMutation을 사용하여 뮤테이션을 수행할 비동기 함수와 옵션을 설정한 후에, useMutation에 의해 반환된 mutate 메서드를 사용하여 정의했던 비동기 함수를 실행한다.

• mutationFn : API를 호출하는 함수이다.
• Options : onSuccess, onError, onSettled 등의 옵션을 통해 데이터 요청이 성공했을 때, 실패했을 때, 성공여부와 상관없이 실행할 작업 등을 설정할 수 있다.

import { useMutation } from 'react-query';

const addTodoMutation = useMutation({
    mutationFn: ({ token }) => addTodo(token),
    onSuccess: data => {
        console.log('성공');
    },
    onError: data => {
        console.error('실패');
    },
});

addTodoMutation.mutate({ token }); // mutationFn 실행

useMutation 역시 error, data, isSuccess 등 다양한 return값이 있으며 이에 대해서는 마찬가지로 공식문서에서 찾아볼 수 있다.