useQuery

갑자기 hook 들어오는, use어쩌고 리액트 훅의 하나이다.
useState는 이제 익숙하지만 useQuery는 또 무엇에 쓰는 명령어인고...
그렇다. 지금 배우는 것이 어렵게 느껴진다면 더 어려운 것을 배워보자. 어렵게 느껴졌던 것이 상대적으로 쉬워보이는 효과가 있을 수 있다.

지난 번에 rest API 와 graphQL이라는 두 가지 API 작성법에 대해서 배웠다. 사실 블로그를 썼는데 아직 정리를 다 못해서 임시저장 상태이다.

query쿼리가 뭐야?

할 말은 많은데, graphQL은 CRUD를 크게 두 가지 방식으로 구분한다. 데이터를 그냥 읽어오면 되는가? 아니면 수정할 것인가? 즉 수정이 없느냐? 있느냐? 이것으로만 구분한다.
그러면 생각해보자 create, update, delete는 수정하는 것이고, read는 그냥 읽어오는 것이다. 이렇게 생각하면 쉽다. 그래서 그냥 읽어오는 것 이 요청을 query쿼리라고 하고 수정이 들어가는 요청을 mutation뮤테이션이라고 한다. 이 두 가지만 기억하면 된다.

쿼리를 언제쓰냐.

쿼리는 언제 필요할까? 게시판에다가 내가 글을 썼다고 가정하자. 그러면 내가 쓴 글이 데이터로 저장되려면 나는 뮤테이션 요청을 내려서 createBoard를 해야할 것이다. 그리고나서, 그 글을 게시판 목록 또는 상세보기에서 보여주려면, 데이터를 가져와야 한다. 즉 쿼리는 데이터를 읽어오는 요청을 날릴 때 사용하는 명령어다.

gql query

아래는 그래프큐엘의 쿼리 요청문이다. 당연한 말이지만 아폴로가 깔려있어야 사용할 수 있으며 아폴로 클라이언트에서 지큐엘을 불러와야 이렇게 쓸 수 있다. 변수명도 아래와같이 관행적으로 대문자로 사용함을 유의하도록 하자. 누가봐도 쿼리 변수네싶은 느낌이 들도록. 아래의 내용을 작성하려면 API Docs의 fetchBoard를 보고 작성해야한다.

import { gql } from "@apollo/client";
  export const FETCH_BOARD = gql`
    query fetchBoard($boardId: ID!) {
      fetchBoard(boardId: $boardId) {
        writer
        title
        contents
        createdAt
      }
    }
  `

사실 이 부분이 왜 이렇게 되는지 이해하기 어려운데 일단 처음 배운다면 이런 식으로 주구장창 먼저 사용해보자. 그리고 이해는 나중에 해도 무방하다. (나도 아직 이해 못했다ㅋㅋㅋ)

쿼리로 데이터 받기

보통 컨테이너, 프리젠터 방식으로 파일을 분리하면, 쿼리문도 분리되므로 import받아서 사용하게 된다. 쿼리문으로 받아온 데이터는 data라는 이름의 객체로 받아오게 되므로 아래와같이 받아서 사용한다. 이 data라는 변수명은 아폴로에서 정해준 것으로 내맘대로 바꿀 수 있는 것은 아니며, 변경하려면 { data: Rename } 이렇게 바꿔서 받을 수 있다. 여러 개 받아야하는 상황이 아니면 그냥 data라는 이름으로 받자.

import { FETCH_BOARD } from "./BoardWrite.queries";
const { data } = useQuery(FETCH_BOARD, {
    variables: { boardId: router.query.boardId },
  });

data 사용하기

  <Title>{props.data?.fetchBoard.title}</Title>
          <Contents>{props.data?.fetchBoard.contents}</Contents>

data.fetchBoard.title 이런식으로 필요한 데이터를 꺼내 쓸 수 있다. 데이터는 위에서 받아온 변수명, fetchBoard는 쿼리문에서 사용한 API 명령어이다. 위의 예시는 옵셔널 체이닝으로 데이터가 있으면 페치보드.타이틀에서 받아온 데이터를 써주고 아님 말으라는 조건부렌더링인데 이렇게 하는 이유는 유즈쿼리의 특성 때문이다. useQuery는 명령어가 사용될 때 실행되며 데이터를 받을 때까지 기다리지 않고 바로 html을 그리기 시작한다. 즉 그리고 있는 시점에서 아직 데이터가 없더라도 에러를 내지 않고 빈 칸으로 그림을 그리게 하기 위해서 저런 방식으로 조건부렌더링을 해준다. useQuery는 useMutation과 달리 async await을 사용하지 않는다는 점을 새삼 기억하자.