graphQL 맛을 보자👻

요즘 채용공고를 보면, 기술스택(skills)에 graphQL 이라는 키워드를 보았을 거다.
일단, graphQL 이 뭔지부터 알아보자!

graphQL

• 페이스북에서 제작한 질의어(graph query language)
• REST API 에 한계를 극복하고자 제작
• over-fetching, under-fetching 을 개선하고자 제작

  over-fetching : API 조회를 하면, 필요없는 데이터까지 가지고옴
  under-fetching : API 조회를 하면, 충분한 데이터가 없어서 다른 API를 호출하여 데이터를 조합함

• graphQL 은 통상 1개의 endpoint 만 존재 (데이터는 클라이언트에서 query 작성하여 조회)

graphQL 은 라이브러리? 프레임워크?

• NO! 😠
• graphQL 은 REST 와 같은 API 디자인에 대한 개념 및 사상이다. (REST 는 ROA 를 따른다)
• 그래서 graphQL 구현체를 사용한다.(graphql-yoga, graphql-express 등)

graphQL 이랑 기존 REST 랑 무엇이 다른가?

• endpoint
• REST 는 http method 에 따라 URI 가 존재했던 반면에, graphQL 은 post 하나만 사용(query, mutation)

graphQL 스키마, 리졸버 생성

// 스키마

type Query {
  info: String!
  feed: [Link!]!
  person: [Person!]!
}

type Mutation {
  createLink(url: String!, description: String!): Link!

  updateLink(targetId: ID!, url: String, description: String): Link

  deleteLink(targetId: ID!): LinkResult

  createPerson(userName: String, userPassword: String): Person
}

type LinkResult {
    msg: String!
}

type Link {
    id: ID!
    description: String!
    url: String!
 }

type Person {
    user_id : ID!
    user_name : String
    user_password : String
}


// resolver

const resolvers = {

    // 조회(R)
    Query: {
        info: () => `info 를 조회하다?`,
        feed: () => links,
        person: async () => {
            const result = await new Promise(((resolve, reject) => {
                const query = `SELECT * FROM person`;
                db.all(query, [], (err, rows) => {

                    if (err) {
                        console.log(err);
                        reject({err});
                        return false;
                    }

                    resolve([...rows]);
                });

            }));

            if (result.hasOwnProperty('err')) {
                return [];
            } else {
                return [...result];
            }
        }
    },

    // 생성, 변경, 삭제(CUD)
    Mutation: {
        createLink: (parent, args) => {
            const link = {
                id: `link-${idCount++}`,
                description: args.description,
                url: args.url,
            };
            links.push(link);
            return link;
        },

        updateLink: (parent, {targetId, description, url}) => {
            const targetLink = links.find(link => link.id === targetId);
            targetLink.description = description ? description : '';
            targetLink.url = url ? url : '';
            return targetLink;
        },

        deleteLink: (parent, {targetId}) => {
            const targetLinkIndex = links.findIndex(link => link.id === targetId);
            if (targetLinkIndex != -1) {
                links.splice(targetLinkIndex, 1);
                return {
                    msg: 'success'
                }
            } else {
                return {
                    msg: 'undefined'
                }
            }

        },

        createPerson: async (parent, {userName, userPassword}) => {
            // https://www.sqlitetutorial.net/sqlite-nodejs/insert/

            const result = await new Promise((resolve, reject) => {
                const query = `INSERT INTO person (user_name, user_password) VALUES (?,?)`;
                const selectQuery = `SELECT * FROM person WHERE user_id=?`;
                db.run(query, [userName, userPassword], function (err) {
                    // success 시, this 에 lastID, changes 속성이 있다.
                    if (err) {
                        console.log(`err : ${err}`);
                        reject({err});
                        return false;
                    }

                    db.get(selectQuery, [this.lastID], function (err, row) {
                        if (err) {
                            console.log(`err : ${err}`);
                            reject({err});
                            return false;
                        }

                        resolve({...row});
                    });
                });

            });

            if (result.hasOwnProperty('err')) {
                return {
                    user_id: -1,
                    user_name: 'error',
                    user_password: ''
                }
            } else {
                return {...result};
            }
        }
    },

    // Link: {
    //     id: parent => parent.id,
    //     description: parent => parent.description,
    //     url: parent => parent.url
    // }
};

• 스키마는 스칼라타입과 객체타입 필드를 정한다.
• 리졸버는 스키마가 실제 어떤동작을 하는지에 대한 처리를 담당한다.

용어정의

• Query : 읽기작업을 하는 GraphQL문을 의미한다.(R)
• field : query에 있는 값(속성)
• Mutation : 데이터 수정작업을 하는 GraphQL문을 의미한다.(CUD)
• schema : Query와 Mutation의 retrun type과 arguments type 및 custom type, custom interface, enum type 등과 input value의 default값 등을 정의한 코드를 의미한다.
• resolver : schema에서 정의된 Query와 Mutation의 구조에 맞추어 retrun type과 arguments type에 맞추어 설정한 코드를 의미한다.

예제코드

• https://github.com/katanazero86/graphql-example
• graphql-yoga 를 사용한 예제 (요가자체에 express 가 내장되어있다)