Neau Adrien Neau Adrien - 28 days ago 13
React JSX Question

Graphene-django - How to catch response of query?

I use django and django graphene for make a graphql API.

In the view of my application, I use reactJS and react-bootstrap-table. React-bootstrap-table expects that I pass it an object array but does not support nested objects.

I created query in my schema.py:

class ApplicationNode(DjangoObjectType):
class Meta:
model = Application
filter_fields = ['name', 'sonarQube_URL']
interfaces = (relay.Node,)

class Query(ObjectType):
application = relay.Node.Field(ApplicationNode)
all_applications = DjangoFilterConnectionField(ApplicationNode)


The answers to these queries are JSON nested objects like this:

{
"data": {
"allApplications": {
"edges": [
{
"node": {
"id": "QXBwbGljYXRpb25Ob2RlOjE=",
"name": "foo",
"sonarQubeUrl": "foo.com",
"flow":{
"id": "QYBwbGljYXRpb45Ob2RlOjE=",
"name": "flow_foo"
}
}
},
{
"node": {
"id": "QXBwbGljYXRpb25Ob2RlOjI=",
"name": "bar",
"sonarQubeUrl": "bar.com"
"flow":{
"id": "QXBwbGljYXRpb26Ob2RlOjA=",
"name": "flow_bar"
}
}
}
]
}
}
}


I have to put them flat before giving them to React-bootstrap-table.

What is the better way, intercept the results of graphene-django queries to put them flat or make this job in ReactJS view?

If the first way is better, how to intercept the results of graphene-django queries to put them flat?

Answer

The best thing to do is to wrap react-bootstrap-table in a new component. In the component massage the relay props into a flat structure as needed for react bootstrap table.

For example:

MyReactTable = ({allApplications}) => {
  let flatApplications = allApplications.edges.map(({node: app}) => {
    return {
      name: app.name,
      sonarQubeUrl: app.sonarQubeUrl,
      flowName: app.flow.name
    };
  });
  return (
    <BootstrapTable data={flatApplications} striped={true} hover={true}>
      <TableHeaderColumn dataField="name" isKey={true} dataAlign="center" dataSort={true}>Name</TableHeaderColumn>
      <TableHeaderColumn dataField="sonarQubeUrl" dataSort={true}>Sonar Qube Url</TableHeaderColumn>
      <TableHeaderColumn dataField="flowName" dataFormat={priceFormatter}>Flow Name</TableHeaderColumn>
    </BootstrapTable>
  );
};