ReactJS/Javascript/Graphql/React-apollo：传递查询变量答案

【问题标题】：ReactJS/Javascript/Graphql/React-apollo: passing query variablesReactJS/Javascript/Graphql/React-apollo：传递查询变量
【发布时间】：2019-01-26 02:43:01
【问题描述】：

我试图弄清楚如何将输入变量传递给 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;

【问题讨论】：

标签： reactjs react-native graphql apollo react-apollo

【解决方案1】：

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

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

【讨论】：