useMutation

목적

• SWR에서는 get 요청 외에 post요청에 대한 훅은 별도로 제공하고 있지 않아서 직접 구현해서 사용해야 한다. react-query 나 apollo 로부터 그 방법을 착안하여 useMutataion이라고 칭한다.
• return 값은 data를 post 요청하는 함수와 해당 요청에 대한 상태값이다.
  • 함수는 mutation이라는 함수를 구현하고, 상태는 useState를 이용하여 구현한다.

libs/client/useMutation.tsx

import { useState } from "react";

interface UseMutationState<T> {
  loading: boolean;
  data?: T;
  error?: object;
}

// useMutation의 return [] 타입
type UseMutationResult<T> = [(data: any) => void, UseMutationState<T>];

export default function useMutation<T = any>(
  url: string
): UseMutationResult<T> {
  const [state, setSate] = useState<UseMutationState<T>>({
    loading: false,
    data: undefined,
    error: undefined,
  });

  // server data를 fetch 하고,  data와 error, isLoading를 정의함
  function mutation(data: any) {
    setSate((prev) => ({ ...prev, loading: true }));
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
      .then((response) => response.json().catch(() => {}))
      .then((data) => setSate((prev) => ({ ...prev, data, loading: false })))
      .catch((error) =>
        setSate((prev) => ({ ...prev, error, loading: false }))
      );
  }
  return [mutation, { ...state }]; // 
}

pages/products/upload.tsx

type UploadProductMutation = {
  ok: boolean;
  product: Product; // Prisma에서 만들어준 타입이며, client에서도 사용할 수 있다
};


// ... 중략 
  const [uploadProduct, { loading, data, error }] =
    useMutation<UploadProductMutation>("/api/products");

• useMutation 은 data를 post 할 때 사용하는 custom hook 이다.
• uploadProduct는 mutation으로 적용된다. parameter를 받아서 post 요청을 보낸다.
• useMutation의 제너릭에서는 response의 타입이 들어가고, Product은 Prisma에서 생성한 것을 사용할 수도 있다.