Query 메소드란?
GraphQl의 경우 기존의 Rest-API와 CRUD 메소드에 차이가 있다.
Rest-API | GraphQL-API | |
생성 Create |
POST | MUTATION |
수정 Update |
PUT | |
삭제 Delete |
DELETE | |
조회 Read |
GET | QUERY |
Mutation의 경우 지난번에 apollo-client로 간단하게 사용하는 법을 포스팅한 적이 있다. (https://guuumi.tistory.com/50) 이번에는 Query를 수행하는 방법을 확인해보자.
Apollo-client로 graphQL Query 수행
기본적인 import 및 gql을 활용해서 API 이름을 지정해주는 방법은 useMutation과 동일하다. 다른 부분은 작동함수 라인이다.
const [ qqq ] = useMutation(CREATE_BOARD)
// useMutation은 작동 함수명(임의 지정 가능)을 대괄호로 감싼다.
const { data } = useQuery(FETCH_BOARD) // mutation은 [], query는 {}
// useQuery는 data(고정)를 중괄호로 감싼다.
useQuery는 비동기 방식이기 때문에 API를 데이터에서 불러오는 도중 페이지가 렌더링 될 수 있다. 따라서 조건부 렌더링, 옵셔널 체이닝 등을 활용하여 작업을 진행해야 한다. (삼항연산자도 쓸 수 있지만.. 길어진다. 조건부 렌더링 쓰는 편이 나음)
에러발생코드
import {useRouter} from 'next/router'
import {useQuery, gql} from '@apollo/client'
const FETCH_BOARD = gql`
query fetchBoard($number: Int){
fetchBoard(number: $number){
writer
title
contents
}
}
`
export default function DynamicRoutedPage(){
const router = useRouter()
const {data} = useQuery(FETCH_BOARD, {
variables: { number: Number(router.query.qqq) }
})
console.log(data)
return(
<div>
<div>{router.query.qqq}번 게시글 페이지 이동 완료 !!!</div>
<div>작성자: {data.fetchBoard.writer}</div>
<div>제목: {data.fetchBoard.title}</div>
<div>내용: {data.fetchBoard.contents}</div>
// 위의 코드 3줄이 에러났다.
</div>
)
}
조건부 렌더링을 사용하는 경우
return(
<div>
<div>{router.query.qqq}번 게시글 페이지 이동 완료 !!!</div>
<div>작성자: {data && data.fetchBoard.writer}</div>
<div>제목: {data && data.fetchBoard.title}</div>
<div>내용: {data && data.fetchBoard.contents}</div>
</div>
)
옵셔널 체이닝을 사용하는 경우
return(
<div>
<div>{router.query.qqq}번 게시글 페이지 이동 완료 !!!</div>
<div>작성자: {data?.fetchBoard?.writer}</div>
<div>제목: {data?.fetchBoard?.title}</div>
<div>내용: {data?.fetchBoard?.contents}</div>
</div>
)
'API, Database > GraphQL' 카테고리의 다른 글
[GraphQL] Apollo-Client / useQuery data 이름 변경하는 방법 (0) | 2022.01.24 |
---|