0

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
                  },
                  
                  });
                
                }
Community
  • 1
  • 1
N6DYN
  • 325
  • 1
  • 3
  • 17

1 Answers1

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';
Khen
  • 115
  • 11
  • 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 Jul 31 '18 at 05:54
  • tried this https://stackoverflow.com/questions/40643719/apollo-data-mutation-prop-not-passed-to-component 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. – N6DYN Jul 31 '18 at 07:05
  • Yep. It's really a bummer fam. I'm sorry can't help you with that. – Khen Jul 31 '18 at 07:10