인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

현정님의 프로필 이미지
현정

작성한 질문수

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

section 02 quiz 네번째 관련 질문입니다!

해결된 질문

작성

·

313

0

 Int cannot represent non-integer value

에러 404가 발생하면 네트워크 콘솔 창에서 해당 오류가 계속 발생한다고 뜹니다. 아마 가격을 제대로 입력받지 못해서 뜨는 오류같은데 어떻게 해결하는지 모르겠습니다 ㅠ

import { gql, useMutation } from '@apollo/client'
import { Fragment, useState } from 'react'

const CREATE_PRODUCT = gql`
  mutation createProduct($seller: String, $createProductInput: CreateProductInput!){ 
    createProduct(seller: $seller, createProductInput:$createProductInput){ 
      _id
      number
      message
    }
  }
`

export default function Graphql_Mutation2(){
  const [seller, setSeller] = useState('')
  const [name, setName] = useState('')
  const [detail, setDetail] = useState('')
  const [price, setPrice] = useState(0)

  const [myFunction] = useMutation(CREATE_PRODUCT)

  const onClickSubmit = async () => {
    const result = await myFunction({
      variables:{
        seller:seller,
        createProductInput:{
          name:name,
          detail:detail,
          price:price
        }
      }
    })
    console.log(result)
    console.log(seller, name, detail, price)
    alert(result.data.createProduct.message)
  }

  const onChangeSeller = (e) => {
    setSeller(e.target.value)
  }

  const onChangeName = (e) => {
    setName(e.target.value)
  }

  const onChangeDetail = (e) => {
    setDetail(e.target.value)
  }

  const onChangePrice = (e) => {
    parseInt(setPrice(e.target.value))
  }
  
  return(
    <Fragment>
      판매자: <input type='text' onChange={onChangeSeller} /><br />
      판매 제품: <input type='text' onChange={onChangeName} /><br />
      간략한 소개: <input type='text' onChange={onChangeDetail} /><br />
      가격: <input type='number' onChange={onChangePrice} /><br />
      <button onClick={onClickSubmit}>GRAPHQL-API(동기) 요청하기</button>
    </Fragment>
  )
}

답변 1

0

안녕하세요 현정님!

parseInt(setPrice(e.target.value)) 이 부분의 값을 setPrice(Number(e.target.value)) 이렇게 바꾸고 다시 시도해보시길 바랍니다.

에러가 발생하면, Network탭을 먼저 보시는걸 추천 드립니다.
payload를 통해 내가 보내주는 값이 제대로 들어가는지 확인 후 response로 백엔드에서 던져주는 값이 뭔지, 어떤 에러인지 파악해보시는게 에러 핸들링의 기본입니다.
해당 방법을 참고해 핸들링 해보시길 바랍니다.

위 방법으로 시도해보시고, 다시 답글남겨주세요!
감사합니다.😁

현정님의 프로필 이미지
현정
질문자

감사합니다! 무사히 실행되었습니다.

현정님의 프로필 이미지
현정

작성한 질문수

질문하기