본문 바로가기
쿤즈 Dev/GraphQL

[GraphQL] Resolvers 알아보기(1): Query

by :)Koon 2021. 6. 22.

Apollo Server를 이용해서 GraphQL을 사용해보려 합니다. 그래서 지난 포스팅에서는 우선 GraphQL을 사용하기 위한 가장 기본적인 타입에 대해서 알아봤어요. 여러 가지 타입을 선언하고 난 이후에는 Resolvers를 선언해야 합니다.

이번 포스팅에서는 타입에서 선언한 Query를 이용해서 Resolvers를 만들어 보도록 하겠습니다.


Resolvers란 무엇인가

Resolver는 GraphQL의 여러 가지 타입 중 Query, Mutation, Subscription과 같은 타입이 실제로 일을 하는 부분이라 생각하시면 됩니다. 선언된 타입의 정의 부분이죠. 그래서 스키마를 정의하면 그 스키마 필드에 사용되는 함수의 실제 행동을 Resolver에서 정의하고 이러한 함수들이 모여 있기 때문에 Resolvers라 부릅니다.

 

Resolvers 중에서 Query 타입에 대해서 먼저 Resolvers를 만들어 보도록 하겠습니다.


Resolver 만들기

resolver를 만들기 위해서는 먼저 apollo server를 실행시켜야 합니다. 서버가 있어야 graphQL을 테스트할 수 있기 때문입니다. 서버를 만드는 방법은 아래 포스팅에서 참고해주세요.

2021.05.15 - [쿤즈 Dev/GraphQL] - [GraphQL] Apollo Server를 이용한 GraphQL 사용 방법

 

[GraphQL] Apollo Server를 이용한 GraphQL 사용 방법

Apollo Server는 Server 프로그래밍과 Client 프로그래밍 모두에 사용할 수 있는 오픈 소스 GraphQL 서버입니다. 이번 포스팅에서는 Apollo Server와 GraphQL의 간단한 소개와 사용 방법에 대해서 알아보도록 하

koonsland.tistory.com

다음과 같이 예제를 만들어 보았습니다.


소스코드 1. resolver1

const { ApolloServer, gql } = require("apollo-server");

// GraphQL schema definition
const typeDefs = gql`
    type Query {
        numberSix: Int!
        numberSeven: Int!
    }
`;

// GraphQL resolvers definition
const resolvers = {
    Query: {
        numberSix: () => {
            return 6;
        },
        numberSeven: () => {
            return 7;
        },
    },
};

// create apollo server object
const server = new ApolloServer({ typeDefs, resolvers });

// excute server
server.listen({ port: 9000 }).then(({ url }) => {
    console.log(`🚀 Server ready at ${url}`);
});

위 예제에서 중요한 부분이 바로 typeDefs의 Query와 resolvers의 Query입니다. typeDefs의 gql에서는 Query의 함수 원형과 return(반환) 값을 정의합니다. 그리고 resolvers에서는 실제 함수의 내용을 만들어 줍니다.

 

numberSix와 numberSeven Query는 parameter는 없고 리턴된 형태는 Integer 타입입니다. 이 원형을 기본으로 resolvers에서 두 함수를 정의합니다.

 

numberSix는 6을 반환하고 numberSeven은 7을 반환합니다. 한번 실행해 보겠습니다. 웹에서 실행한 서버의 포트로 접근하고 Query를 만들어줍니다.


소스코드 2. resolver2

이번에는 parameter가 있는 Query를 만들어 보겠습니다.

const { ApolloServer, gql } = require("apollo-server");

// Inmemory data
const users = [
    {
        id: "1",
        name: "Elizabeth Bennet",
    },
    {
        id: "2",
        name: "Fitzwilliam Darcy",
    },
];

// GraphQL schema definition
const typeDefs = gql`
    type User {
        id: ID!
        name: String
    }

    type Query {
        user(id: ID!): User
    }
`;

const resolvers = {
    Query: {
        user(parent, args, context, info) {
            return users.find((user) => user.id === args.id);
        },
    },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen({ port: 9000 }).then(({ url }) => {
    console.log(`🚀 Server ready at ${url}`);
});

우선 내부에서 가지고 있는 기본 데이터를 만들어 줍니다. 위 소스에서는 user라는 배열(arrays)을 만들어 2개의 데이터를 넣어주었습니다.

 

type을 정의하는 곳에서는 User 타입과 Query 타입을 정의합니다. User 타입은 id, name으로 구성되어 있으며 Query는 user라는 함수를 만들어 주었습니다. 단 parameter로 id를 받고 리턴 값으로 User 타입을 반환합니다.

 

resolvers에서는 parameter를 받아서 내부에서 같은 id 값이 있는지 확인하고 있으면 반환해야 합니다. 이때, resolvers의 기본 parameter는 4가지가 있습니다. parent, args, context, info입니다. 우선 이 포스팅에서는 args만 알고 넘어가도록 하겠습니다. 나머지 부분에 대해서는 추후 포스팅에서 다뤄볼게요.

 

args에서는 restapi와 같이 client graphql api로 던진 paramter를 받을 수 있습니다. Query type에서 id에 값을 넣어주기 때문에 받을 때도 args.id로 값을 받을 수 있습니다.

 

실행해볼게요.

parameter는 상단 query창에 바로 넣어도 되지만 api테스트를 위해서는 아래 query variables에 json object 형식으로 담아서 테스트하시는 게 더 효율적입니다.

 

1이라는 값이 있기 때문에 User 타입 형식으로 값을 반환했습니다.


이번 포스팅에서는 Query 타입을 이용해서 resolvers를 만들어 보았습니다. 아직 알아보지 않은 부분들이 있지만 기본적인 parameter들을 넘기고 받는 방법을 알아본 것입니다. 도움이 되셨으면 합니다. 이상입니다.

댓글