无法记录来自 Apollo 的数据答案

【问题标题】：Can't log data from Apollo无法记录来自 Apollo 的数据
【发布时间】：2020-10-23 18:26:53
【问题描述】：

我使用 Apollo 从 GraphQL 获取数据。当我尝试从useQuery 记录数据时，我首先得到两个未定义的日志，第二个是带有 gql 数据的日志。

当我尝试从例如 data.flats.title 获取数据时，我有未定义的信息，因此它是来自第一个 console.log() 的信息。如何获取数据并显示？

控制台屏幕：

import React from "react";
import { gql, useQuery } from "@apollo/client";

const myQuery = gql`
  query {
    flats {
      Title
    }
  }
`;

const Test = () => {
  const { data } = useQuery(myQuery);
  console.log(data);
  return <h2>GQL TEST</h2>;
};

export default Test;

【问题讨论】：

原因是gql与useQuery的调用是异步的，取回结果需要时间。在您启动请求后的第一次渲染中，data 是 undefined。您可以使用 useEffect 挂钩仅在 data 中有内容时触发日志记录。

标签： javascript reactjs react-apollo gql

【解决方案1】：

您似乎需要一个简单的null 或undefined 检查来正确表示您的数据。您可以使用Ternary operator 或&& 检查。

基于此，您可以使用&& 在您的组件中执行以下操作：

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.flats 的命名来看，我可以假设它可以是一个数组，您需要在其中使用类似于我上面建议的.map() 为：

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

【讨论】：