blog - apollo server configuration

Blog 프로젝트에서는 graphql을 이용해 backend를 구축하기로 결정했고, 구체적으로는 apollo에서 지원하는 apollo-server를 이용하였다. 기존의 axios 등을 활용하는 restful API 방식에서는 요청을 보낼 때마다 원하는 request 헤더를 자유롭게 실어줄 수 있었는데, graphql을 이용할 때는 request header(특히 authorization)을 어떻게 설정해 주어야 할 지가 server configuration에 있어서 가장 큰 관심사였고, 열심히 구글링을 통해 학습한 결과 아래와 같은 코드를 작성할 수 있었다.

const server = new ApolloServer({
    typeDefs,
    resolvers,
    context: async ({ req, res }) => {
        let authToken = null;
        let currentUser = null;

        try {
            authToken = req.headers[HEADER_NAME];
            if(authToken) {
                currentUser = await decodeToken(authToken); //jwt 토큰을 decode하는 함수
            }
        } catch (e) {
            console.warn(e)
        }

        return {
            authToken,
            currentUser,
            res
        }
    },
    cors : {
        exposedHeaders : 'page_num'
    }
});

server.listen().then(() => console.log('graphql server running'));

Apollo server 설정을 할때 사용한 옵션은 다음과 같다.

1. typeDefs

graphql query 및 mutation의 schema definition에 관한 정보

2. resolvers

typeDef에서 정의한 query 및 mutation의 실제 구현

3. context

인증과 같은 전처리가 필요할 때 사용하는 객체. 헤더에 원하는 값을 실어줄 수 있고, middleware와 같은 개념이라고 생각하면 될 것 같다.

4. cors

cors 관련 설정. 여기서는 postList 페이지에서 pagination 기능을 위해 page_num이라는 custom header를 명시적으로 expose 해주도록 설정했다.