GraphQL 서버와 스키

1. GraphQL 서버 이해하기

GraphQL 서버는 클라이언트로부터 쿼리나 뮤테이션 요청을 받아 처리하는 역할을 합니다. 클라이언트는 GraphQL 서버에 필요한 데이터를 요청하고, 서버는 그 요청을 처리해서 데이터를 반환합니다.

GraphQL 서버의 역할

클라이언트의 요청을 처리하고, 필요한 데이터를 반환합니다.
**스키마(Schema)**를 정의하고, 데이터가 어떤 형태로 전달될지를 결정합니다.
서버에서는 데이터를 처리하는 **리졸버(Resolver)**를 통해 실제 데이터베이스와 연결하거나 외부 API에서 데이터를 받아올 수 있습니다.

2. GraphQL 스키마 작성하기

스키마는 GraphQL 서버에서 데이터를 어떻게 구성하고 제공할지를 정의하는 설계도입니다. 스키마는 어떤 데이터 타입이 있고, 어떤 요청(쿼리 또는 뮤테이션)을 받을 수 있는지를 설명합니다.

기본 스키마 예제

아래는 간단한 스키마 예제입니다. 사용자의 정보를 다루는 API를 만든다고 가정해 보죠.

type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
  users: [User]
}

type Mutation {
  addUser(name: String!, email: String!): User
}

type User: 사용자 정보를 정의합니다. id, name, email 필드를 가지고 있으며, 각 필드는 특정 타입을 가집니다. 예를 들어, id는 ID! 타입이며, 이 느낌표는 필수가 있음을 나타냅니다.
type Query: 데이터를 요청하는 방법을 정의합니다. 여기서는 user 쿼리로 특정 사용자(id에 따라)를 요청하거나, users 쿼리로 모든 사용자를 요청할 수 있습니다.
type Mutation: 데이터를 변경하는 방법을 정의합니다. 여기서는 addUser 뮤테이션으로 새로운 사용자를 추가하는 작업을 정의했습니다.

3. 리졸버(Resolver) 작성하기

리졸버는 클라이언트가 요청한 데이터를 실제로 가져오는 함수를 의미합니다. 클라이언트가 쿼리를 보내면, 리졸버가 데이터베이스에서 해당 데이터를 가져오거나, 다른 API에서 데이터를 받아서 반환합니다.

리졸버 예시

아래는 위의 스키마에서 정의한 user와 addUser에 대한 리졸버 예시입니다. 예를 들어, Node.js 환경에서 작성한 코드라고 생각하시면 됩니다.

const users = [
  { id: 1, name: 'John', email: '[email protected]' },
  { id: 2, name: 'Alice', email: '[email protected]' },
];

const resolvers = {
  Query: {
    user: (parent, args, context, info) => {
      return users.find(user => user.id === Number(args.id));
    },
    users: () => users,
  },
  Mutation: {
    addUser: (parent, args, context, info) => {
      const newUser = {
        id: users.length + 1,
        name: args.name,
        email: args.email
      };
      users.push(newUser);
      return newUser;
    }
  }
};

Query.user: 클라이언트가 user(id: 1) 쿼리를 보냈을 때 해당 id를 가진 사용자를 찾아 반환합니다.
Query.users: 모든 사용자의 목록을 반환합니다.
Mutation.addUser: 새로운 사용자를 추가하고, 추가된 사용자 데이터를 반환합니다.

4. GraphQL 서버 직접 실행해보기

Node.js 환경에서 GraphQL 서버 실행

GraphQL 서버를 직접 만들기 위해 Node.js 환경을 사용할 수 있습니다. 아래는 간단한 서버 설정 예시입니다.

설치: 먼저, 프로젝트 폴더를 만들고 nmp init으로 프로젝트를 초기화한 후, 필요한 패키지들을 설치합니다.

npm install express express-graphql graphql

서버 코드 작성: index.js파일을 생성하고, 다음과 같이 간단한 GraphQL 서버를 설정합니다.

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// 스키마 정의
const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    user(id: ID!): User
    users: [User]
  }

  type Mutation {
    addUser(name: String!, email: String!): User
  }
`);

// 리졸버 정의
const users = [
  { id: 1, name: 'John', email: '[email protected]' },
  { id: 2, name: 'Alice', email: '[email protected]' }
];

const root = {
  user: ({ id }) => users.find(user => user.id == id),
  users: () => users,
  addUser: ({ name, email }) => {
    const newUser = { id: users.length + 1, name, email };
    users.push(newUser);
    return newUser;
  }
};

// 서버 설정
const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true, // GraphiQL을 활성화하여 웹에서 쿼리 작성 가능
}));

app.listen(4000, () => console.log('Running a GraphQL API server at http://localhost:4000/graphql'));

서버 실행: 다음 명령어로 서버를 실행합니다.

node index.js

GraphiQL 인터페이스 사용: 브라우저에서 http://localhost:4000/graphql로 접속하면 GraphiQL이라는 인터페이스를 통해 쿼리와 뮤테이션을 직접 작성하고 테스트할 수 있습니다.

5. 마무리

이제 GraphQL 서버가 어떻게 작동하는지, 스키마와 리졸버가 무엇인지, 그리고 기본적인 서버를 설정하는 방법을 알게 되셨습니다! 이 서버를 통해 클라이언트가 데이터를 요청하고 변경할 수 있으며, 다양한 응용을 할 수 있습니다.