비전공자의 공부일지 - GraphQL

GraphQL이란??

• GraphQL은 API용 쿼리 언어이다.
• GraphQL은 API의 데이터에 대한 이해하기 쉬운 설명을 제공하고, 클랑이 언트가 필요한 것을 정확하게 요청할 수 있다.
• 페이스북에서 2012년도에 개발되었다.

GraphQL의 장점으로는

1. 프론트개발중 백엔드 개발자가 RESP API처럼 개발을 마칠 때까지 기다리지 않아도 된다.
2. Overfetching과 Underfetching을 막아준다.
3. REST를 이용할 때 필요한 데이터를 만들기 위해서 여러 번 요청을 보내야 할 때 GraphQL은 한 번의 요청으로 데이터를 가져올 수 있다.
4. Schema를 작성하기 때문에 데이터가 어떻게 이루어져 있는지 알 수 있다.
5. Type을 작성하기 때문에 요청과 응답에 Vaild 한 데이터가 오고 갈 수 있다.

 

GraphQL의 단점으로는

1. FE,BE 개발자가 GraphQL사용법을 따로 배워야 한다.
2. 백엔드 Schema 및 Type을 정해줘야 한다. (작은 앱에서 사용 시 번거로울 수 있다.)
3. REST API보다 데이터를 캐싱하는데 까다롭다.

 

간단한 사용 테스트

GraphQL API 서버를 간단하게 사용해 보는 방법은 Express를 사용하는 방법이다.

 

간단한 서버를 테스트해 보기 위해 아무 폴더를 생성한 후 

 

npm init -y를 사용하여 package를 생성 후 

 

npm install express express-graphql graphql을 설치해 준다.

 

server.js

 

const express = require('express');
const app = express();
const port = 4000;

app.listen(port,() => {
    console.log(`Running a GraphQL API server at http://localhost:${port}/graphql`);
});

위에서부터 코드를 읽어 보면

express를 불러와 준후 app에 정의하고 port는 4000번이라고 지정해 준다.

app.listen으로 앱을 실행할 포트 번호와 실행되고 서버가 실행되었다는 console을 선언해 준다.

이렇게 하면 기본적인 서버를 실행할 수 있다. 

 

이제 스키마를 만들고 정보를 받아와 보자

 

완성코드

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const {buildSchema} = require('graphql')
const app = express();
const port = 4000;

const schema = buildSchema(`
    type Query{
        description: String
    }
`);

const root = {
    description:'hello world2'
}

app.use('/graphql',graphqlHTTP({
    schema : schema,
    rootValue:root

}));

app.listen(port,() => {
    console.log(`Running a GraphQL API server at http://localhost:${port}/graphql`);
});

먼저 buildSchema를 사용해 스키마의 구조를 작성해주어한다고 한다.

schema라는 변수를 만들고 안에 buildSchema의 구조를 작성해 준다. 

데이터가 나오려면 type Query안에 원하는 key값과 타입을 넣어야 되는 거 같다.

 

그리고 rootValue에 들어갈 실행될 함수나 이벤트를 작성해 준다. 나는 graph 공식 사이트에 있는 것처럼 root라는 변수를 만들어서 그걸 넣어주었다.

 

그리고 /graphql를 요청하면 graphHTTP를 실행해 schema와 rootValue에 위에서 만든 값들을 넣어준다.

 

그리고 postman이라는 로컬에서 실행해서 서버의 API데이터를 볼 수 있는 프로그램으로 실행을 해보면

이런 식으로 나오게 된다. 

body에 graphQL 방식으로 요청을 보내면 우리는 서버의 해당 페이지에 desciprion만 작성해도 data라는 객체로 값을 반환시켜 준다.

 

 

만약 포스트맨이 설치가 되어있지 않다고 하면

GraphQL-express에 내장되어 있는 GraphiQL을 사용하면 좋다.

GraphiQL은 위에서 작성한 코드에서 한 줄만 추가하면 된다.

app.use('/graphql',graphqlHTTP({
    schema : schema,
    rootValue:root,
    graphiql:true
}));

그럼 서버에 해당 URL을 들어가게 되면 GraphiQL의 화면을 볼 수 있다. 

오히려 작업할 때는 해당 화면을 보는게 더 직관적인 거 같다.

 

이번에는 간단히 GrapqhQL에 대해 알아 보았는데 다음 일지에 좀 더 다양한 정보를 공부해봐야 겠다.