グラフェン - django - どのようにクエリの応答をキャッチしますか？

Question

私はgraphql APIを作るためにdjangoとdjango grapheneを使用します。

私のアプリケーションの観点からは、reactJSとreact-bootstrap-tableを使用しています。 React-bootstrap-tableはオブジェクト配列を渡しますが、nested objectsはサポートしていません。私はそれらを与える前にそれらを平らに配置する必要が

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

：これらのクエリへ

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ネストされたオブジェクトです：

は、私は私のschema.pyでクエリを作成しましたReact-bootstrap-tableに転送します。

もっと良い方法は、graphene-djangoクエリの結果を横取りしてフラットにしたり、ReactJSビューでこのジョブを作成したりすることです。

最初の方法が良ければ、graphene-djangoクエリの結果を横取りしてフラットにするにはどうすればよいですか？

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