Javascript Can'；来自阿波罗的t记录数据

我使用Apollo从GraphQL获取数据。当我试图从

useQuery

记录数据时，我得到两个日志，第一个是未定义的日志，第二个是带有gql数据的日志

当我试图从例如

data.flats.title

react中获取数据时，我有未定义的信息，因此它是来自第一个

console.log（）

的信息。如何获取数据并将其显示

控制台屏幕：

从“React”导入React；
从“@apollo/client”导入{gql，useQuery}；
常量myQuery=gql`
质疑{
公寓{
标题
}
}
`;
常数测试=（）=>{
const{data}=useQuery（myQuery）；
控制台日志（数据）；
返回GQL测试；
};
导出默认测试；

似乎需要一个简单的

null

或

undefined

检查来正确表示数据。您可以使用或

&&

检查

基于此，您可以使用

&&

在组件中执行以下操作：

const Test = () => {
  const { data } = useQuery(myQuery)

  return <>
    <h2>GQL TEST</h2>
    {data && data.flats && <span>data.flats.title</span>}
  </>
}

---

原因是使用

useQuery

调用的

gql

是异步的，并且需要时间才能返回结果。在启动请求后的第一次渲染中，

数据

为

未定义

。您可以使用

useffect

hook仅在

数据中有内容时触发日志记录。
const Test = () => {
  const { data } = useQuery(myQuery)

  return <>
    <h2>GQL TEST</h2>
    {data && data.flats && <span>data.flats.title</span>}
  </>
}

const Test = () => {
  const { data } = useQuery(myQuery)

  return <>
    <h2>GQL TEST</h2>
    {data && data.flats ? <span>data.flats.title</span> : null}
  </>
}

{data && data.flats && data.flats.map(e => <span>e.title</span>)}