[Section 05-03] static-routing-board-query

useQuery를 사용한 조회 해보기

 

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

// 조회
const FETCH_BOARD = gql`
  query {
    # 1번 게시글 조회
    fetchBoard(number: 1) {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  // API 요청 후 받아온 데이터를 data 에 넣어준다.
  const { data } = useQuery(FETCH_BOARD);
  console.log(data);

  return (
    <>
      <div>게시글 이동이 완료되었습니다.</div>
      <div>제목: {data.fetchBoard.title}</div>
    </>
  )
}

 

 

그런데 이렇게 하면 Server Error 가 뜬다. 

이유는 useQuery(FETCH_BOARD) 에서 요청을 보냈을 때

data 에 undefined가 먼저 들어오기 떄문. 

 

그러므로 화면을 그릴 때  data.fetchBoard 이런 부분들에서

data 부분이 undefined 이기때문에 에러가 발생한다. 

 

useQuery(FETCH_BOARD) 에서 API 요청이 들어가고,

데이터베이스에서 데이터를 꺼낸 뒤 아래쪽에 데이터를 받아올 때까지는 시간이 걸린다.

그렇게되면 시간이 오래 걸리기 때문에, 우리는 그냥 보여줘도 괜찮은 부분들을 먼저 보여준다.

 

1번째 => 데이터를 받지 않았을 때 보여줘도 되는 부분들 (여기선 일반 텍스트들)

2번째 => 그 다음 데이터가 들어오면 그 부분을 그리자 (작성자,제목,내용의 데이터들)

 

이런식으로 2번에 걸쳐서 화면에 뿌려주면 더 빨라보인다는 느낌을 줄 수 있다.

 

data 가 있을 때 그려주기 를 위해 {data && data.fetchBoard.writer} 이렇게 수정하면

데이터가 있으면 그리고, 없으면 그리지 않는다.

<div>제목: {data && data.fetchBoard.title}</div>

 

단 조건부 렌더링 부분을 논리연산자로 매번 저렇게 하면 번거롭기때문에

<div>제목: {data?.fetchBoard.title}</div>

이런식으로 축약한 '옵셔널 체이닝'을 사용한다.

 

 

또, 게시글이 삭제되었을 때에도 에러가 날 수 있기 때문에,

fetchBoard 부분에도 옵셔널 체이닝을 사용해준다.

<div>제목: {data?.fetchBoard?.title}</div>

 

 

---

 

optional-chaning 과 nullish-coalescing

 

optional-chaning

형태 : aaa ?. bbb

(data && data.fetchBoard)

 

왼쪽이 참 -> 오른쪽 실행

왼쪽이 거짓 -> 왼쪽 실행

 

 

nullish-coalescing

형태 : aaa ?? bbb

(data || data.fetchBoard)

 

왼쪽이 참 -> 왼쪽 실행

왼쪽이 거짓 -> 오른쪽 실행

 

(null, undefined 이런 것들을 'nullish 하다' 라고 한다.)