TIL 53. 2024-03-14

mutation 부분을 별도의 useHook으로 분리

"use client";

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { deleteTodo, patchTodo, postTodo } from "./useQuery";
import { queryKey } from "../queryKey/queryKey";

// CREATE
export const useCreate = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [queryKey.todos] });
    },
  });
};

//UPDATE
export const useUpdate = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: patchTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [queryKey.todos] });
    },
  });
};

//DELETE
export const useDelete = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: deleteTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [queryKey.todos] });
    },
  });
};

ChangeHandler 별도로 분리

"use client";

import { InputTodo } from "@/interface/types";
import { ChangeEvent, useState } from "react";

const useInput = (initialState: InputTodo) => {
  const [inputValue, setInputValue] = useState(initialState);

  const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    setInputValue((prev) => ({ ...prev, [name]: value }));
  };

  const onTextAreaChangeHandler = (e: ChangeEvent<HTMLTextAreaElement>) => {
    const { name, value } = e.target;

    setInputValue((prev) => ({ ...prev, [name]: value }));
  };

  const inputReset = () => {
    setInputValue(initialState);
  };

  return { inputValue, onInputChangeHandler, onTextAreaChangeHandler, inputReset };
};

export default useInput;