static routing board query

해당 게시물로 이동되었다는 알림이 아닌
해당 게시물의 상세 내용을 백엔드에서 받아와서 출력하는 내용을 알아보자

FETCH_BOARD
	query{
    	fetchBoard(number: 6) {
        	writer
            title
            contents
        }
    }

const {data} = useQuery(FETCH_BOARD)
data.fetchBoard.writer
data.fetchBoard.title
data.fetchBoard.contents

실습

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

const FETCH_BOARD = gql`
query{
    fetchBoard(number:1){
        id
        writer
        title
        contents
    }
}
`
export default function StaticRoutingMovedPage() {

    const { data } = useQuery(FETCH_BOARD)
    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 부분에 게시글 번호를 하드코딩한 내용

백엔드에 이런 내용이 있다고 한다면

이런식으로 데이터를 받아와서 출력이 가능함.

<div>작성자 : {data.fetchBoard.writer}</div>
<div>제목 : {data.fetchBoard.title}</div>
<div>내용 : {data.fetchBoard.contents}

이런식으로 작성하게 되면 에러가 발생하는데
데이터를 불러오는 도중에 비동기로 페이지를 그리다 보니 데이터가 없어서 발생하는 에러이다

<div>작성자 : {data && data.fetchBoard.writer}</div>
<div>제목 : {data?.fetchBoard.title}</div>
<div>내용 : {data ? data.fetchBoard.contents : "로딩중 입니다."}

이런식으로 값이 없다면 공백으로 나오게 설정하여 로딩중에는 해당 부분만 공백으로 보이다가
값이 로딩 되면 정상적으로 출력되도록 할 수 있다.

또한 위코드의 경우엔 검색하려는 게시물이 삭제되었을 경우

3번 게시물을 삭제

이처럼 값을 찾을 수 없다는 에러가 발생하는데

<div>3번 게시글 이동이 완료 되었습니다.</div>
<div>작성자 : {data && data.fetchBoard?.writer}</div>
<div>제목 : {data?.fetchBoard?.title}</div>
<div>내용 : {data ? data.fetchBoard?.contents : "로딩중 입니다."}

이런식으로 대처가 가능함.