ReactJS/Javascript/Graphql/React-apollo:传递查询变量

Question

我正在尝试弄清楚如何将输入变量传递给graphql查询函数，以运行查询并显示结果。当按钮被点击时，我不确定我传递的变量是否正确。getObjectQuery使用两个变量startTime和endTime，这两个变量都将由用户在前端选择。

父组件：

class Calendar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
          startTime: '',//This will keep track of the 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.data);//This is where data is.
        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>

            {<ElementList startTime={this.state.startTime} endTime={this.state.endTime}/>}
          </div>

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

子函数

const ElementList = (props) => (
  <Query
    query={getObjectsQuery}
    variables={props.startTime, props.endTime}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error</p>;




          return (
            <Item.Group divided>
              {data.action.map(action =>
                <div>
                  <ul>
                  <li>{action.action}</li>
                  <li>{action.timestamp}</li>
                  <ul>
                  {action.object.map( (obj) => {
                    return (<li>{obj.filename}</li>)
                  })}
                  </ul>
                  </ul>
                </div>
              )}

              </Item.Group>


            );

        }}


  </Query>
);

export default ElementList;

Answer 1

我相信你的问题可能是你只是把你的道具作为变量来传递。需要将它们设置为特定的属性名称，以便graphql解析器接受它们。

variables={{start: props.startTime, end: props.endTime}}