refetch와 mutation의 캐시 동작

refetch와 mutation에서의 캐시 동작

react-query를 쓰는 이유는 loading,error처리의 간편함도 있지만, 캐시 관리의 편리함이 가장 크다. cacheTime(default = 5분)과 staleTime(default = 0)을 적절히 사용하여 요청을 보내지 않고 캐시 데이터를 사용할 수 있다. 이를 통해 서버 부하를 줄일 수 있고, 데이터 로드 속도를 높힐 수 있다.

 

react-query에서 refetch와 mutation을 사용할 때 캐시에 대한 동작은 조금 다르다.

refetch

refetch는 특정 쿼리를 다시 실행하고 해당 쿼리의 캐시를 업데이트 시킨다.

mutation

mutation은 데이터를 수정, 추가, 삭제하는 등의 작업을 수행할 때 사용되는데, mutation 자체는 캐시를 직접 업데이트하지는 않는다.

하지만 mutation의 후속동작으로 캐시를 업데이트하거나 재요청 할 수 있다.

 

예를 들어 mutation을 통해 Todo List에 새로운 일감을 추가했으면, 다시 Todo List를 불러와서 최신 상태로 업데이트 해야 한다.

 

queryClient.invalidateQueries()

특정 쿼리(들)의 캐시를 무효화 하는데 사용된다. 이 메서드를 호출하면 해당 쿼리(들)의 데이터는 stale상태가 되어 다음번에 해당 쿼리가 사용될 때는 재요청하게 된다.

import { useMutation, useQuery, useQueryClient } from 'react-query';

// 할 일 목록을 가져오는 쿼리
function useTodos() {
  return useQuery('todos', fetchTodos); // fetchTodos는 API 호출을 수행하는 함수
}

// 새로운 할 일을 추가하는 뮤테이션
function useAddTodo() {
  const queryClient = useQueryClient();

  return useMutation(
    (newTodo) => addTodoToAPI(newTodo), // addTodoToAPI는 API에 새로운 할 일을 추가하는 함수
    {
      // 뮤테이션이 성공한 후 콜백
      onSuccess: () => {
        // 'todos' 쿼리의 캐시 데이터를 무효화하여 다음번 조회 시 새로운 데이터를 가져옴
        queryClient.invalidateQueries('todos');
      },
    }
  );
}

function TodoComponent() {
  const { data: todos } = useTodos();
  const mutation = useAddTodo();

  const handleAdd = (newTodo) => {
    mutation.mutate(newTodo);
  };

  return (
    <div>
      {/* Todo List Rendering Logic */}
      {/* Add Todo Logic */}
    </div>
  );
}

useAddTodo 훅에서 onSuccess 콜백 내부에 queryClient.invalidateQueries('todos')를 사용하여 todos의 캐시를 무효화 할 수 있다. 이렇게 함으로 todos 쿼리가 다시 호출될 때 캐시를 사용하지 않고 실제 데이터를 다시 가져오게 한다.