22.01.10 Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}).

Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). 
If you meant to render a collection of children, use an array instead.

 

위와 같은 Promise 에러와 함께 useQuery에 대한 결과 값을 저장하면 

const { data, loading, networkStatus, error } = await useQuery()

콘솔에는 다음과 같이 networkStatus 가 1, loading 값만 true로 저장되어 나온다. 

networkStatus 1 loading true error undefined data undefined

원인은 데이터를 loading만 하고 받아오지 못하는 상태여서 렌더링할 수 없는 것이다. 

해결은 loading일 경우에 렌더링하는 컴포넌트를 만들어서 data를 온전히 저장할 때까지 기다리는 것이다. 

return { loading && <LoadingComponent/> }

아무리 async, await를 써도 해결할 수 없는 문제였다.