인프런 커뮤니티 질문&답변

안녕하세요 선생님!

낙관적 업데이트(2) 강의 마지막에 onSettled를 통해 update가 종료된 후 기존 캐시 무효화 후 db에서 다시 받아와서 갱신시켜주는 로직을 작성한걸로 알고있는데

이때 onMutate 내부에서 setQueryData를 통해 별도의 업데이트된 정보를 캐시에 세팅시켜주는 로직은 필요가 없어지게 되는건가용?

export function useUpdateTodoMutation() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: updateTodo,
    onMutate: async (updatedTodo) => {
      await queryClient.cancelQueries({
        queryKey: QUERY_KEY.todo.list,
      });
      const prevTodos = queryClient.getQueryData<Todo[]>(QUERY_KEY.todo.list);

      /* 이부분 */
      queryClient.setQueryData<Todo[]>(QUERY_KEY.todo.list, (prevTodo) => {
        if (!prevTodo) return [];

        return prevTodo.map((item) =>
          item.id === updatedTodo.id ? { ...item, ...updatedTodo } : item,
        );
      });
      /* //이부분 */

      return {
        prevTodos,
      };
    },
    onError: (error, variable, context) => {
      if (context && context.prevTodos) {
        queryClient.setQueryData<Todo[]>(
          QUERY_KEY.todo.list,
          context.prevTodos,
        );
      }
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: QUERY_KEY.todo.list,
      });
    },
  });
}