[Graph QL] GraphQL 입문하기

intro

1. 시작하기

$ npm i graphql-yoga

2. 왜 Graph QL 인가?

REST API와의 비교

내가 본 설명 중에서 가장 쉽게 설명된 GQL vs REST API : GraphQL이 뭔가요(얄팍한 코딩사전)

기존의 REST API는 url을 통해 요청(request)을 보내면 이에 대응하는 응답으로서 JSON이나 XML이 넘오오는 방식이었다. 하지만 이는 치명적인 문제가 있었다. 정해진 응답 덩어리만을 받을 수 있다는 것이다.

요청 / 응답 예시

// request
axios.get(url,params)

//response
[
    {
    "name": "unani",
    "age": 28,
    "company": "ssafy#3",
    "girlfriend": false
        ...
    },
    {...},
    {...},
     ...
]

REST API 응답의 결과물은 json에서 어떠한 인자를 받을 것인지에 대한 선택권이 없다.
예를 들어 이름만 따오고 싶은데 JSON으로 넘어오는 전체 데이터를 응답으로 받아야만 하기 때문이다.
요청 응답을 데이터라 생각하고 데이터를 돈이라 생각한다면 필요 없는 정보까지 다 받아오는 것은 낭비라 할 수 있다.

개인적으로 장고를 활용해 REST API 서버를 만들고 이를 통해 프론트를 뷰로 구축하는 영화 커뮤니티 사이트를 만드는 프로젝트에서 REST API 서버를 담당한 경험이 있다. 이 과정에서 프론트를 담당하는 팀원과 화면 구성을 위해 필요한 정보를 논의 하는 과정 속에서 프론트가 원하는 정보만을 념겨주기 상당히 어려움을 깨달았다. 서버를 헤로쿠로 배포했었는데 버전이 6일동안 22까지 찍히곤 했다.

정말 단적으로 쉽게 말하자면 GQL은 원하는 데이터만을 요청하고 응답받을 수 있기 때문에 이러한 어려움을 상당부분 해결해준다. 그것이 내가 GQL을 배우고자 하는 이유이다.

babel config

바벨은 무엇인가요?

최신 버전의 자바스크립트 코드를 이전의 자바스크립트 코드로 변환시켜주는 트랜스파일러이다.
크로스 브라우징 이슈와 같이 호환성 문제를 해결하기 위해 사용된다.

1. babel-node 설치

$ npm i babel-node --dev

2. package.json 파일 수정
   설치가 완료된 이후에는 $ npm start 를 통해 실행할 수 있도록 package 파일을 고쳐준다.

{
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "nodemon --exec babel-node index.js"
  },
}

3. babel 환경설정 파일 생성하기

.babelrc

{
    "presets": ["env", "stage-3"]
}

바벨 프리셋 설치하기

$ npm i babel-preset-env babel-preset-stage-3 --dev

schema / resolvers

schema 란 무엇인가?

우선 schema.graphql 파일에 스키마를 정의해준다. 즉 사용자가 무엇을 할지에 대해 정의하는 과정이라 할 수 있다.
1. 데이터베이스로부터 정보를 얻어오는 것(Query)
2. 정보를 데이터베이스로 보내는 것
3. 저장된 정보를 바꾸는 것(Mutation)
따라서 GQL 서버에 어떠한 Query, Mutation들을 가졌고 타입이 무엇인지 알려주기 위한 것이 스키마 정의이다.

server에 정의하기

schema.graphql

type unani {
    name: String!,
    age: Int!,
    gender: String!
}
type Query {
    person: unani
}

index.js (서버)

import {GraphQLServer} from "graphql-yoga"

const server = new GraphQLServer({
    typeDefs: "graphql/schema.graphql", // 스키마 파일이 저장된 디렉터리
})

server.start(() => console.log("Graph QL server is running!!"))

지금까지 한 것은 사용자가 서버에 person 이라는 쿼리를 요청하면 unani라는 스키마를 지닌 데이터를 응답한다는 것을 알려준 것이다. 이제 쿼리에 맞게 구체적으로 어떤 데이터를 가져와야 하는지를 알려주는 resolver 를 알려주어야 한다.

resolvers 란 무엇인가?

사용자로부터 요청된 쿼리를 해결하기 위해 필요한 파일이다. 예를 들어 person 이라는 쿼리를 보내면 unani를 리턴할 것을 정의할 수 있다. 이는 REST API에서의 URL을 정의한 것과 같다.
resolvers 파일에서 DB, API 등 다양하게 접근할 수 있다.

resolvers.js

const unani = {
    name: "unani",
    age: 28,
    gender: "male"
}

const resolvers = {
    Query: {
        person: () => unani
    }
}

export default resolvers

graphql playground

로컬호스트 접속(localhost:4000)을 통해 우리가 날린 쿼리에 대해 서버가 제대로 응답하는 지 알 수 있다.

의도했던 대로 Person에서 내가 원하는 이름만 알고 싶은 쿼리를 날리면 이름만 정확히 응답받는 모습을 확인할 수 있다. age와 gender 역시 마찬가지로 요청을 보내면 의도된 응답을 받을 수 있다.