inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

section27 quiz 질문입니다.

해결된 질문

446

지우혁

작성한 질문수 10

0

알려주신데로 한거 같은데

반응이 성공적이지 않았다 400 상태 코드를 받았다고 alert창에 뜨는데.. 어떤게 문제 인지 잘 모르겠네요 ㅠㅠ

 

네트워크 페이로드를 보면 다 잘 들어간거같은데...

페이로드랑 코드입니다.

  1. {operationName: "createProduct",…}

    1. operationName: "createProduct"

    2. query: "mutation createProduct($seller: String, $createProductInput: CreateProductInput!) {\n createProduct(seller: $seller, createProductInput: $createProductInput) {\n id\n _typename\n }\n}"

    3. variables: {seller: "김갑수", createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"}}

      1. createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"}

        1. contents: "멋진 안경"

        2. pName: "안경"

        3. price: "15000"

      2. seller: "김갑수"

import { gql, useMutation } from "@apollo/client";
import { useState } from "react";

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

export default function Boards_05_quiz() {
  //js
  const [seller, setSeller] = useState("");
  const [pName, setPname] = useState("");
  const [contents, setContents] = useState("");
  const [price, setPrice] = useState("");

  const [createProduct] = useMutation(CREATE_PRODUCT);

  const onChangeSeller = (event) => {
    setSeller(event.target.value);
  };
  const onChangePname = (event) => {
    setPname(event.target.value);
  };
  const onChangeContents = (event) => {
    setContents(event.target.value);
  };
  const onChangePrice = (event) => {
    setPrice(event.target.value);
  };

  const onClickHandler = async () => {
    try {
      const result = await createProduct({
        variables: {
          seller,
          createProductInput: {
            pName,
            contents,
            price,
          },
        },
      });
      console.log(result);
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    //html
    <div>
      <input
        type="text"
        placeholder="판매자명을 입력해주세요"
        onChange={onChangeSeller}
      ></input>
      <input
        type="text"
        placeholder="상품명을 입력해주세요"
        onChange={onChangePname}
      ></input>
      <input
        type="text"
        placeholder="삼품내용을 입력해주세요"
        onChange={onChangeContents}
      ></input>
      <input
        type="text"
        placeholder="상품가격을 입력해주세요"
        onChange={onChangePrice}
      ></input>
      <button onClick={onClickHandler}>상품등록</button>
    </div>
  );
}

react node.js seo graphql next.js

답변 1

1

노원두

안녕하세요! 우혁님!

API를 요청하기 위해선, 이미 백엔드 개발자분께서 만들어주신 API명세서를 그대로 따라주셔야합니다!

아래는 playground에서 확인할 수 있는 API 명세서에요!

image

위 API 명세서를 확인해보면, pName, contents 등의 필드는 없는 것으로 확인이 되네요!
API명세서를 보면서 만들어 주세요!

1

지우혁

  1. 0: "GraphQLError: Variable \"$createProductInput\" got invalid value \"15000\" at \"createProductInput.price\"; Int cannot represent non-integer value: \"15000\""

  2. 1: " at /newbizcode_backend_common/node_modules/graphql/execution/values.js:116:15"

  3. 2: " at coerceInputValueImpl (/newbizcode_backend_common/node_modules/graphql/utilities/coerceInputValue.js:132:9)"

  4. 3: " at coerceInputValueImpl (/newbizcode_backend_common/node_modules/graphql/utilities/coerceInputValue.js:106:34)"

  5. 4: " at coerceInputValueImpl (/newbizcode_backend_common/node_modules/graphql/utilities/coerceInputValue.js:56:14)"

  6. 5: " at coerceInputValue (/newbizcode_backend_common/node_modules/graphql/utilities/coerceInputValue.js:39:10)"

  7. 6: " at loop (/newbizcodebackend_common/node_modules/graphql/execution/values.js:109:69)"

  8. 7: " at coerceVariableValues (/newbizcode_backend_common/node_modules/graphql/execution/values.js:121:16)"

  9. 8: " at getVariableValues (/newbizcode_backend_common/node_modules/graphql/execution/values.js:50:19)"

  10. 9: " at buildExecutionContext (/newbizcode_backend_common/node_modules/graphql/execution/execute.js:205:61)"

  11. 10: " at executeImpl (/newbizcode_backend_common/node_modules/graphql/execution/execute.js:103:20)"

  12. locations: [{line: 1, column: 41}]

    1. 0: {line: 1, column: 41}

      1. column: 41

      2. line: 1

  13. message: "Variable \"$createProductInput\" got invalid value \"15000\" at \"createProductInput.price\"; Int cannot represent non-integer value: \"15000\""

이런 에러가 나서 혹시나 setPrice 즉 입력받은 price가 int 가 아닌 string으로 들어가서 에러가 발생 하는걸까요??

1

노원두

네 맞아요! 우혁님!
보여주신 에러 메시지에 이런 문장이 들어있네요!^^

Int cannot represent non-integer value: \"15000\""

fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다

0

40

1

댓글 기능 구현 중 질문드립니다.

0

67

1

쿠폰코드 발급

0

140

2

example 서버 플레이그라운드, API 접속 모두 안됩니다.

0

87

2

문의드립니다!! ㅠㅠ

0

104

2

graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.

0

78

2

_app.js 작성 이후로 에러가 발생하네요

0

95

2

학습자료

0

71

2

학습자료가 안열립니다.

0

51

2

플레이 그라운드 퀴즈 문제 질문이 있습니다.

0

61

0

기존강의 구매자, 업데이트 끝인가요?

0

111

3

업데이트 버전 수강

0

89

2

완벽한 프론트엔드

0

136

2

나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.

0

84

1

graphql 접속이 안됩니다.

0

101

2

const, let 사용 질문 드립니다.

0

71

2

싸이월드 만들기 1탄 피드백 부탁드립니다.

0

122

2

회원가입 과제 피드백 부탁드립니다.

0

81

2

styled.span / styled.input "CSS 자동완성"

0

47

1

쿠폰 발급 관련

0

167

2

서버 502 error

0

247

2

쿠폰 다시 부탁드려도 될가여?

0

140

2

a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요

0

185

2

2분 44초 질문

0

132

3