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

섹션08 퀴즈를 풀고 있는데 상품등록 버튼을 누르면 오류가 떠요.

try, catch 사용하면 오류 메세지가 떠서 확인해보니 apolloError가 뜨네요..

뭔가 잘못 입력한게 있는 것 같은데 어느 부분이 잘못되었는지 모르겠어요ㅠㅠ

폴더 경로

/section08/boards

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

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

export default function CreateProductQuizPage() {

    const router = useRouter()

    const [seller, setSeller] = useState();
    const [name, setName] = useState();
    const [detail, setDetail] = useState();
    const [price, setPrice] = useState();


    const [myProduct] = useMutation(CREATE_PRODUCT);

    const onClickSubmitProduct = async () => {

        try {
            const result = await myProduct({
                variables: {
                    seller: seller,
                    createProductInput: {
                        name: name,
                        detail: detail,
                        price: price
                    }
                }
            });
            console.log(result);
            router.push(`/section08/product/${result.data.createProduct.id}`)
        } catch (error) {
            alert(error.messege)
        }
    }

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

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

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

    const onChangePrice = (event) => {
        setPrice(event.target.value)
    }

    return (
        <div>
            <div>판매자 :
                <input type="text" onChange={onChangeSeller} />
            </div>
            <div>상품명 :
                <input type="text" onChange={onChangeName} />
            </div>
            <div>상품내용 :
                <input type="text" onChange={onChangeDetail} />
            </div>
            <div>상품가격 :
                <input type="text" onChange={onChangePrice} />
            </div>
            <button onClick={onClickSubmitProduct}>상품등록</button>
        </div>
    )
}

폴더 경로

/section08/product/[id]

import { useQuery, gql } from "@apollo/client";
import {useRouter} from "next/router"

const FETCH_PRODUCT = gql`
query fetchProduct($productId: ID){
    fetchProduct(productId: $productId){
        seller
        name
        detail
        price
    }
}
`

export default function CreateProductQuizIdPage(){

    const router = useRouter();

    const {data} = useQuery(FETCH_PRODUCT, {
        variables : {
            productId: router.query.id
        }
    });
    console.log(data)

    return(
        <div>
            <div>{router.query.id} 상세정보</div>
            <div>판매자 : {data?.fetchProduct?.seller}</div>
            <div>상품명 : {data?.fetchProduct?.name}</div>
            <div>상품내용 : {data?.fetchProduct?.detail}</div>
            <div>상품가격 : {data?.fetchProduct?.price}</div>
        </div>
    )
}

productId: router.query.id 는 수업 내용 보며 입력했는데 아직 왜 이렇게 작성 되어야는지 이해가 되지 못했습니다..

createProduct에서 등록된 아이디가 fetchProduct의 [id] (변수 id)가 되는게 맞나요? 너무 헷갈려서 다시 여쭤봅니다