0

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"
Prof3ssa
  • 23
  • 5

1 Answers1

0

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, f.e. this one ... you should use accessor to get access to the right parts of data.

xadm
  • 8,219
  • 3
  • 14
  • 25
  • I understand that my problem is rendering structured data, but in this case, how can I get the accessor for `projectname` to show in my table? any help will be appreciated. – Prof3ssa Oct 05 '18 at 12:55
  • try `accessor: d => d.ProjectName.projectname`? I don't use this package ... it's a function, you can insert `console.log()`: `d => { console.log(d); return d.ProjectName.projectname; }` - just try to find the proper way – xadm Oct 05 '18 at 13:05
  • `d.ProjectName["projectname"]`? was something logged? – xadm Oct 05 '18 at 16:09
  • nothing was logged, there's a problem with accessing it, its either I restructure the query but there should be a way to this .. – Prof3ssa Oct 08 '18 at 06:53
  • `accessor: d => d.ProjectName.projectname` should work. If it doesn't, then the code you posted here is not the one you're running. – Mrchief Oct 09 '18 at 03:08
  • It's not working I get an error saying `Error: A column id is required if using a non-string accessor for column above.` – Prof3ssa Oct 12 '18 at 08:14
  • it's clear - you have to define `id`, example contains this :] – xadm Oct 12 '18 at 10:09