[Section 05-04] dynamic-routing-board-query

동적 라우팅

 

next.js 에선 동적 라우팅을 할 수 있도록 하는 기능을 제공하고 있다.

동적으로 들어올 부분을 폴더를 대괄호에 이름을 지어주고 사용한다.

 

여기서는 qqq 로 임의로 이름을 지어주었다.

 

import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";

// 조회
// number 부분을 변수에 담아 사용
const FETCH_BOARD = gql`
  query fetchBoard($number: Int) {
    fetchBoard(number: $number) {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  // next.js의 라우터 사용
  const router = useRouter();

  const { data } = useQuery(FETCH_BOARD, {
    // 변수로 받아오는 number
    // 여기서 qqq 란 동적 라우팅을 위해 우리가 폴더 안에 만들었던 [qqq] 폴더의 이름을 뜻함
    variables: {
      number: Number(router.query.qqq),
    },
  });
  console.log(data);

  return (
    <>
      // router.query.qqq 안에 있는 텍스트 출력
      <div>{router.query.qqq}번 게시글 이동이 완료되었습니다.</div>
      <div>작성자: {data && data.fetchBoard?.writer}</div>
      <div>제목: {data?.fetchBoard?.title}</div>
      <div>내용: {data ? data.fetchBoard?.contents : "로딩중입니다."}</div>
    </>
  );
}