[WebDevCurriculum] GraphQL 기본 directory 구성

Hyo Kyun Lee·2021년 11월 23일

WebDevCurriculum

목록 보기

30/44

1. 최소한의 골격을 먼저 구성

우리가 express 프레임워크를 사용할때 기본적인 directroy를 정해져있는 형태를 준수하면서 구성해야하듯, graphQL도 기본적인 골격(structure)을 먼저 구성할 필요가 있다.

2. graphql directroy

db.js / resolvers.js / schema.graphql

기본 directory는 위 3가지와 같고, 각각의 기능은 아래와 같다.

2-1. db.js

database, graphql에서 활용할 함수의 작동(logic)을 정의한다.

database를 하드코딩할 경우, 아래와 같은 기본적인 db.js 구성을 해줄 수 있다.

let userDB = [
    {
        index: 1,
        ID: "hyokyun",
        PW: "HI"
    },
    {
        index: 2,
        ID: "chulsoo",
        PW: "HELLO"
    },
    {
        index: 3,
        ID: "minsoo",
        PW: "NICE"
    }
]

module.exports = {
    userDB,
    
    getAllUserInfor: () => {
        return userDB;
    },

    getUserInfor: (ID) => {
        const filteredDB = userDB.filter((list) => ID === list.ID);
        console.log(filteredDB);
        return filteredDB[0];
    }
}

graphQL에서 활용할 Query문은 단순히 이 함수를 호출하기 위함이고, 이 호출 Query문은 resolvers와 schema에서 모두 정의해주어야 한다.
위의 경우 filteredDB[0](본 logic이 최종적으로 반환해주는 값)의 형태가 객체(Iterable)이므로, 이에 유의하면서 resolvers와 schema를 작성해주도록 한다.

2-2. resolvers.js

GraphQL에서 활용할 함수와 이를 호출하기 위한 Query문을 정의한다.

위 db.js에서 함수의 동작을 구성하고,

resovler.js에서 어떻게 호출할 것인지
별도의 인자를 전달할 것인지 등

에 대해 정의해준다.

const {getAllUserInfor, getUserInfor} = require('./db.js'); 

const resolvers = {
    Query: {
        //named by resolvers => named by declared
        getAllUserInfor: () => getAllUserInfor(),
        getUserInfor: (_, {ID}) => getUserInfor(ID)
    }
}

module.exports = resolvers;

실질적인 Query문은 resolvers = {} 에서 작성한다.
위와 같이, 함수를 어떤 Query문으로 호출할 것인지나 어떠한 인자를 전달하고 어떤 함수를 사용할 것인지 등에 대해 작성한다.

2-3. schem.graphql

resolvers에서 정의한 query문의 type(인자, 전체적인 구조 등)을 정의한다.

resolvers에서 정의한대로 함수를 호출하고자 할 경우엔, schema에서 호출/반환자에 대한 모델링을 반드시 해주어야 한다.

type userInfor {
    index: Int!
    ID: String!
    PW: String!
}
#
filtered한 형태는 iterable(객체)형태이므로 이를 type Query에 반영한다.
#
type Query {
    getAllUserInfor: [userInfor]!
    getUserInfor(ID: String!): userInfor!
}

※ ! : 필수항목, 공백을 허용하지 않는 값을 나타낸다.

위에서 정의한 getUserInfor의 반환 형태는 객체형태로, 이에 부합하도록 반환 형태를 객체로 작성한다.
전달인자가 있는 Query의 경우, 해당 변수 및 형태를 모두 정의해주어야 한다.
반환형태인 userInfor(userDB에 저장되어있는 ID, PW, index 값)도 마찬가지로 별도의 type으로 정의해주어야 한다.

3. graphql 동작확인

graphql이 동작하는 localhost의 PORT는 4000이다.

위에서 정의한 resolvers, schema 등을 활용하면 graphql server를 생성할 수 있다.

//graphQL modules
const {GraphQLServer} = require('graphql-yoga');
const resolvers = require('./graphql/resolvers.js');

const server = new GraphQLServer({
    typeDefs: "graphql/schema.graphql",
    resolvers
})

server.start(()=>console.log("GRAPHQL SERVER RUNNING ON 4000"));