playground 그래프큐엘 사용법 (fetchProduct)

해결된 질문

작성

117

수업 내용을 따라가면서 Board는 어떻게 하는지 파악이 어느 정도 되는데 그 외 profile 과 product 영상 내용에 없는 것들을 혼자 하자니 너무 버거워요.. ㅠㅠ 플레이그라운드의 독스를 참고해 코드를 입력하고 있지만 에러만 뜨고 정답을 알 수가 없어 답답합니다

예를 들어 deleteBoard를 할 때는

const DELETE_BOARD = gql`
mutation deleteBoard($number: Int)
{
    deleteBoard(number: $number){
        message
    }
}
`

 const onClickDelete = (event) => {
        
        deleteBoard({
            variables: {
                number: Number(event.target.id)
            },
            refetchQueries: [{ query: FETCH_BOARDS }]
        })
    }

이런 식으로 독스를 활용해서 입력할 수 있는데

deleteProduct의 경우 ProductID만 있어서 variables을 어떻게 작성해야는지 잘 모르겠어요

createProduct는 createProductInput의 타입 디테일이 뭐가 들어있는지 아는데

ProductID는 잘 모르겠습니다..

아래는 제 코드인데요 화면에 띄워지는건 되는데 삭제 버튼 클릭시 오류가 발생됩니다.

아무래도 variables 에 잘못 정의해서 생긴 오류일 것 같은데 위의 질문과 같이 플레이그라운드 활용이 미흡해 생긴 일 같네요.. 전 섹션에서도 사용 방법 감을 완전히 잡지 못해 다른 퀴즈들도 애먹게 되는데 ㅠㅠ 너무 어려워요..... OTL

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


const FETCH_PRODUCTS = gql`
query {
    fetchProducts{
        _id
        seller
        name
        detail
        price
    }
}
`
const DELETE_PRODUCT = gql`
mutation deleteProduct($productId: ID){
    deleteProduct(productId: $productId){
        _id
        number
        message
    },
}
`

export default function FetchProductQuiz() {

    const { data } = useQuery(FETCH_PRODUCTS);
    console.log(data?.fetchProducts);

    const [deleteProduct] = useMutation(DELETE_PRODUCT);

    const onClickDeleteProduct = (event) => {
        deleteProduct({
            variables: {
                productId:{
                    number: Number(event.target.id)
                }
            },
            refetchQueries: [{query: FETCH_PRODUCTS}]
        })
    }


    return (

        <div>
            {data?.fetchProducts.map(el => (
            <div>
                <input type="checkbox" />
                <span>{el.seller}</span>
                <span>{el.name}</span>
                <span>{el.detail}</span>
                <span>{el.price}</span>
                <button id={el.number} onClick={onClickDeleteProduct}>삭제</button>
            </div>
        ))}
        </div>
    )

}

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

지은님의 문제를 듣고 확인해 본 결과, deleteProduct 뮤테이션에 variables를 잘못 정의하신 것 같습니다. productId는 바로 ID 값을 받아야 하는데, 현재 코드에서는 productId에 객체를 넘기고 있네요. 수정할 부분은 다음과 같습니다.

올바른 variables 정의:

deleteProduct({
    variables: {
        productId: event.target.id
    },
    refetchQueries: [{query: FETCH_PRODUCTS}]
})

event.target.id는 이미 문자열 ID를 의미하므로, 직접 productId에 할당하시면 됩니다. number를 ID로 변환하거나 객체로 감쌀 필요가 없습니다. 또한, 삭제 버튼 클릭 시 오류가 발생한다면, 확실한 해결을 위해 event.target.id가 실제 삭제하고자 하는 상품의 _id와 정확히 일치하는지 확인해 보세요. 삭제 버튼의 id 속성이 el.number으로 되어 있는데, fetchProducts 쿼리 결과로 보아 _id 값을 사용해야 할 것 같습니다.

수정된 버튼 id 할당:

<button id={el._id} onClick={onClickDeleteProduct}>삭제</button>

이렇게 수정하시면 예상한 대로 작동할 것입니다.

융융

질문자

감사합니다 해결되었습니다.. ㅠㅠ

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

playground 그래프큐엘 사용법 (fetchProduct)