如何使用graphql将mongodb中多个集合中的数据传递到1个反应表

Posted 2023-03-10

【中文标题】如何使用graphql将mongodb中多个集合中的数据传递到1个反应表

【英文标题】：How to pass data from multiple collections in mongodb to 1 react table using graphql

【发布时间】：2019-03-10 22:50:13

【问题描述】：

我有一个反应表，我通过 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"

【参考方案1】：

Mongo 和 GraphQL 只是结构化数据的来源。数据被正确获取（如记录），您在呈现树状结构数据时遇到问题。

只需阅读 react-table 文档，查看示例，f.e. this one ...您应该使用 accessor 来访问正确的数据部分。

【讨论】：

我知道我的问题是呈现结构化数据，但在这种情况下，我怎样才能让projectname 的访问器显示在我的表格中？任何帮助将不胜感激。

试试accessor: d => d.ProjectName.projectname?我不使用这个包...它是一个功能，您可以插入console.log()：d => console.log(d); return d.ProjectName.projectname; - 只是尝试找到正确的方法

d.ProjectName["projectname"]?有记录吗？

没有记录，访问有问题，要么我重组了查询，但应该有办法解决这个问题..

accessor: d => d.ProjectName.projectname 应该可以工作。如果不是，那么您在此处发布的代码不是您正在运行的代码。