无法记录来自阿波罗的数据

编程问答 2022-06-06

问题描述

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

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

控制台屏幕：

console screen

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;

解决方法

似乎您需要简单的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>)}
gqljavascriptreact-apolloreactjsreactjsreactjsreactjs