Я пытаюсь взять выходной массив запроса GraphQL и визуализировать его с помощью React-Table, но получаю ошибку Cannot read property 'forEach' of undefined.
Единственный другой вопрос, похожий на мой, который мне удалось найти, не помог (Как показать данные с сервера GraphQL в таблице ответов npm?). Когда я выводил результат запроса на консоль, мне он казался обычным массивом, поэтому я не уверен, почему forEach его не распознает.
Код компонента:
import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';
import ReactTable from 'react-table';
import "react-table/react-table.css";
const getTemplatesQuery = gql`
{
getTemplates {
id
name
}
}
`;
const columns = [
{
Header: "ID",
accessor: "id"
},
{
Header: "Name",
accessor: "name"
}
];
const Templates = () => (
<Query
query = {getTemplatesQuery}>
{({ loading, error, data }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>error</p>;
// return data.getTemplates.map(({ id, name }) => (
// <p key = {id} >{`${name}`}</p>
// ));
console.info(data);
return (
<div>
<ReactTable>
data = { data.getTemplates }
columns = { columns }
defaultPageSize = { 10 }
</ReactTable>
</div>
);
}}
</Query>
)
export default Templates;
Код приложения:
...
class App extends Component {
render() {
return (
<ApolloProvider client = {client}>
<div>
<h2>My first Apollo app</h2>
<Templates />
</div>
</ApolloProvider>
);
}
}
render(<App />, document.getElementById("root"));



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Ваш синтаксис для таблицы ответов неверен, он должен быть примерно таким
<ReactTable
data = {data.getTemplates}
columns = {columns}
defaultPageSize = {10}
/>
Рад помочь :) Очень рекомендую использовать линтер (eslint) с конфигом airbnb. Он решает множество подобных проблем.
А я подумал, что проверил все опечатки :( спасибо!