열심히 만들어 놓은 게시글 등록 페이지 input 창에 값을 입력해놓고 등록하기 버튼을 눌렀는데

띠용... 아무것도 뜨지 않는다... 코드를 살펴보면

import { Page } from "@/styles/board";
import {
  Header,
  Wrapper,
  Inform,
  Vector,
  Name,
  Date,
  Body,
  Title,
  Contents,
} from "@/styles/board_detail";
import { gql, useQuery } from "@apollo/client";
import { useRouter } from "next/router";

//useQuery안에 담은 변수 만들자
const FETCH_BOARD = gql`
  query fetchBoard($boardId: ID!) {
    fetchBoard(boardId: $boardId) {
      _id
      writer
      title
      contents
      createdAt
    }
  }
`;

export default function BoardDetailPage() {
  //페이지 이동을 위해 라우터 사용
  const router = useRouter();

  //먼저 GraphQL에 있는 FetchBoard에 있는 데이터 가져와야됨
  const { data } = useQuery(FETCH_BOARD, {
    variables: { boardId: router.query.boardId },
  });

  return (
    <Page>
      <Wrapper>
        <Header>
          <Vector src="/images/Vector.png" />
          <Inform>
            <Name>{data?.fetchBoard?.writer}</Name>
            <Date>{data?.fetchBoard?.createdAt}</Date>
          </Inform>
        </Header>

        <Body>
          <Title>{data?.fetchBoard?.title}</Title>
          <Contents>{data?.fetchBoard?.contents}</Contents>
        </Body>
      </Wrapper>
    </Page>
  );
}

문제가 없는 것 같은데..ㅠㅠ 개발자 도구 콘솔창과 네트워크로 에러를 확인해보았다.

GraphQL에 등록이 돼서 아이디값은 잘 받아온 것을 확인!

에러 메시지를 발견!

변수 $boardId에 필수로 type인 ID가 들어있어야 하는데 없는 것 같다.

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

하지만 난 분명 router.query.boardId로 값을 넣어줬다.

저 안에 뭐가 들어있는지 확인하기 위해

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

  console.log(router);

console.log을 이용해 콘솔창을 확인해보았다

query에 boardId가 아니라 boardID 인 것을 확인했다. (소문자 d를 대문자 D로!)

오탈자를 고쳐주고 다시 실행!

 

성공

저작자표시 (새창열림)

'Front > React' 카테고리의 다른 글

[React] Edit Page 보완 - defaultValue와 myvariables  (0) 2023.03.18
[Error] cSpell Unknown word 무시하기  (0) 2023.03.16
[React] 컴포넌트(Component) 재사용  (0) 2023.03.16
[React] 초기 셋팅 Nodejs, npm, yarn 이해  (0) 2023.03.11
[React] Component 와 State  (0) 2023.03.08

티스토리툴바