해결된 질문
23.06.05 15:42 작성
·
373
0
알려주신데로 한거 같은데
반응이 성공적이지 않았다 400 상태 코드를 받았다고 alert창에 뜨는데.. 어떤게 문제 인지 잘 모르겠네요 ㅠㅠ
네트워크 페이로드를 보면 다 잘 들어간거같은데...
페이로드랑 코드입니다.
{operationName: "createProduct",…}
operationName: "createProduct"
query: "mutation createProduct($seller: String, $createProductInput: CreateProductInput!) {\n createProduct(seller: $seller, createProductInput: $createProductInput) {\n id\n _typename\n }\n}"
variables: {seller: "김갑수", createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"}}
createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"}
contents: "멋진 안경"
pName: "안경"
price: "15000"
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>
);
}
답변 1
1
2023. 06. 05. 19:09
안녕하세요! 우혁님!
API를 요청하기 위해선, 이미 백엔드 개발자분께서 만들어주신 API명세서를 그대로 따라주셔야합니다!
아래는 playground에서 확인할 수 있는 API 명세서에요!
위 API 명세서를 확인해보면, pName, contents 등의 필드는 없는 것으로 확인이 되네요!
API명세서를 보면서 만들어 주세요!
2023. 06. 08. 13:25
네 맞아요! 우혁님!
보여주신 에러 메시지에 이런 문장이 들어있네요!^^
Int cannot represent non-integer value: \"15000\""
2023. 06. 07. 13:49
0: "GraphQLError: Variable \"$createProductInput\" got invalid value \"15000\" at \"createProductInput.price\"; Int cannot represent non-integer value: \"15000\""
1: " at /newbizcode_backend_common/node_modules/graphql/execution/values.js:116:15"
2: " at coerceInputValueImpl (/newbizcode_backend_common/node_modules/graphql/utilities/coerceInputValue.js:132:9)"
3: " at coerceInputValueImpl (/newbizcode_backend_common/node_modules/graphql/utilities/coerceInputValue.js:106:34)"
4: " at coerceInputValueImpl (/newbizcode_backend_common/node_modules/graphql/utilities/coerceInputValue.js:56:14)"
5: " at coerceInputValue (/newbizcode_backend_common/node_modules/graphql/utilities/coerceInputValue.js:39:10)"
6: " at loop (/newbizcodebackend_common/node_modules/graphql/execution/values.js:109:69)"
7: " at coerceVariableValues (/newbizcode_backend_common/node_modules/graphql/execution/values.js:121:16)"
8: " at getVariableValues (/newbizcode_backend_common/node_modules/graphql/execution/values.js:50:19)"
9: " at buildExecutionContext (/newbizcode_backend_common/node_modules/graphql/execution/execute.js:205:61)"
10: " at executeImpl (/newbizcode_backend_common/node_modules/graphql/execution/execute.js:103:20)"
locations: [{line: 1, column: 41}]
0: {line: 1, column: 41}
column: 41
line: 1
message: "Variable \"$createProductInput\" got invalid value \"15000\" at \"createProductInput.price\"; Int cannot represent non-integer value: \"15000\""
이런 에러가 나서 혹시나 setPrice 즉 입력받은 price가 int 가 아닌 string으로 들어가서 에러가 발생 하는걸까요??