I am trying to create a very simple 3 page schedule managing app using React and Hasura GraphQL. I display all scheduled meetings one one page, I take the Title of the meeting, Date and number of participants as input from the user and sen the user to the next page to input the start and end time of teh meeting. However, When I try to wrote the inputted values in the database, I get an error saying :
variable startTime of type String! is used in position expecting time
and
variable date of type String! is used in position expecting Date
I am not sure if Date and Time are expected datatyoes in the schema that I can use while writing teh queries. I am also attaching the code of the two input pages to give you an idea of what I am doing incorrectly right now.
Here is my first input page:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button';
import { Link } from "react-router-dom";
import { withRouter } from 'react-router-dom'
class NewSchedulePageFirst extends React.Component {
constructor(props) {
super(props);
this.state= {
title: "",
date: "",
participants: ""
}
this.handleChange=this.handleChange.bind(this);
}
handleChange(event) {
const {name, value} = event.target
this.setState({
[name]: value
})
}
render() {
return (
<div className="form">
<div className="form-title">
<h2>Enter details for new entry </h2>
</div>
<div className="form-fields">
<Form>
<div className="form-title">
<Form.Control type="text" placeholder="Title" onChange={this.handleChange} value={this.state.title} name="title" />
</div>
<div className="form-date">
<Form.Control type="date" onChange={this.handleChange} value={this.state.date} name="date" />
</div>
<div className="form-participants">
<Form.Control type="number" placeholder="No. of participants" onChange={this.handleChange} value={this.state.participants} name="participants" />
</div>
</ Form>
</div>
<Link to={{
pathname: "/NewSchedulePageTwo",
state : {
title: this.state.title,
date: this.state.date,
participants: this.state.participants
}
}}>
<Button variant="outline-primary"> Next </Button>
</Link>
</div>
);
}
}
export default withRouter(NewSchedulePageFirst) ;
Here is my second page in which I try to write the data into the database :
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button';
import { GET_MY_SCHEDULE } from './currentscheduledisplay'
import { Link , withRouter } from "react-router-dom";
import { gql } from "@apollo/client";
import { useMutation } from "@apollo/client";
const ADD_SCHEDULE = gql `
mutation($title: String!, $date: String!, $startTime: String!, $endTime: String!, $participants: Int!) {
insert_Schedule(objects: {title: $title, date: $date, startTime: $startTime, endTime: $endTime, participants: $participants }) {
affected_rows
returning {
id
title
date
startTime
endTime
participants
}
}
}
`;
function NewSchedulePageSecond(props) {
// console.log(props.location.state);
const { title, date, participants } = props.location.state;
const [ stitle, setStitle ] = useState(title);
const [ sdate, setSdate ] = useState(date);
const [ sparticipants, setSparticipants ] = useState(participants);
const [ startTime, setStartTime ] = useState('');
const [ endTime, setEndTime ] = useState('');
// handleChange(event) {
// const {name, value} = event.target
// this.setState({
// [name]: value
// })
// }
// scheduleInput(event) {
// const { value } = event.target;
// this.setState({schedule : value});
// }
// componentDidMount() {
// }
const resetInput = () => {
setStitle(title);
setSdate(date);
setSparticipants(participants);
setStartTime('');
setEndTime('');
}
const updateCache = (cache, {data}) => {
// Fetch the todos from the cache
const existingSchedule = cache.readQuery({
query: GET_MY_SCHEDULE
});
// Add the new todo to the cache
const newSchedule = data.insert_todos.returning[0];
cache.writeQuery({
query: GET_MY_SCHEDULE,
data: {schedule: [newSchedule, ...existingSchedule.schedule]}
});
};
const [addSchedule] = useMutation(ADD_SCHEDULE, { update: updateCache, onCompleted: resetInput });
return (
<div className="form">
<div className="form-title">
<h2>Enter details for new entry </h2>
</div>
<div className="form-fields">
<Form>
<div className="form-start-time">
<Form.Control type="time" onChange={(e) => setStartTime(e.target.value)} value={startTime} name="startTime" />
</div>
<div className="form-end-time">
<Form.Control type="time" onChange={(e) => setEndTime(e.target.value)} value={endTime} name="endTime" />
</div>
</ Form>
</div>
<Link to='/'>
<Button variant="outline-primary" onClick={() => {addSchedule(
{variables: {title: stitle,
date: sdate,
participants: sparticipants,
startTime: startTime,
endTime: endTime
}})}}>
Create
</Button>
</Link>
{/* <p>
Title: {title}
</p>
<p>
Date: {date}
</p> */}
</div>
);
}
export default withRouter(NewSchedulePageSecond);
The schema for my relation is as follows:
id - integer, primary key, unique, default: nextval('"Schedule_id_seq"'::regclass)
title - text, default: 'Meeting'::text
participants - integer, default: 2
startTime - time without time zone
endTime - time without time zone
date - text, default: 'No Date Entered'::text
I am unable to figure out a way to represent Date and Time. i am using GraphQl for the first time so it would be great if you could explain why I am getting this error as well.
EDIT: My mutation is as follows :
mutation($title: String!, $date: String!, $startTime: String!, $endTime: String!, $participants: Int!) {
insert_Schedule(objects: {title: $title, date: $date, startTime: $startTime, endTime: $endTime, participants: $participants }) {
affected_rows
returning {
id
title
date
startTime
endTime
participants
}
}
}
