React/Graphql：显示查询结果

Question

所以在用户单击提交按钮后，我可以在控制台中看到结果。有人可以使用下面的代码给我一些关于如何显示这些结果的指示或示例吗？老实说，我没有想法。已经坚持了一周了。我见过的所有示例都有静态数据或在渲染时加载数据。我的应用程序在单击提交按钮时执行查询；没有预加载的数据。任何帮助将不胜感激。

class Calendar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          startTime: '',//This will keep track of the date/time
          endTime:''
        };

        this.handleSubmit = this.handleSubmit.bind(this);

      }

      handleSubmit = event => {
        event.preventDefault();

        console.log(this.state.startTime);
        this.setState({
          startTime: new Date(document.getElementById("startTime").value).valueOf(),//getElementById is a jQuery method
          endTime: new Date(document.getElementById("endTime").value).valueOf()
        }, () => {
          this.props.data.refetch({//Assign the inputvalues, which is the current state, to the variables after pressing the submit button
            startTime: this.state.startTime,
            endTime:this.state.endTime
          });
          console.log(this.state.startTime);
          console.log(this.state.endTime);
        });
      };

      render() {

        console.log(this.props);
        return (
          <div className="Calendar">
            <form onSubmit={this.handleSubmit.bind(this)}>
              <label>Start Time</label>
              <input type="datetime-local" id="startTime" step="1" />              



              <label>End Time</label>
              <input type="datetime-local" id="endTime" step="1" onSubmit={this.handleSubmit.bind(this)}/>
              <input type="submit" value="Submit" />
            </form>

          </div>

        );
      }
};
export default graphql(getObjectsQuery, 
  { options: (ownProps) => { 
    console.log(ownProps.startTime); 
    return ({ variables: { startTime: ownProps.startTime,
                            endTime: ownProps.endTime
     } }) 
  } } )(Calendar);

Answer 1

你有查询所需的一半，查询的 props 部分将能够帮助你将数据返回到你的组件。

export default graphql(getObjectsQuery, {
  options: (ownProps) => { 
    console.log(ownProps.startTime); 
    return ({ 
      variables: { 
        startTime: ownProps.startTime,
        endTime: ownProps.endTime
      }
    }) 
  },
  props({ data }) {
    // Data will contain loading, error, and your return object type
    // Since I am destructuring here, you'll need to use the property name
    // you've given in the query
    const { loading, error, returnData } = data;
    if (error) throw new Error(error);
    return { loading, returnData };
  }
})(Calendar);

此时，您的组件将在加载完成后拥有带有返回数据的道具。然后，您可以根据需要通过.map 显示任何内容。