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 根据显示需要覆盖任何内容。

React/Graphql：显示查询结果

React/Graphql: Display query results

reactjs

graphql

react-apollo

graphql-js