[React] React Query의 useMutation를 사용하여 서버 데이터 변경하는 방법

 

useMutation이란?
값을 바꿀 때 사용하는 API로 return 값은 useQuery와 동일하다.

•  insert, update, delete 할 경우 사용 select는 useQuery를 사용한다.

useQuery 사용 방법

2022.08.25 - [React] - [ReacTS] React Query를 이용한 API 통신

 

 

 

---

사용방법

1-1) update 

const save = useMutation((data: any) => axios.post('http://localhost:8080/save', data));

const onSave = () => {
     save.mutate(person); 
}

 

1-2) update 후 get 실행

const mutation = useMutation(postTodo, {
  onSuccess: () => {
    // postTodo가 성공하면 todos로 맵핑된 useQuery api 함수를 실행합니다.
    queryClient.invalidateQueries("todos");
  }
});

• mutation 함수가 성공할 때, unique key로 맵핑된 get 함수를 invalidateQueries에 넣어주면 된다.

 

1-3) update 후에 return된 값을 이용해 get 함수의 파라미터를 변경

const queryClient = useQueryClient();

const mutation = useMutation(editTodo, {
  onSuccess: data => {
    // data가 fetchTodoById로 들어간다
    queryClient.setQueryData(["todo", { id: 5 }], data);
  }
});

const { status, data, error } = useQuery(["todo", { id: 5 }], fetchTodoById);

mutation.mutate({
  id: 5,
  name: "nkh"
});