无法从 Apollo 记录数据

Question

我使用 Apollo 从 GraphQL 获取数据。当我尝试从中记录数据时，useQuery我首先得到两个未定义的日志，第二个是带有 gql 数据的日志。当我试图从例如data.flats.titlereact 获取数据时，我有未定义的信息，所以它是来自 first 的信息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;

Answer 1

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

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

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>)}