Trying to get the nested data downloads.copy to render on page. I see the data with Apollo Client Dev Tools but won't render to page. I've searched through the apollo-link-rest issues. I'm sure this is some syntax problem - or not. Any help/insight will be much appreciated.
import React, { Component } from "react";
import { graphql } from "react-apollo";
import gql from "graphql-tag";
const Query = gql`
query tool {
tools @rest(type: "ToolsPayload", path: "some-api/tools") {
id
headerTitle
description
downloads @type(name: "ToolsPayloadDownloads") {
copy
}
}
}
`;
class Tool extends Component {
render() {
const { loading, error, tools } = this.props;
if (loading) {
return <h4>Loading...</h4>;
}
if (error) {
return <h4>{error.message}</h4>;
}
return (
<div>
{tools.map(tool => {
return (
<div key={tool.id}>
<h1>{tool.headerTitle}</h1>
// ** CAN'T GET THE DOWNLOADS COPY TO RENDER ** //
<h1>{tool.downloads.copy}</h1>
</div>
);
})}
</div>
);
}
}
export default graphql(Query, {
props: ({ data }) => {
if (data.loading) {
return {
loading: data.loading
};
}
if (data.error) {
return {
error: data.error
};
}
return {
tools: data.tools,
loading: false
};
}
})(Tool);
{
[
{
"id": "1025",
"headerTitle": "Title",
"downloads": [
{
"id": "1234",
"copy": "Some copy",
}
]
},
{
"id": "1026",
"headerTitle": "Title2",
"downloads": [
{
"id": "5678",
"copy": "Some copy2",
}
]
},
]
}
