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

알려주신데로 한거 같은데

반응이 성공적이지 않았다 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>
  );
}