[GraphQL] 5장 인자 전달과 반환값 다루기

✅ 1. 인자 전달과 반환값 

GraphQL을 Node.js 환경에서 다룰 때, 가장 마주치는 개념이 바로 인자(argument) 전달과 반환값(response) 부분입니다. REST API는 URL과 Query String(쿼리 스트링), Body를 통해 데이터를 주고 받으나, GQL(GraphQL)에서는 인자와 반환값을 훨씬 직관적이고 유사하게 다룰 수 있습니다.

---

✅ 2. 프로젝트 준비

Node.js를 세팅해보겠습니다. 프로젝트 루트 폴더내에서 Apollo Server로 GraphQL을 구현한다고 가정하겠습니다.

mkdir graphql-args
cd graphql-args
npm init -y 
npm install apollo-server graphql

---

✅ 3. 스키마 정의하기 (Schema)

이제 프로젝트 루트에 schema.js를 생성해서 인자를 받는 user와 여러 인자를 받는 posts를 정의해보겠습니다.

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

const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Post {
    id: ID!
    title: String!
    content: String!
    authorId: ID!
  }

  type Query {
    # 단일 인자
    user(id: ID!): User

    # 여러 인자
    posts(authorId: ID, limit: Int, offset: Int): [Post]
  }

  input CreateUserInput {
    name: String!
    email: String!
  }

  type Mutation {
    createUser(input: CreateUserInput!): User
  }
`;

module.exports = typeDefs;

---

✅ 4. 리졸버 작성하기 (Resolvers)

다음은 인자를 args로 받아 처리해줍니다.

// resolvers.js
const users = [
  { id: "1", name: "Sally", email: "Sally@example.com" },
  { id: "2", name: "Lilly", email: "Robot@example.com" },
];

const posts = [
  {
    id: "1",
    title: "GraphQL 이란?",
    content: "GraphQL의 기초를 알아보자",
    authorId: "1",
  },
  {
    id: "2",
    title: "React Redux를 알아보자",
    content: "Redux 사용법",
    authorId: "2",
  },
  {
    id: "3",
    title: "HTTP와 HTTPS의 차이점",
    content: "HTTP와 HTTP는 어떤 차이가 있을가",
    authorId: "3",
  },
];

const resolvers = {
  Query: {
    user: (parent, args) => {
      const { id } = args;
      return users.find((u) => u.id === id);
    },
    posts: (parent, args) => {
      let result = posts;
      if (args.authorId) {
        result = result.filter((p) => p.authorId === args.authorId);
      }
      if (args.limit) {
        result = result.slice(0, args.limit);
      }
      if (args.offset) {
        result = result.slice(args.offset);
      }
      return result;
    },
  },
  Mutation: {
    createUser: (parent, { input }) => {
      const newUser = { id: String(users.length + 1), ...input };
      users.push(newUser);
      return newUser;
    },
  },
};

module.exports = resolvers;

---

✅ 5. 서버 실행하기

// index.js
const { ApolloServer } = require("apollo-server");
const typeDefs = require("./schema");
const resolvers = require("./resolvers");

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

server.listen().then(({ url }) => {
  console.log(`🚀 Server is running Port ${url}`);
});

node index.js

 

실행이 완료되면 창이 뜨고 Apollo Server가 실행됩니다. 바로 Ready to explore your graph?라는 창이 뜨는데 Query your server 버튼을 클릭합니다.

---

✅ 6. 실제 요청 예제

🚀 (1). 단일 인자 전달

query { 
  user(id: "2") {
    id 
    name 
    email
  }
}

{
  "data": {
    "user": {
      "id": "2",
      "name": "Lilly",
      "email": "Robot@example.com"
    }
  }
}

---

🚀 (2). 여러 인자 전달

query {
  posts(authorId: "1", limit: 2) {
    id
    title
  }
}

{
  "data": {
    "posts": [
      {
        "id": "1",
        "title": "GraphQL 이란?"
      }
    ]
  }
}

---

🚀 (3). Input 타입 사용 (Mutation)

mutation {
  createUser(input: { name: "k", email: "k@example.com"}) {
    id 
    name 
    email
  }
}

{
  "data": {
    "createUser": {
      "id": "3",
      "name": "k",
      "email": "k@example.com"
    }
  }
}

---

🚀 정리

• Node.js 환경에서는 Apollo Server로 GraphQL을 쉽게 구축할 수 있음
• 인자 전달은 args를 통해 접근하며, 단일 인자든 여러 인자든 자유롭게 받을 수 있음 
• input 타입을 정의하면 뮤테이션에서 여러 필드를 깔끔하게  받을 수 있음
• 반환값은 클라이언트가 원하는 형태로 선택하여 가져올 수 있으므로 API 유연성이 큼

---

 

GitHub - Koras02/graphql-b