我正在构建一个 React 前端,它允许用户从静态查询列表中选择一个“活动”查询,并将结果展平为要在表格中显示的结果。将 GraphQL 查询从高阶组件传递到嵌套子组件的最佳方法是什么?
我见过的大多数文档/解决方案都侧重于将静态查询与从组件状态到组件的动态条件绑定,这不适用于我的目的,因为不同的静态查询具有不同的字段并查询不同的节点类型。
这里的最佳实践/推荐方法是什么?我觉得这不是一个非常独特的用例,但我似乎找不到任何可以做类似事情的例子。
我使用 Apollo-Client/Redux 作为我的客户端商店。
下面是组件的大致轮廓:
class GridViewPage extends React.Component{
constructor(props, context) {
super(props, context);
this.state = {
activeQuery = ... Stores the selected query ...
};
}
render() {
return (
<div className="gridContainer">
...Component here allows users to select a query from the active list and saves it/it's ID/Index to the state...
<Panel collapsible>
...Some toolbar components...
</Panel>
...Component here displays the result of the query (Ideally by receiving the query or the result of as a prop?)...
</div>
);
}
}
GridViewPage.propTypes = {
grids: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired
};
function mapStateToProps(state, ownProps) {
return {
// Receives list of available queries as a prop
grids: state.grids
};
}