>source

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

  • 답변 # 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! 그러나 오류에 따라 endTimestartTime 다음과 같이 지정해야합니다. 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 {
             # ...
          }
        }
      }
    
    

관련 자료

  • 이전 python - 사전을 형식화 된 문자열로 병합
  • 다음 web crawler - htmlparser (Python)로 텍스트 추출/텍스트 구문 분석