Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')

// script
const { data: testData, isLoading } = useQuery([""], () => fetchGetData(id),
        {
            enabled: Boolean(activityId.value),
        },
)

// tamplate
{{ testData[index]?.name }}

 

1. enabled  옵션을 활성화한 상태에서, 조건에 맞지 않아 useQuery가 데이터를 가져오지 않는 경우 => isLoading이 계속 true인 상태로 변하지 않음

 

2. useQuery가 데이터를 가져오지 않았기 때문에, 초기 데이터가 undefined 상태에서 화면에 데이터를 렌더링할 경우 => Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')

 

 

해결방법

 

초기값 설정하기

 

{
      enabled: Boolean(activityId.value),
      initialData: [],
},

 

각 타입에 맞게 데이터 초기화하기