[英]Can't render a nested object from an array with Apollo-link-rest and ReactJS
Trying to get the nested data downloads.copy
to render on page. 尝试获取嵌套数据
downloads.copy
以在页面上呈现。 I see the data with Apollo Client Dev Tools but won't render to page. 我可以使用Apollo Client Dev Tools看到数据,但不会呈现到页面上。 I've searched through the apollo-link-rest issues.
我搜索了apollo-link-rest问题。 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",
}
]
},
]
}
downloads
is an array - use tool.downloads[0].copy
downloads
是一个数组-使用tool.downloads[0].copy
Query should contain an id
field in downloads
- to properly cache ToolsPayloadDownloads
type. 查询应在
downloads
包含一个id
字段-以正确地缓存ToolsPayloadDownloads
类型。
You can check this/inspect apollo cache data/details using react dev tools. 您可以使用react开发工具来检查/检查阿波罗缓存数据/细节。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.