Reacjs/Graphql: Pass variables values to query from event

Question

So the code below is updating the state of inputValue but for some reason that value is not be passed to the query as the following error is shown:

[GraphQL error]: Message: Variable "$timestamp" of required type "Float!" was not provided., Location: [object Object], Path: undefined

So my question is how do I assign the inputValue to timestamp and pass timestamp to the getObjectsQuery?

class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ""
    };

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

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

    console.log(this.state.inputValue);
    this.setState({
      inputValue: new Date(document.getElementById("time").value).valueOf()
    }); //Parent component contains submit button and there lives state. Submit handler should only set value in state with...setState()- NOT directly
    this.props.data.refetch({
      //For some reason
      timestamp: this.state.inputvalue
    });

    console.log(this.state.inputValue);
  };

  render() {
    console.log(this.props);
    return (
      <div className="Calendar">
        <form onSubmit={this.handleSubmit.bind(this)}>
          <label>Date/Time</label>
          <input type="datetime-local" id="time" step="1" />
          <input type="submit" value="Submit" />
        </form>
      </div>
      //{this.render(){return (<UserList />)};
    );
  }
}

export default graphql(getObjectsQuery, {
  options: props => ({
    variables: {
      timestamp: props.inputvalue
    }
  })
})(Calendar);

const getObjectsQuery =gql query($timestamp: Float!){ action(timestamp: $timestamp){ action timestamp object{ filename } } } ; — N6DYN
have you checked the query is working correctly in graphiql/playground ? — AConsumer

xadm xadm · Accepted Answer · 2018-08-03T11:05:19

I know it's already solved in another place Reactjs/Graphql: TypeError: Object(...) is not a function

Just to remember (as you stil not learned):

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

  console.log(this.state.inputValue);  // OLD VALUE
  this.setState({
    inputValue: new Date(document.getElementById("time").value).valueOf()
  }); 

  this.props.data.refetch({
    //For some reason
    timestamp: this.state.inputvalue 
    // THERE IS STILL OLD VALUE 
    // because setState work asynchronously 
    // IT WILL BE UPDATED LATER
  });

  console.log(this.state.inputValue); // STILL OLD VALUE
};

To use value from event you could simply use its value, not passing it through 'async buffer' (state).

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

  console.log(this.state.inputValue);  // OLD VALUE
  const timestamp = new Date(document.getElementById("time").value).valueOf()
  console.log(timestamp);  // NEW VALUE

  // use new value directly
  this.props.data.refetch({
    timestamp: +timestamp
    // convert to int
  });

  // save in state - IF NEEDED at all
  this.setState({
    inputValue: timestamp
  });
};

Of course using setState callback is a quite good workaround, too.

Keep in ming that you can have 2 renders - one when state changes and second when data arrives. If storing value in state isn't really required you can avoid one unnecessary rendering.

Reacjs/Graphql: Pass variables values to query from event

1 Answers