[Section04-05] graphql-mutation-product

좀 더 복잡한 자료인 createProduct 로 graphql 심화 실습 해보기

 

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

// 세팅
const CREATE_PRODUCT = gql`
  # 변수의 타입 적는 곳
  mutation createProduct(
    $seller: String
    $createProductInput: CreateProductInput!
  ) {
    #실제 우리가 전달할 변수 적는 곳
    createProduct(seller: $seller, createProductInput: $createProductInput) {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const [createProduct] = useMutation(CREATE_PRODUCT);

  const onClickSubmit = async () => {
    const result = await createProduct({
      variables: {
        seller: "판매자 이름",
        createProductInput: {
          name: "티셔츠",
          detail: "좋은 티셔츠 입니다.",
          price: 30000,
        },
      },
    });
    console.log(result);
  };

  return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button>;