겪은 문제

select을 통해 data.status가 undefined 인 경우 ongoing으로 처리를 해주었음에도 transactionStatus에 undefined가 할당되는 경우가 생겼다.

문제 발생 이유

select의 경우 queryFn이 실행되고 난 후 데이터 처리가 진행된 후 data에 할당되는 것으로, 만약 queryFn이 실행되지 않았을 경우 data는 undefined이다.

따라서, data에 기본값을 할당해 문제를 해결 할 수 있다. data에 기본 값을 할당하는 방법은 아래 두가지 방법이 있다.

방법1

const { data = `idle`, refetch } = useQuery< // data에 직접 원하는 기본 값을 할당
    TransactionStatusRes,
    unknown,
    TransactionStatusType
  >({

방법 2

const useTransactionStatus = () => {
  const [transactionStatus, setTransactionStatus] =
    useState<TransactionStatusType>(`idle`);

  const { hash } = useSelector(selectTransactionSlice);
  const { data, refetch } = useQuery<
    TransactionStatusRes,
    unknown,
    TransactionStatusType
  >({
    queryKey: [
      TRANSACTION_STATE_WITH_TXHASH_QUERY_KEY,
      hash,
      transactionStatus,
    ],
    queryFn: () => KstadiumAPI.getTransactionStateWithTxHash(hash!),
    enabled: !!hash,
    initialData: {  // initialData를 통해 초기 값을 지정.
      resultCode: `success`,
      resultMessage: ``,
      totalCount: 0,
      status: undefined,
    },
    select: ({ status }) => {
      if (status === undefined) return `ongoing`;
      if (status) return `succeed`;
      return status === false ? `failed` : `ongoing`;
    },
  });

  useEffect(() => {
    console.log(`data`, data);
    setTransactionStatus(data);
  }, [data]);

  return { hash, data, transactionStatus, refetch };
};

☘️initialData란?