javascript - 如何使用graphql将mongodb中多个集合中的数据传递到1个反应表
问题描述
我有一个反应表,我通过 graphql 查询传递数据。但我的查询与数据库集合中的不同对象有关系。当我传递数据时,我只从一个集合中获取数据。
这是我的查询---
const getBikesQuery = gql`
{
AllBikeEntries{
bikenumber
distributedyear
ProjectName{
projectname
}
}
}
`;
我的表只显示来自bikenumber
和的数据distributedyear
。
这是其余的代码。
const columns = [
{
Header: "Number of Bikes",
accessor: "bikenumber"
},
{
Header: "Season",
accessor: "distributedyear"
},
{
Header: "Project",
accessor: "projectname"
}
];
class Entries extends Component {
render() {
let {data} = this.props;
console.log(data)
return(
<div>
<ReactTable
data ={data.AllBikeEntries}
columns ={columns}
defaultPageSize={10}
/>
</div>
);
}
}
export default graphql(getBikesQuery)(Entries);
projectname
无法读取访问器,并且我还有其他更复杂的查询无法呈现。解决这个问题的最佳方法是什么?
并且只是添加我需要的数据记录在控制台上
AllBikeEntries: Array(2)
0:
ProjectName: {projectname: "INVC", __typename: "Projects", Symbol(id):
"$ROOT_QUERY.AllBikeEntries.0.ProjectName"}
bikenumber: 20
distributedyear: 2015
__typename: "Bikes"
Symbol(id): "ROOT_QUERY.AllBikeEntries.0"
__proto__: Object
1:
ProjectName: {projectname: "INVC", __typename: "Projects", Symbol(id):
"$ROOT_QUERY.AllBikeEntries.1.ProjectName"}
bikenumber: 35
distributedyear: 2016
__typename: "Bikes"
解决方案
Mongo 和 GraphQL 只是结构化数据的来源。数据被正确获取(如记录),您在渲染树状结构数据时遇到问题。
只需阅读react-table
文档,查看示例,例如这个……您应该使用accessor
它来访问正确的数据部分。
推荐阅读
- reactjs - Next.js : 带有上下文 API 的 getStaticProps
- ios - 通用:有没有办法让编译器检查 T 是一个特定的 UIView 子类?
- python - 使用 Pandas 在 Python 中删除多余的行
- wordpress - 自定义查询:按标题排序自定义帖子类型存档
- arrays - 查找对象中某个值的出现次数 - 打字稿
- c# - javascript 文件的 IIs 问题具有特殊字符,例如“test~1.js”
- discord.js - 如何更改 discord.js 中频道的权限?
- vue.js - VueJS + Axios - CORS 策略:无访问控制允许来源
- postgresql - initdb 后恢复 postgresql 数据库
- node.js - 如何为指向具有不同 URL 的同一应用程序的不同域配置 React 路由