[GraphQL] Apollo-Client로 API 읽어오기 (Query)

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> 
    )