I have a react-table that I'm passing data through graphql queries. but my query has relationships with different objects within the database collections. When I pass the data I only get data from one collection.
Here's my query ---
const getBikesQuery = gql`
{
AllBikeEntries{
bikenumber
distributedyear
ProjectName{
projectname
}
}
}
`;
my table only displays data from bikenumber
and distributedyear
.
here's the rest of the code.
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);
the accessor for projectname
cant be read, and I have other more complicated queries that I cant render. what's the best way to go about this problem??
And just to add the data I need is logged on the console
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 and GraphQL are only source of structured data. Data is fetched (as logged) properly, you have a problem with rendering tree structured data.
Just read react-table
docs, look at examples, fe this one ... you should use accessor
to get access to the right parts of data.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.