본문 바로가기
개발/react-query

useMutation : mutate는 void, mutateAsync는 promise

by 안뇽! 2022. 10. 19.
반응형

 

아래와 같이 적으니 await가 걸리지 않았다.

  /* Mutation */
  const { mutate: reviveApplication } = useMutation<
    AxiosResponse,
    AxiosError,
    ReviveApplicationByUserUuidAndApplicationUuidRequest,
    unknown
  >(variables => reviveApplicationRequest(variables));
  
  ..
  
  
  onOk: async () => {
        if (slugUrlData) {
          //await가 걸리지 않음
          const { data: reviveApplicationData } = await reviveApplication({
            applicationUuid,
            userUuid: profile?.uuid || ''
          });
          if (reviveApplicationData) {
            history.push(`/applications/${slugUrlData.slugUrl}/list/${applicationUuid}`);
          }
        }
      }

타입을 보니 void였다.

 

왜지?? 아폴로에서는 mutation은 promise인데,,

 

공식문서를 보니

 

mutate가 있고 mutateAsync가 있었다.

promise를 사용하고 싶으면, mutate대신 mutateAsync를 사용하라고 한다.

mutateAsync를 사용하니 잘 되었다.

  /* Mutation */
  const { mutateAsync: reviveApplication } = useMutation<
    AxiosResponse,
    AxiosError,
    ReviveApplicationByUserUuidAndApplicationUuidRequest,
    unknown
  >(variables => reviveApplicationRequest(variables));

...

      onOk: async () => {
        if (slugUrlData) {

          const { data: reviveApplicationData } = await reviveApplication({
            applicationUuid,
            userUuid: profile?.uuid || ''
          });
          if (reviveApplicationData) {
            history.push(`/applications/${slugUrlData.slugUrl}/list/${applicationUuid}`);
          }
        }
      }
    });
  };

타입을 보았을때도 promise로 잘 나온다.

반응형