GraphQL $boardId: ID! 오류

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

해결된 질문

작성

436

안녕하세요! 강의듣는데 혼자서는 오류를 해결하지 못 할것 같아서 질문드립니다!

오류뜨는 부분은 freeboard_frontend > boards > [_id] > index.js (상세페이지) 입니다.

스크린샷 2023-03-10 오후 4.46.52.png

글 작성 -> 상세페이지로 이동 -> 상세페이지에서 수정 버튼 누르면 수정페이지로 이동 -> 수정페이지에서 수정하고 수정버튼 누르면 다시 상세페이지로 이동 > 상세페이지에서 삭제버튼 클릭하면 삭제후 리스트로 이동

제가 의도한 기능들은 모두 정상작동은 하는데 상세페이지에만 접속하면 해당 오류가 발생합니다..!

(상세페이지 query 코드입니다)

스크린샷 2023-03-10 오후 4.07.23.png 스크린샷 2023-03-10 오후 4.11.40.png -> $boardID: ID! 이부분에서 오류가 나는것 같은데 강의 자료실에 올라온 코드와 비교해봤지만 같게 작성된걸 확인했습니다!

(상세페이지 접속했을때만 NetWork에 이렇게 뜹니다ㅠㅠ)

스크린샷 2023-03-10 오후 4.46.16.png 스크린샷 2023-03-10 오후 4.25.51.png 스크린샷 2023-03-10 오후 4.30.51.png 스크린샷 2023-03-10 오후 4.09.46.png

스크린샷 2023-03-10 오후 4.55.11.png

한가지 더 궁금한 점이 있습니다!

타입 지정해줄때 Docs 보고 그대로 적으면 된다고 하셨는데 ($boardId: [ID!]!) 이렇게 적으니까 오류가 나서 ($boardId: ID!) 이렇게 적으니까 작동이되더라구요.. 제가 강의 들으면서 빼먹은 부분이 있는걸까요ㅠㅠ?

이럴땐 어떻게 적어야 할까요ㅠ??

export const DELETE_BOARD = gql`
  mutation deleteBoard($boardId: ID!){
    deleteBoard (boardId: $boardId)
  }
`;

react node.js seo graphql next.js

답변 1

코드캠프 프론트엔드 멘토

안녕하세요!

해당 오류는 fetchBoard를 해주실때, variables에 boardId가 제대로 들어오지 않아생기는 오류입니다.
variables를 보내주시는 부분에 options는 왜 주신걸까요?
원래는 options를 빼고 객체만 보내주시면 됩니다.
추가 질문은 독스를 잘못보고계십니다.
독스는 deleteBoards를 보고계시지만, 현재 뮤테이션을 날리는 api는 deleteBoard 입니다

감사합니다.😁

아르몽

delete부분은 확인했습니다! 감사합니다!😅

options는 그냥 네임택같은거라 자동으로 생기는거라서요ㅠㅠ
코드 복붙해서 올려보겠습니다!

  const { data : fetchBoard } = useQuery(FETCH_BOARD, {
    variables: { boardId: router.query._id }
  })

  const { data : fetchBoardComments } = useQuery(FETCH_BOARD_COMMENTS, {
    variables: { page: 1, boardId: router.query._id }
  })

지금 디테일페이지에 fetchBoard, fetchBoardComments 둘다 오류가 생기고
fetchBoardComments에 page:1 지우고 확인해봐도 오류가 생기는거보니 boardId 문제가 맞는것 같아요 ㅠㅠ..

혹시나해서 오류메세지 뜨는 부분 캡쳐해서 더 올려볼게요

console

network
한번은 실패하고 성공해서 결과적으로 페이지는 문제없이 잘 나오는것처럼 보이긴 합니다..

JSX
이렇게 받아와서 뿌려주고있어요

해결 방법이 없을까요..?ㅠㅠ

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

GraphQL $boardId: ID! 오류