GraphQL typeDefs를 정의하고 Mutation resolvers로 조작하기

GraphQL

GraphQL에는 typeDefs와 resolvers가 있습니다.

 

typeDefs에는 우리가 사용할 데이터들의 자료형을 정의합니다.

resolvers에는 데이터를 변경하는 등 백엔드에 어떤 조치를 취할 때 작동할 함수를 정의합니다.

 

물론 실제 서비스를 개발할 때는 분량이 매우 많아지므로, 각각의 typeDefs들과 resolvers들을 개별적인 파일들로 분할하여 정리해 두는 것이 좋습니다.

 

typeDefs들은 다음과 같은 형식으로 작성합니다.

import { gql } from "apollo-server";

const typeDefs = gql`
    type User {
    	id: ID!
        username: String!
    }
    type Message {
    	id: ID!
        author: User!
        text: String!
    }
    type Query {
    	allMessages: [Messages!]!
        message(id: ID!): Message
    }
    type Mutation {
    	postMessage(text: String!, userId: ID!): Message!
    }
`;

 

GraphQL의 typeDefs에서 사용할 수 있는 데이터 타입으로는 ID, Int, String, Boolean, Float가 있습니다.

여기서 주목할 점은 'ID'라는 타입의 데이터가 있다는 것입니다.

ID는 고유한 식별자로, 한 테이블에서 각 레코드가 유일한 ID 값을 가질 수 있습니다.

 

여기에서 type에 느낌표( ! )를 붙이는 것은 값이 반드시 필요한 필드라는 뜻으로, non-nullable type이라고 합니다.

따라서 non-nullable type 자료형에 값을 null로 두면 에러가 발생합니다.

 

resolver 작성을 위한 기초 JavaScript 문법 복습

JavaScript에서 배열의 길이는 다음과 같이 구합니다.

변수명.length

 

배열에 새로운 값을 추가할 때는 다음과 같이 작성합니다.

변수명.push(객체명)

 

주어진 조건을 만족하는 배열의 첫 번째 요소를 구하기 위해서는 다음과 같이 작성합니다.

변수명.find((element) => { Boolean을 반환하는 함수 내용 })

 

 

Mutation resolvers 작성 시 주의점

resolvers를 구현할 때 함수에서 받는 인자들은 parent, args, context, info 순서입니다.

 

이중에서 args는 넘겨받은 인자들에 접근할 때 사용됩니다.

예를 들어서 message를 추가하는 mutation을 다음과 같이 작성할 수 있습니다.

 

context는 데이터베이스 연결이나 사용자 정보에 접근할 때 사용됩니다.

info는 현재 쿼리에 대한 정보에 접근할 때 사용합니다.

 

** 단, type resolvers에서는 첫 번째 인자가 object의 data입니다.

 

const resolvers = {
    Mutation: {
    	postMessage(_, { text, userId }) {
        	const newMessage = {
            	id: messages.length + 1,
                text,
            };
            messages.push(newMessage);
            return newMessage;
        }
    },
    User: {  // type resolvers
    	firstName({ firstName }) {  // type resolvers에서는 첫 번째 인자가 object data
        	return firstName;
        },
        fullName({ firstName, lastName }) {
        	return `${firstName} $lastName});
        },
    }
}

 

Mutation resolver를 작성할 때에는 mutation이 제대로 처리되었는지 알 수 있도록 값을 반환해 줍니다.

위의 예시 코드에서는 newMessage에 해당합니다.

 

 

GraphQL에서 Operation 작성하는 방법

Operation(작업)은 클라이언트가 서버에 보내는 요청을 말합니다.

Query, Mutation, Subscription 3가지의 종류가 있습니다.

(이중에서 Subscription은 실시간 데이터 업데이트를 위한 작업입니다. 예를 들어서 실시간으로 메시지를 주고받는 채팅 등에서 활용될 수 있습니다.)

 

예를 들어, Mutation은 다음과 같이 작성할 수 있습니다.

 

mutation UpdateUser($userId: ID!, $name: String!) {
    updateUser(id: $userID, name: $name) {
    	id
        name
    }
}

 

여기에다가 실제로 보내는 mutation과 같이 실제 변수를 넣으면 다음과 작성할 수 있습니다.

 

mutation UpdateUser($userId: ID!, $name: String!) {
    updateUser(id: "1", name: "codingterrace") {
    	id
        name
    }
}

 

또는 mutation은 그대로 두고, variables만 다음과 같이 따로 정의해서 mutation을 보낼 수도 있습니다.

 

{
    "id": 1,
    "name": codingterrace
}

 

 

작성한 Query와 Mutation 실행해 보기

 

'http://localhost:4000/'로 이동하면 GraphQL Query와 Mutation들을 직접 전송하고 응답을 확인해 볼 수 있습니다.

물론 이것은 로컬로 서버를 열었을 때의 상황이고, 외부에서 접속이 가능한 서버에서 열었을 때에는 알맞은 주소로 변경해주면 됩니다.