我在从简单查询返回数据时遇到问题。我已使用Apollo的测试应用程序(https://codesandbox.io/s/nn9y2wzyw4)正确执行了此操作,但是当我尝试使用本地服务器中的数据执行此操作时,将抛出TypeError:无法读取未定义的属性“ map”。该查询显示在我的控制台日志和GraphQL游乐场中。
到目前为止,返回数据的唯一方法是map函数,但是我意识到它可能不适用于这种情况。我已经尝试过以百万种格式格式化我的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"
}
}
}
答案 0 :(得分:1)
您正在尝试在对象上使用地图。
return (
<div key={id}>
<p>
{data.pokemonById.id}: {data.pokemonById.name}
</p>
</div>
);