Map() 函数 return 在尝试 return 查询时未定义

Question

我在 return 从简单查询中获取数据时遇到问题。我使用 Apollo 的测试应用程序 (https://codesandbox.io/s/nn9y2wzyw4) 正确执行了此操作，但是当我尝试使用来自本地服务器的数据时，它抛出一个 TypeError: Cannot read 属性 'map' of undefined。查询显示在我的控制台日志和 GraphQL 操场上。

到目前为止我找到的 return 数据的唯一方法是地图功能，但我意识到它可能不适用于这种情况。我试过以百万种方式格式化我的 return 语句，但似乎没有得到它。我知道这可能是一个非常简单的解决方案。

import React from "react";
import { render } from "react-dom";

import ApolloClient from "apollo-boost";
import { ApolloProvider, useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql"
});

function GetPokemon() {
  const { loading, error, data } = useQuery(gql`
    {
      pokemonById(id: "003") {
        id
        name
      }
    }
  `);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  console.log(data);

  return data.pokemonById.map((id, name) => (
    <div key={id}>
      <p>
        {id}: {name}
      </p>
    </div>
  ));
}

export const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app </h2>
      <GetPokemon />
    </div>
  </ApolloProvider>
);

有关更多上下文，我正在使用此 GraphQL 服务器的本地版本：https://github.com/axelhzf/graphql-pokemon-server

在操场上，我的查询如下所示：

{
  "data": {
    "pokemonById": {
      "id": "003",
      "name": "Venusaur"
    }
  }
}

Answer 1

您正在尝试在对象上使用地图。

  return  (
    <div key={id}>
      <p>
        {data.pokemonById.id}: {data.pokemonById.name}
      </p>
    </div>
  );

Map() 函数 return 在尝试 return 查询时未定义

Map() function returning as undefined when attempting to return query

jsx

apollo

reactjs

graphql