구매 페이지 useMutation 사용시 에러

[herrakam]

버그 설명

postOrder() 대신 useMutationPost()로 적용중 에러 발생

• get으로 가져오는 데이터의 undefined 속성을 없애는 조건문 아래에 mutate를 선언하면 React Hook "useMutationPost" is called conditionally. 가 발생함
• 조건문 위에서 mutate를 선언하면 data에 undefined 가 붙음

 const { data } = useQuery<API.ProductDetail, AxiosError>(['getInfos'], () =>
    getInfos(detailPath),
  );

  if (!data) {
    return <>에러</>;
  }

  const { mutate } = useMutationPost(
    URL,
    {
      purchases: [
        {
          productId: data.product.id,
          quantity: options.amount,
          productTotalPrice: data.product.price,
        },
      ],
      rentals: [],
      address: {
        fullAddress: address.address1 + address.address2,
        address1: address.address1,
        address2: address.address2,
        zipCode: address.zipCode,
      },
      totalPrice: data.discountInfoResponse.salePrice * options.amount,
    },
    { headers },
  );

해결 과정

• 조건문으로 데이터 타입 가드 하는 부분의 return을 지우기

 if (!data) {
   // return <>에러</>;
  }

• 데이터가 안들어왔을 때 에러 발생 화면은 어떻게 보여주나?
  => error boundary를 사용하면 된다!
• return 하는 거보다 Error를 Throw 하는 방식으로 변경

  if (!data) {
    throw new Error('데이터 없음');
  }

[godhyeongman]

useMutationPost를 해당 컴포넌트를 짜개서 해결 할 수 있을까요?
useQuery로 데이터만 받아오고 데이터가 있을경우 없을 경우를 짜개진 컴포넌트가 신경 쓰게해서
useMutationPost를 거기서 하는 아이디어 였습니다.
글로쓰려니 어렵네용

data ? <useMutationPost하는 컴포넌트> : <data통신 에러 컴포넌트>

아니면 data 자체를 ! 붙혀서 타입 단언을 할 수 도 있을것 같긴한데 좋은 방법은 아닌것 같아요.
타입가드 방법 찾아보고 오겠습니다.