I am trying to figure out how to pass the input variables to a graphql query function to run a query and display the results. Not sure if I am passing the variables correct when the button is clicked. The getObjectQuery takes two variables startTime and endTime, both will be selected on the frontend by the user.
Parent Component:
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);
Child Function
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;
