GraphQL API 만들어보기 (2)

지난 시간에, graphql을 사용하여 간단한 스키마와 쿼리를 작성하였다.
작성한 것들에 조금 더 수정 보완하며 API를 만들어가보자.

resolvers.js
이전보다 조금 더 복잡한 내용을 반환하게 한다.

// 객체 형태로 반환하게 만들어보자
const Swoo = {
    name: 'swoo',
    age: 29,
    gender: 'male'
}

// person이라는 query에 대하여 Swoo 객체를 반환한다
const resolvers = {
    Query: {
        person: () => Swoo!
    }
}

export default resolvers

schema.graphql
resolver에서 반환할 데이터들의 타입 지정도 추가해준다.
Swoo라는 객체 내에서 각각의 데이터 타입을 지정해주었다.
person이라는 query에 대하여 Swoo가 반환되는 것이 required

type Swoo{
    name: String!
    age: Int!
    gender: String
}

type Query{
    person: Swoo!
}

Query 보내기
좀 더 복잡해진 스키마에 대한 쿼리는 어떻게 보내야하는지 살펴보자
지금의 경우는 person이란 쿼리 영역 내에서 Swoo 형식을 반환하게 되는데,
이 때는 하위 영역에 대한 선택권을 가져야만 제대로 된 쿼리를 보낼 수 있다.

• age만 알고 싶다고 가정해보자!

쿼리를 이렇게 보내면,

query {
  person{
    age
  }
}

이런 응답을 받을 수 있게 된다.

{
  "data": {
    "person": {
      "age": 29
    }
  }
}

REST API에 비해 한결 간단한 방식으로 원하는 데이터를 불러올 수 있게 되었다!

---

좀 더 복잡한 Query를 보내보자!

다수의 데이터를 처리해보자.
Query 부분부터 살펴본다.

scheman.graphql

type Person{
    name: String!
    age: Int!
    gender: String
}

type Query{
    people: [Person]!
    // Person 형태로 된 여러 데이터를 배열로 응답받는다 
    person(id: Int!): Person
    // 특정 Person을 찾기 위한 Query, 특정 숫자값 인자를 지정하여 해당하는 인자값을 가진 Person만 응답받는다
    // 이 경우는 해당하는 Person이 없을 수도 있으니 Person!이 아닌 Person으로 지정했다
}

db.js
Person 형식의 데이터를 지닌 people 배열을 만들어주자.

export const people = [
    {
        id: 0,
        name: 'swoo',
        age: 29,
        gender: 'male'
    },
    {
        id: 1,
        name: 'areum',
        age: 30,
        gender: 'female'
    },
    {
        id: 2,
        name: 'coooper',
        age: 26,
        gender: 'male'
    }
]
// 원하는 id 값을 가진 사람 정보만 얻고 싶을 때 사용할 함수
export const getById = id => {
    const filteredPeople = people.filter(person => id === person.id);
    return filteredPeople[0];
}

resolvers.js
database 정보를 import 하고, 어떻게 반환시켜줄지를 정하자.

import { people. getById } from './db';
const resolvers = {
    Query: {
        people: () => people,
        person: () => getById
        //이렇게 하면 getById가 생각대로 동작하지 않을 것이다!
        //해결은 아래를 참고하여 한다!
    }
}

export default resolvers

---

getById를 제대로 사용하기 위해서는 어떻게 해야할까?

=> 요청받은 id값을 제대로 처리할 수 있어야 한다!

먼저 resolvers가 어떻게 arguments를 받는지 알아보자
resolvers.js
Query의 person 부분의 인자를 각각 _와 args로 지정해주었다.
각각의 의미는 이 링크를 보면 자세히 알 수 있다.

const resolvers = {
    Query: {
        people: () => people,
        person: (_, args) => {
            console.log(args)
        }
    }
}

localhost:4000
person 쿼리에 대해서 어떤 argument를 입력하였을 경우, 어떻게 되는지 확인해보자.
요청

{
  person(id: 1) {
    name
  }
}

응답(console)

{ id: 1 }

이를 통해 GraphQL이 Resolvers를 arguments와 함께 요청하고 있다는 걸 알 수 있다!
id를 arguments로 받아 getById의 인자로 사용하는 코드를 완성하자.
resolvers.js

const resolvers = {
    Query: {
        people: () => people,
        person: (_, { id }) => getById(id)
        // destructuring을 통하여 id의 값을 가져온다
    }
}

이 상태로 query를 보내면 원하는 응답을 얻을 수 있을 것이다!
요청

{
  person(id: 1) {
    name
  }
}

응답

{
  "data": {
    "person": {
      "name": "areum"
    }
  }
}

다음 글에서는, 간단한 평점 매기기 앱에 대한 스키마를 구성해보자.