ReactJS query variables

Question

Not sure what I am doing wrong but I receiving the following error message after I click on the submit button:

TypeError: this.props.ObjectQuery is not a function

The code for query is as follows:

   const ObjectQuery  = gql`
   query($timestamp: Float!){
    action(timestamp: $timestamp){
      action
      timestamp
        object{
          filename
    }
  }
}


`;

class UserList extends React.Component {
  render() {
  
    return (
          
        ({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>;
          if (error) {
            console.log(error);
            return <p>Error</p>;
          }

          if (data.action.length === 0) return <div>No Objects</div>;

          return (//this code binds the query above to the output and puts it on the screen.
            <Item.Group divided>
            {data.action.map(action => (
              <div>
              <ul>
                <li key = {action.action}>{action.action}</li>
                <li key = {action.timestamp}>{action.timestamp}</li>
                <ul>
                  {action.object.map((obj) => {
                    return (<li>{obj.filename}</li>)
                  })}
                </ul>
              </ul>
            </div>
          ))}
            </Item.Group>
          );
        }
       
    )};
  }
export default graphql(ObjectQuery, {
    options: (props) => ({variables: {timestamp: props.timestamp}})
})(UserList);

This is the code for the submit button. Also, for some reason the import statement is grayed out.

import ObjectQuery from '../UserList';   

handleSubmit(event) {
    event.preventDefault();
    console.log(this.state)
     this.setState({ inputValue: new Date(document.getElementById("time").value ).valueOf() });
                this.props.ObjectQuery({
                  variables:{
                    timestamp: this.state.inputValue
                  },
                  
                  });
                
                }

@riyajkhan what edits did you make? Trying to learn the platform. Also, when I try to use @ your name is not getting resolved. — N6DYN
– N6DYN, Commented Jul 31, 2018 at 5:39
added graphql tag as this related to specific GraphQL issues — RIYAJ KHAN
– RIYAJ KHAN, Commented Jul 31, 2018 at 6:00

Khen · Accepted Answer · 2018-07-31 05:46:23Z

2

First is you didn't create ObjectQuery as a function. You initialized it as a constant.

const ObjectQuery  = gql`
   query($timestamp: Float!){
    action(timestamp: $timestamp){
      action
      timestamp
        object{
          filename
    }
  }
}`;

If you want it to be a function, create it as a function. You can also use it on other components by exporting it. You can export a function by adding export

export function ObjectQuery() {
    gql`
query($timestamp: Float!){
 action(timestamp: $timestamp){
   action
   timestamp
     object{
       filename
 }
}
}
`;

}

Also, this.props.ObjectQuery is invalid since you didn't add it on the component. But seeing that you imported the ObjectQuery, you can now use it as a function.

this.setState({ inputValue: new Date(document.getElementById("time").value).valueOf() });
    ObjectQuery({ // no this.props
        variables: {
            timestamp: this.state.inputValue
        },

    });

Btw, if both files are on the same folder, you can use

import ObjectQuery from './UserList';

answered Jul 31, 2018 at 5:46

Khen

12511 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

N6DYN Over a year ago

Now I am getting an error with the following:

> 59 | export default graphql(ObjectQuery, {   60 |     options: (props) => ({variables: {timestamp: props.timestamp}})   61 | })(UserList);   62 |

N6DYN Over a year ago

tried this stackoverflow.com/questions/40643719/… and still nothing. It's annoyning when a product does not work per documentation. I have been here for hours changing my code thinking I'm doing something wrong only to find out 5 hours later it was not me but a bug in the product.

Khen Over a year ago

Yep. It's really a bummer fam. I'm sorry can't help you with that.

Collectives™ on Stack Overflow

ReactJS query variables

TypeError: this.props.ObjectQuery is not a function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

TypeError: this.props.ObjectQuery is not a function

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related