다음으로 API 함수를 준비해주세요. 함수의 이름은 modifyArticle이라고 하겠습니다. 이 API는 put 메서드로 호출합니다.

api/articles.ts - modifyArticle.ts

export async function modifyArticle(params: {
  id: number;
  title: string;
  body: string;
}) {
  const {id, title, body} = params;
  const response = await client.put<Article>(`/articles/${id}`, {title, body});
  return response.data;
}

함수를 다 작성했으면 이 함수를 useMutation을 거쳐서 호출해줍시다. 데이터 작성이 성공한 다음에는 queryClient를 사용하여 기존 데이터를 갱신해주세요. 간단하게 구현하고 싶다면 단순히 invalidate를 하면 되고, 새로운 요청 없이 구현하고 싶다면 setQueryData를 사용하면 됩니다.

setQueryData를 사용하는 경우 처리가 조금 까다로울 수 있습니다. 페이지 목록에서 수정하고자 하는 항목을 찾고, 해당 항목을 교체하는 방식으로 구현해줘야 합니다. 이 과정에서 불변성도 유지해야 하기 때문에 배열의 내장 함수 map과 find를 활용하여 구현해야 합니다.