Reactjs/Graphql: TypeError: Object(...) Is Not A Function

After selecting a date and time then clicking the submit button I get the following error: TypeError: Object(...) is not a function The object is referring to is Action which is

Solution 1:

This is not the correct way of refetching the query.

Instead of

Action({
  variables: {
    timestamp: this.state.inputValue
  }
});

try

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

    console.log(this.state.inputValue);
    this.setState({
      inputValue: new Date(document.getElementById("time").value).valueOf()
    }, () => {
      this.props.data.refetch({
        timestamp: +this.state.inputValue
      });
      console.log(this.state.inputValue);
    });
  };

if you don't want to call this props data you can rename it on your HOC graphql, like this:

export default graphql(Action, {
  name: 'WHATEVERNAME'
  options: props => ({
    variables: {
      timestamp: props.inputValue
    }
  })
})(Calendar);

then you would be calling this.props.WHATEVERNAME instead of this.props.data

hope it helps :D

by the way, you are binding your handleSubmit method 3 times. You need to do it only once:

1. binding in render is not advised because you would be processing the bind every rerender:

So you will probably want to change <form onSubmit={this.handleSubmit.bind(this)}> to <form onSubmit={this.handleSubmit}>

2. you can bind it on the constructor as you did. That is ok. But it is a little verbose. I would remove that.

3.handleSubmit = event => { by declaring the method as an arrow function as you did the method is automatically binded to this. So I would keep that and remove the other 2 :)

PS: note that on number 3 if you were to write handleSubmit(e) {} it would not be binded to this so you would need one of the other 2 approaches. But again, number 3 is the most efficient way to bind :) Just remove the other 2 and you are good to go.