dynamic routing board query

라우팅 종류
1. 정적 라우팅
2. 동적 라우팅

정적 라우팅의 문제점

이런식으로 했는데
글이 수십 수백개가 된다면

코드량이 말도 안되게 많아짐

동적 라우팅

폴더 이름을 대괄호 [] 로 감싸놓음.
1을 입력해도 100을입력해도 해당 폴더로 가며
100이라는 값이 aaa 의 변수에 들어가게됨.
해당 폴더에서 변수를 꺼내서 사용이 가능함.

실습해보기

경로는 [aaa] 하나만 하고

import { gql, useQuery } from "@apollo/client"

const FETCH_BOARD = gql`
query fetchBoard($number: Int!){
    fetchBoard(number: $number){
        id
        writer
        title
        contents
    }
}
`
export default function StaticRoutingMovedPage() {
    const { data } = useQuery(FETCH_BOARD,{
        variables: { number: 1 }
    }) 
    console.log(data)
    return (
        <div>
            <div>1번 게시글 이동이 완료 되었습니다.</div>
            <div>작성자 : {data && data.fetchBoard?.writer}</div>
            <div>제목 : {data?.fetchBoard?.title}</div>
            <div>내용 : {data ? data.fetchBoard?.contents : "로딩중 입니다."}</div>
        </div>
    )
}

내용은 일단 number를 변수로 받게만 설정하고 일단 1로 설정

주소에 1을써도 1000을 써도 알아서 실행되는 모습.

이제 주소에 입력한 값을 number 변수에 넣어보자

해당 값을 사용하려면

const router = useRouter()

기능을 사용해야함

const router = useRouter()
console.log(router)

먼저 router에는 어떤 내용이 찍히는지 보면

이런 내용들이 찍히는데
우리가 필요한건 아래쪽에있는 query 의 aaa 값이다

console.log(router.query.aaa)

콘솔을 찍어보면

원하는 값이 나온다
이제 해당값을 number 변수에 넣도록 해보자.

const { data } = useQuery(FETCH_BOARD,{
	variables: { number: Number(router.query.aaa) }
}) 

해보면

정상적으로 동작함.