흩어진 Mutation 모으기

• 아래에 mutation이 총 3개가 있다. 이 부분을 좀 더 깔끔하게 만들어보자.

input.jsx

function Input() {
  const queryClient = useQueryClient();

(1)  const mutation = useMutation(addTodo, {
      onSuccess: (data) => {
        console.log("data", data);
        queryClient.invalidateQueries("todos");
      },
    });
  
  // todo를 추가하는 reducer 호출
  // 인자 : payload
  mutation.mutate(newTodo);

todo.jsx

function Todo({ todo, isActive }) {
  const queryClient = useQueryClient();
  // 삭제 확인 용 메시지 관리

(2)  const deleteMutation = useMutation(removeTodo, {
      onSuccess: () => {
        queryClient.invalidateQueries("todos");
      },
    });

(3)  const switchMutation = useMutation(switchTodo, {
      onSuccess: () => {
        queryClient.invalidateQueries("todos");
      },
    });

  // hooks
  const navigate = useNavigate();

  // 완료, 취소를 handling하는 함수
  const handleSwitchButton = () => {
    const payload = {
      id: todo.id,
      isDone: !todo.isDone,
    };
    console.log(todo.id, !todo.isDone);
    switchMutation.mutate(payload);
  };

  // [삭제] 버튼 선택 시 호출되는 함수(user의 confirmation 필요)
  const handleRemoveButton = () => {
    deleteMutation.mutate(todo.id);
  };

useTodosQuery.js 파일 만들기

• useTodosQuery.js 파일 안에 모든 mutation을 함수로 넣어준다.

// 필요한 부분 import 하기
import { addTodo, removeTodo, switchTodo } from "../api/todos";
import { useMutation } from "react-query";

(1) export const useAddMutation = () => useMutation(addTodo);
(2) export const useDeleteMutation = () => useMutation(removeTodo);
(3) export const useSwitchMutation = () => useMutation(switchTodo);

mutation 호출하기

input.jsx

// 불러올 useAddMutation을 import 하고
import { useAddMutation } from "../../../query/useTodosQuery";

function Input() {
  const queryClient = useQueryClient();
  // 원래 mutation으로 선언했던 것을 아래처럼 원하는 이름으로 지정하여 선언해주고
  const { mutate: addMutate } = useAddMutation();
  
  // todo를 추가하는 reducer 호출
  // 인자 : payload
  // addMutate를 호출하면서 onSuccess는 여기에 넣어준다.
  addMutate(newTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries("todos");
    },
  });

todo.jsx

// 불러올 useDeleteMutation, useSwitchMutation을 import 하고
import { useDeleteMutation, useSwitchMutation } from "../../../query/useTodosQuery";
  // 원래 mutation으로 선언했던 것을 아래처럼 원하는 이름으로 지정하여 선언해주고
  const { mutate: deleteMutate } = useDeleteMutation();
  const { mutate: switchMutate } = useSwitchMutation();

// 완료, 취소를 handling하는 함수
// switchMutation.mutate 대신 우리가 선언했던 switchMutate을 넣어서 호출하고
// onSuccess는 여기에 넣어준다. (삭제버튼도 마찬가지)
  const handleSwitchButton = () => {
    const payload = {
      id: todo.id,
      isDone: !todo.isDone,
    };
    console.log(todo.id, !todo.isDone);
    switchMutate(payload, {
      onSuccess: () => {
        queryClient.invalidateQueries("todos");
      },
    });
  };

  // [삭제] 버튼 선택 시 호출되는 함수(user의 confirmation 필요)
  const handleRemoveButton = () => {
    deleteMutate(todo.id, {
      onSuccess: () => {
        queryClient.invalidateQueries("todos");
      },
    });
  };

query key 관리하기

keys.constant.js 파일 만들기

• 해당 파일 안에 query key를 관리해준다.
  -> todo list에는 하나 밖에 없지만 큰 프로젝트에서는 꼭 필요하다.

파일 안에 query key 넣고 export 하기

• 관리할 query key를 객체 안에 key: value 형식으로 넣어준다.

src/query/key.constant.js

export const QUERY_KEYS = {
  TODOS: 'todos',
}

query key 사용하기

• 사용할 때는 QUERY_KEYS를 import 해주고 QUERY_KEYS.TODOS로 불러준다.

input.jsx

import { QUERY_KEYS } from "../../../query/key.constant";

queryClient.invalidateQueries(QUERY_KEYS.TODOS);