tanstack-react-query (useMutation.mutateAsync)

useMutation.mutate 사용의 예

이전 블로그에 작성했었던 tanstack-react-query (useQuery, useMutation.mutate) 내용은
useQuery로 내용을 불러오고, useMutation의 mutate메서드로 post api를 전송하였는데
mutate 메서드의 경우 호출 이후 값을 비동기로 catch 하기 위해서는 isSuccess 속성으로 성공 여부를 판단하고
data 속성으로 실제 데이터 여부를 가져올 수 있었으므로

 

이렇게 보내고)

const {
    mutate,
    mutateAsync,
    data: postTodoResponse,
    isSuccess: postTodoIsSuccess
  } = useMutation(queries.fetchPostTodos);
...
const fetchTodoPosts = useCallback(async (id: string) => {
    const sendPosts = {
      title: "serpiko",
      body: "say hello",
      userId: id
    };
    mutate(sendPosts);
  }, []);

 

이렇게 받은 값을 출력해 볼 수 있고)

useEffect(() => {
    if (postTodoIsSuccess && postTodoResponse) {
      if (inputRef.current) inputRef.current.value = "";
      console.log(postTodoResponse);
    }
  }, [postTodoIsSuccess, postTodoResponse]);

 

이렇게 렌더링 까지)

...
<tbody>
  {postTodoIsSuccess && postTodoResponse && (
    <tr key={postTodoResponse.id}>
      <td>{postTodoResponse.userId}</td>
      <td>{postTodoResponse.id}</td>
      <td>{postTodoResponse.title}</td>
    </tr>
  )}
</tbody>
...

 

정리해놓고 보니 mutate로 호출하고 나서 그 결과값을 감지하기 위해서는 useEffect의 의존성으로 감지 했었다.

---

useMutation.mutateAsync 사용의 예

이제는 mutate가 아니라 mutateAsync 를 사용해보자.

mutateAsync는 promise를 리턴받을 수 있으므로, 함수 안에서 비동기 작업을 수행하여 로직에 대한 처리가 가능해진다.

Promise는 알고있듯이 작업의 성공에 따라서 해결(resolve)되거나 거부(reject)되므로
async, await 키워드를 사용하면 간단히 사용할 수 있는데, 이를 코드로 구현하면 다음과 같다.

 

이렇게 보내고)

const [greaterThan5, setGreaterThan5] = useState("");
  // fetchPostTodos
  const {
    mutate,
    mutateAsync,
    data: postTodoResponse,
    isSuccess: postTodoIsSuccess
  } = useMutation(queries.fetchPostTodos);
...
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (inputRef.current && inputRef.current.value) {
      const sendPosts = {
        title: "serpiko",
        body: "say hello",
        userId: inputRef.current.value
      };
      const responsePosts = await mutateAsync(sendPosts); // 비동기 함수실행
      console.log(responsePosts);

      if (parseInt(responsePosts.userId, 10) > 5) {
        setGreaterThan5("👍 5보다 크다");
      } else if (parseInt(responsePosts.userId, 10) === 5) {
        setGreaterThan5("👉👈 5와 같다");
      } else {
        setGreaterThan5("👎 5보다 작다");
      }
    }
  };

 

이렇게 처리에 대한 결과를 useState에 담아서 렌더링이 가능하며)

return(
   <p>결과: {greaterThan5}</p>
);

 

당연히 useEffect hook의 의존성으로도 감지가 가능하다)

useEffect(() => {
    if (postTodoIsSuccess && postTodoResponse) {
      if (inputRef.current) inputRef.current.value = "";
      console.log(postTodoResponse);
    }
  }, [postTodoIsSuccess, postTodoResponse]);

따라서 mutateAsync는 mutate보다 로직에 대한 처리가 더 쉽고, mutate와 마찬가지로 useEffect hook의 연계도 가능하다는 것이다.

 

최종 예제는 다음과 같다)