Graphene-django - 如何捕捉查询的响应？答案

【问题标题】：Graphene-django - How to catch response of query?Graphene-django - 如何捕捉查询的响应？
【发布时间】：2017-03-21 20:29:47
【问题描述】：

我使用 django 和 django graphene 来制作 graphql API。

在我的应用程序视图中，我使用 reactJS 和 react-bootstrap-table。 React-bootstrap-table 期望我将对象数组传递给它，但不支持nested objects。

我在 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)

这些查询的答案是这样的 JSON 嵌套对象：

{
  "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"
            }
          }
        }
      ]
    }
  }
}

在将它们交给 React-bootstrap-table 之前，我必须将它们放平。

有什么更好的方法，拦截 graphene-django 查询的结果以将它们平放或在 ReactJS 视图中完成这项工作？

如果第一种方式更好，如何截取graphene-django查询的结果来放平？

【问题讨论】：

标签： python django reactjs graphql graphene-python

【解决方案1】：

最好的办法是将 react-bootstrap-table 包装在一个新组件中。在组件中，根据需要将中继道具按摩成扁平结构，以供反应引导表使用。

例如：

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>
  );
};

【讨论】：