QraphQL과 ApolloServer로 CRUD해보기

KIP·2022년 6월 14일

graphQL

graphQL은 보통 REST API와 많이 비교되는데, 그 특징이 명확하고, 장/단점이 존재한다. 벡엔드와의 REST API를 통해 작업을 해본 경험을 가지고, graphQL을 배우니 확실히 체감은 된다.

graphQL의 자세한 설명은
https://graphcms.com/blog/graphql-vs-rest-apis 참고.

바로 실습을 해보겠다.

nodemon으로 테스트를 했고, 필요한 라이브러를 install

npm i apollo-server, graphql

여기서 github(https://github.com/apollographql/apollo-server)를 들어가면
예제가 있다.

내가 사용하는 ApolloServer는 typeDefs, resolvers, playground를 인자로 받는다.

typeDefs는 쿼리의 형태를 정의하고,
resolver,는 쿼리에 해당하는 데이터를 가져오는 (CRUD의 기능)로직을 정의한다.
playground는 작성한 쿼리를 테스트 하는 클라이언트.

우선 dataSource부터 가상으로 만들어보자.
방금 롤을 하고와서 일단 롤 챔피언으로 데이터를 넣겠다.
(문득 크롤링을 하고싶다..)

Dummy data(데이터 생성)

~~챔피언 영어이름은 잘 모르겠다;~~

dataSource.js

const lolChamp= [
    {
        name: "zed",
        position: 'mid',
        tier: 1
    },
    {
        name: "rumble",
        position: 'top',
        tier: 2
    },{
        name: "warwick",
        position: 'jungle',
        tier: 1
    },{
        name: "garen",
        position: 'top',
        tier: 3
    }]

    module.exports = lolChamp

typeDefs(타입 정의)

index.js

const typeDefs = gql`
    type Query{
        lol: [champion]
    }
    type champion {
        name: String
        position: String
        tier: Int
    }
    `


2개의 타입이 있다. 쉽게 생각하면 
Team이라는 객체를 teams라는 배열에 넣는다. ([{},{}..])의 구조라고 생각

resolvers(로직)

const lolChamp = require('./dataSource')

...

const resolvers = {
    Query:{
        lol: () => lolChamp
    
    }
}

lol은 내가 위에서 정의한 객체, return값으로 lolChamp를 반환받는다.

playGround(클라쪽 테스터)

이런식의 결과가 도출된다.

REST API로하면 get method가 되겠다.

++
하는김에 간단히 create도 해보자.

Query대신 Mutation을 사용하라고 했으니.. (사용한지 얼마되지 않아 디테일한 부분은 나중에 다시 다루겠다.)

create newData

typedef

 type Mutation{
        createChampion(
            name:String,
            position:String,
            tier: Int,
        ): champion
    }

resolver

  Mutation:{
        createChampion: (parent,args,context,info) => {
            console.log(args)
            lolChamp.push(args)
            return args
        }
    }