无法从 Apollo 记录数据

Can't log data from Apollo

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

例如,当我尝试从 data.flats.title React 获取数据时,我有未定义的信息,因此它是第一个 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;

您似乎需要一个简单的 nullundefined 检查来正确表示您的数据。您可以使用 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() as:

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