无法将时间和数据作为输入并写入使用 Hasura GraphQL 实现的数据库

Question

我正在尝试使用 React 和 Hasura GraphQL 创建一个非常简单的 3 页日程管理应用程序。我将所有已安排的会议显示为一页，我将会议的标题、日期和参与者人数作为用户的输入，并将用户发送到下一页以输入会议的开始和结束时间。但是，当我尝试将输入的值写入数据库时​​，我收到一条错误消息：

variable startTime of type String! is used in position expecting time

和

variable date of type String! is used in position expecting Date

我不确定日期和时间是否是架构中的预期数据类型，我可以在编写查询时使用。我还附上了两个输入页面的代码，让您了解我现在做错了什么。

这是我的第一个输入页面：

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) ;

这是我尝试将数据写入数据库的第二页：

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);

我的关系的架构如下：

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

我无法找到表示日期和时间的方法。我是第一次使用 GraphQl，所以如果你能解释为什么我也会收到这个错误，那就太好了。

编辑：我的突变如下：

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
      }
    }
  }

Answer 1

您收到此错误是因为在您的 GraphQL 突变中，您将变量指定为 String! 类型，然后在需要 Date 的地方使用它。

例如，假设您有一个名为 update_event 的突变，其期望和参数 time 的类型为 Date，您的突变应如下所示：

mutation ($time: Date) {
    update_event(time: $time) {
        id
    }
}

而不是

mutation ($time: String!) {
    update_event(time: $time) {
        id
    }
}

在这两种突变中，update_event 期望参数$time 时间为Date。在第一个突变中，它是一个Date 在第二个突变中，它是一个String!。第一个是正确的，第二个会失败。

---

在你的情况下，你有突变：

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 {
         # ...
      }
    }
  }

您将所有参数类型指定为 String!，但根据错误，endTime 和 startTime 需要指定为 time：

mutation($title: String!, $date: String, $startTime: time, $endTime: time, $participants: Int!) {
    insert_Schedule(objects: {title: $title, date: $date, startTime: $startTime, endTime: $endTime, participants: $participants }) {
      affected_rows
      returning {
         # ...
      }
    }
  }