首页 > 解决方案 > 如何使用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"

标签: javascriptreactjsgraphqlreact-tableexpress-graphql

解决方案


Mongo 和 GraphQL 只是结构化数据的来源。数据被正确获取(如记录),您在渲染树状结构数据时遇到问题。

只需阅读react-table文档,查看示例,例如这个……您应该使用accessor它来访问正确的数据部分。


推荐阅读