无法将时间和数据作为输入并写入使用 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 {
         # ...
      }
    }
  }

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

Unable to take time and dat as input and write into database implemented using Hasura GraphQL

api

webhooks

reactjs

graphql

hasura