데이터 통신과 GraphQL

데이터 통신 API

데이터 통신 API는 대표적으로 REST-API와 GraphQL이 있다.

 

 

REST-API와 GraphQL의 차이점

REST-API와 GraphQL은 몇가지 차이점이 있다.

우선 API의 이름 형식이 조금 다르다.

API 요청	REST-API	GraphQL
네이버에서 1번 게시글 조회	https://naver.com/borad/1	board(1)
네이버에서 철수 프로필 조회	https://naver.com/profile/철수	profile("철수")

 

REST-API의 경우는 흔히 보는 인터넷 주소처럼 생겼고,

GraphQL의 경우는 프로그래밍 언어의 함수처럼 생겼다.

 

 

API 요청의 응답 결과물에도 조금의 차이가 있다.

REST-API의 경우 백엔드 개발자가 만든 함수에서 반환해주는 모든 데이터를 받아야한다.

반면, GraphQL의 경우 필요한 데이터만 골라서 받을 수 있다.

이처럼 GraphQL은 필요한 데이터만 골라 사용할 수 있기 때문에 데이터 전송 측면에서 효율적인 통신이 가능하다.

 

REST_API와 GraphQL은 위에서 설명한 것 처럼 약간의 차이가 있기 때문에, 요청담당자를 다르게 사용해야 할 필요가 있다.

REST-API의 경우는 axios를, GraphQL의 경우는 apollo-client를 사용하게 된다.

 

---

 

REST-API와 GraphQL의 CRUD

API는 크게 4가지로 구분하는데 이를 CRUD라고 부른다.

새로운 것을 생성하는 API를 Create

기존의 것을 조회하는 API를 Read

기존의 것을 수정하는 API를 Update

기존의 것을 삭제하는 API를 Delete

이 API들의 기능 앞글자를 딴 것이 CRUD이다.

 

REST-API와 GraphQL은 CRUD의 방식에서 차이가 있다.

	REST-API	GraphQL
생성	POST	MUTATION
수정	PUT
삭제	DELETE
조회	GET	QUERY

 

코드는 아래와 같이 작성한다.

import axios from "axios"

const result = axios.post(API 이름)
const result = axios.put(API 이름)
const result = axios.delete(API 이름)
const result = axios.get(API 이름)

 

import { useMutation, useQuery } from "@apollo/client"

const result = useMutation(API 이름)
const result = useQuery(API 이름)

 

---

 

동기 실행과 비동기 실행

비동기 실행은 서버에 요청(등록, 수정, 삭제)을 기다리지 않고 다른 작업을 진행하는 방식이다.

동기 실행은 비동기 실행과 반대로 서버에 요청을 기다린 후에 다른 작업을 진행하는 방식이다.

 

비동기 실행의 경우 요청을 기다리지 않고 다른 작업을 진행시켜버리기 때문에 어떤 시점에서 오류가 발생할 수 있다.

아래가 바로 그 예시이다.

게시글 등록 API 요청 후 게시글 등록이 완료되기 전에 게시글 불러오기 작업을 진행해버리기 때문에 오류가 발생한다.

 

반면 동기 실행의 경후는 이전 작업을 기다리기 때문에 이런 오류가 발생하지 않는다.

 

 

vscode에서 비동기 실행, 동기 실행은 아래와 같은 코드로 작성할 수 있다.

// 비동기 실행
import axios from "axios"

const 비동기 = () => {
    const result = axios.get("https://koreanjson.com/posts/1");
    console.log(result);
};

 

비동기 실행에서 받아온 객체는 Promise 객체로 나타난다.

Promise 객체는 자바스크립트에서 비동기 처리를 위해 사용하는 객체이다.

서버에서 데이터를 받아오기도 전에 화면에 표시하면 오류가 발생하거나 빈 화면이 나타나게 되는데 이를 방지하기 위해 주로 사용된다.

 

 

// 동기 실행
import axios from "axios"

const 동기 = async () => {
    const result = await axios.get("https://koreanjson.com/posts/1");
    console.log(result);
};

 

동기 실행을 위해서는 async와 await가 필요하다.

이렇게 작성하면 API 요청에 대한 응답을 기다린 후에 콘솔에 출력하게 된다.

실제로 Promise 객체가 아닌 http 응답 데이터가 객체로 받아와 진 것을 확인할 수 있다.

 

---

 

apollo-client 세팅

next.js를 사용한다는 가정 하에, GraphQL을 통해 데이터 통신을 하려면 apollo-client 세팅이 필요하다.

_app.js 파일을 아래와 같이 수정해줘야한다.

 

 

 

추가로 API에 헤더 정보를 넘겨야한다면 아래와 같이 코드를 작성할 수 있다.

 

---

 

GraphQL 사용법

GraphQL의 사용법을 알아보기 위해 API가 필요하다.

작성자, 내용을 입력받아 게시글을 생성하는 가상의 API를 사용할 것이다.

게시글생성(
    작성자: String!
    내용: String!
): 게시글



// 게시글 타입의 구성은 아래와 같다
type 게시글 {
    _id: ID!,
    작성자: String,
    내용: String,
}

이 가상 API를 사용해서 GraphQL을 사용하는 방법을 알아볼 것이다.

 

우선 프로젝트 안에서 데이터 통신에 필요한 쿼리문을 작성해야 한다.

apollo-client의 gql을 사용해서 이미지처럼 쿼리문을 작성한다.

백틱(`)으로 작성해야 한다는 점에 주의해야 한다.

 

 

apollo-client에서 useMutation을 import해준다.

이 useMutation의 인자로 방금 작성한 쿼리문을 넣어준다.

그리고 구조분해할당으로 실행을 위한 함수를 받아준다.

 

 

받아온 createBoard 함수를 사용하면 백엔드에 게시글등록 요청이 가게 되고, 게시글이 등록되면 result로 _id, 작성자, 내용 객체가 담기게 된다.

 

게시글등록 뮤테이션의 작성자, 내용을 고정된 값이 아닌 가변값으로 넣고 싶다면 코드를 약간 수정해줘야 한다.

 

 

수정한 코드는 위 이미지와 같다.

쿼리문에서 ($변수명)이 가변 데이터를 받겠다는 의미이다.

이때 이 가변 데이터가 어떤 타입인지를 명시해줘야 하는데, 이는 백엔드에서 정해놓은 데이터 타입과 반드시 동일해야한다.

 

그리고 createBoard 함수에서는 인자를 전달해줘야 한다.

variables 객체 내에 쿼리문에서 정한 ($변수명)과 같은 이름을 가지는 프로퍼티를 만들어 그곳에 가변 데이터를 넣어주면 된다.