Rest-API & GraphQL-API

📌 rest-API

REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. -위키백과

import axios from 'axios'
import { useState } from 'react'

export default function RestGetPage(){
    const [data, setData] = useState("")

    const callRestApi = async () => {
        const result = await axios.get("https://koreanjson.com/posts/1")
        console.log(result)
        console.log(result.data.title)
        setData(result.data.title)
    }

    return (
        <div>
            <div>{data}</div>
            <button onClick={callRestApi}>REST-API 요청하기!!!</button>
        </div>
    )
}

• https://naver.com/board/1 > 홈페이지 주소처럼 생겼다.

• axios로 데이터를 요청한다.

• 모든 데이터를 받아와서 비효율적이다.

• 국내 대부분 기업 rest-API 사용한다.

• swagger에서 문서 확인하여 postman에서 연습 할 수 있다.

📌 graphql-API

GraphQl은 페이스북에서 만든 쿼리 언어이며, gql의 문장을 클라이언트 시스템에서 작성하며 호출한다.같은 쿼리언어인 Structed Query Language (이하 sql)과는 다르게 GraphQl은 웹클라이언트가 서버로부터 효율적으로 가져오는것을 목표로 한다.

import { useState } from 'react'
import { useMutation, gql } from '@apollo/client'

const CREATE_BOARD = gql`
    mutation createBoard($writer: String, $title: String, $contents: String) {
        createBoard(writer: $writer, title: $title, contents: $contents){
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationPage(){
    const [data, setData] = useState("")
    const [callApi] = useMutation(CREATE_BOARD)

    const callGraphqlApi = async () => {
        const result = await callApi({
            variables: { writer: "철수", title: "제목", contents: "내용"} // 하드코딩
        }) 
        console.log(result)
        console.log(result.data.createBoard.message)
        setData(result.data.createBoard.message)
    }

    return (
        <div>
            <div>{data}</div>
            <button onClick={callGraphqlApi}>GRAPHQL-API 요청하기!!!</button>
        </div>
    )
}

• board(1) > 일반 함수처럼 생겼다.

• apollo-client로 데이터 요청한다.

• 필요한 데이터만 골라서 받을 수 있다는 점이 효율적이다.

• 외국기업 많이 사용한다. ex) facebook, github, airbnb ...

참고 및 출처
rest-API: https://meetup.toast.com/posts/92
graphql-API: https://tech.kakao.com/2019/08/01/graphql-basic/