[카테고리:] coding

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

1. 쿼리(Query) 작성하기

쿼리란 무엇인가?

GraphQL에서 쿼리는 서버로부터 데이터를 요청하는 작업을 의미합니다. 예를 들어, REST API에서 데이터를 가져오는 GET 요청과 비슷한 개념이에요. GraphQL 쿼리의 가장 큰 장점은 필요한 데이터만 정확하게 요청할 수 있다는 것입니다.

기본 쿼리 예제

사용자 정보를 요청하는 쿼리를 예시로 들어볼게요. 이 예시는 사용자의 name과 email 정보를 가져오는 쿼리입니다.

query {
  user(id: 1) {
    name
    email
  }
}

이 쿼리는 서버에 id가 1인 사용자의 name과 email을 요청하는 것입니다. 서버는 요청한 정보만 정확하게 반환합니다.

중첩 쿼리(Nested Query)

GraphQL에서는 데이터를 중첩해서 요청할 수도 있습니다. 예를 들어, 사용자의 정보와 그 사용자가 쓴 게시물의 정보를 한 번에 요청할 수 있어요.

query {
  user(id: 1) {
    name
    posts {
      title
      content
    }
  }
}

이 쿼리는 id가 1인 사용자의 이름(name)과 그 사용자가 쓴 게시물들의 제목(title)과 내용(content)을 한 번에 요청하는 예시입니다.

매개변수(Parameter) 사용하기

GraphQL 쿼리에서는 매개변수를 사용해 요청을 동적으로 만들 수 있습니다. 예를 들어, 특정 사용자를 요청할 때마다 다른 id를 사용할 수 있어요.

query getUser($userId: ID!) {
  user(id: $userId) {
    name
    email
  }
}

여기서 $userId는 변수로 사용됩니다. 실제 요청을 보낼 때는 이 변수를 지정해서 데이터를 요청할 수 있어요. 예를 들어, userId에 2를 넣으면, id가 2인 사용자의 정보를 받아올 수 있습니다.

2. 뮤테이션(Mutation) 작성하기

뮤테이션이란?

뮤테이션은 데이터를 서버에 추가하거나 수정, 삭제할 때 사용하는 작업입니다. REST API의 POST, PUT, DELETE와 같은 기능을 수행한다고 보시면 됩니다.

기본 뮤테이션 예제

새로운 사용자를 추가하는 뮤테이션 예제를 살펴볼게요.

mutation {
  addUser(name: "Alice", email: "[email protected]") {
    id
    name
    email
  }
}

이 뮤테이션은 새로운 사용자를 추가하고, 추가된 사용자의 id, name, email을 반환합니다. REST API의 POST 요청과 비슷한 기능을 합니다.

데이터 수정하기

이번에는 사용자의 정보를 수정하는 뮤테이션 예제입니다.

mutation {
  updateUser(id: 1, name: "Bob", email: "[email protected]") {
    id
    name
    email
  }
}

이 예시는 id가 1인 사용자의 이름과 이메일을 변경하는 작업입니다. 서버는 수정된 사용자 정보를 반환합니다.

데이터 삭제하기

마지막으로 데이터를 삭제하는 뮤테이션을 보겠습니다.

mutation {
  deleteUser(id: 1) {
    id
  }
}

이 뮤테이션은 id가 1인 사용자를 삭제하고, 삭제된 사용자의 id를 반환합니다.

3. 쿼리와 뮤테이션의 차이점 정리

• 쿼리(Query): 서버에서 데이터를 가져오는 작업입니다. 클라이언트가 필요한 데이터를 정확하게 요청할 수 있습니다.
• 뮤테이션(Mutation): 서버에서 데이터를 변경하는 작업입니다. 데이터를 추가, 수정, 삭제하는 요청을 보낼 때 사용됩니다.