38일차 프론트엔드 공부 -나만의 페이지 만들기 실습 04

- 프론트엔드 공부 38일차 -

글 작성 페이지에서 작성한 데이터를 DB로 보내고 글 작성 시 DB에서 데이터를 가져와 해당 게시판으로 이동하도록 할 것이다.

 

게시판 작성 페이지

 

게시판 상세 페이지

 

 

        router.push(`/boards/${result.data.createBoard._id}`);

게시판 작성 시 상세 페이지로 바로 이동하기 위한 코드

router을 이용하여 페이지를 이동하도록 하였다.

createBoard_id는  현재 작성된 글의 DB 번호이다.

 

export const FETCH_BOARD = gql`

  query fetchBoard($boardId: ID!) {

    fetchBoard(boardId: $boardId) {

      _id

      writer

      title

      contents

      createdAt

    }

  }

`;

export default function page() {

  const router = useRouter();

  console.log(router);

  const { data } = useQuery(FETCH_BOARD, {

    variables: { boardId: router.query.boardid },

  });

 

router.query.boardid : URL에서 일부분을 가져오는 코드

해당 영역을 DB의 번호를 나타낸다.

 

 

참고

    variables: { boardId: router.query.boardid },

 

해당 코드에서 대소문자 구분 확실 필요