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

Posted 2023-03-08

【中文标题】ReactJS/Javascript/Graphql/React-apollo：传递查询变量

【英文标题】：ReactJS/Javascript/Graphql/React-apollo: passing query variables

【发布时间】：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;

【参考方案1】：

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

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