열심히 만들어 놓은 게시글 등록 페이지 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>
);
}문제가 없는 것 같은데..ㅠㅠ 개발자 도구 콘솔창과 네트워크로 에러를 확인해보았다.
에러 메시지를 발견!
변수 $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로!)
오탈자를 고쳐주고 다시 실행!
성공
'Framework(Library) > 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 |