5. Schema 확장시키기(2)

잘따라오고 계신가요 ㅎㅎ

 

그럼 이제 조오금 더 복잡한 쿼리를 만들어 보도록 하겠습니다 :)

 

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

type Query{
    people: [Person]!
    person(id: Int!): Person
}

 

쿼리에서 people을 요청하면 Person의 배열을 받게 될껍니다.

그리고 특정한 id를 주면서 person을 요청하면 Person을 주게 됩니다.

 

이때는 !를 붙이지 않았는데 해당 id를 못찾을 수도 있기 때문에 필수요소에서 제거해주었습니다!

 

Person의 배열을 받아야 하므로 저장될 데이터가 많아지게 되겠죠.

데이터를 효율적으로 관리하기 위해 db.js 의 파일에 데이터들을 분리시켜 줍니다.

export const people = [
    {
        id: 0,
        name: "Sso",
        age: 20,
        gender: "female"
    },
    {
        id: 1,
        name: "Jung",
        age: 22,
        gender: "female"
    },
    {
        id: 2,
        name: "Moon",
        age: 25,
        gender: "male"
    },
    {
        id: 3,
        name: "Choi",
        age: 30,
        gender: "male"
    }
];

export const getById = id => {
    const filteredPeople = people.filter(person => person.id === id);
    return filteredPeople[0]
}

 

밑에는 왠 함수냐 라고 생각하실 수 있는데

쿼리에서 특정 id를 주어야 해당 person에 대한 데이터를 넘겨줄 수 있죠!

그러므로 id를 주면 해당 person을 찾는 함수를 정의해 준 것입니다 ㅎㅎ

여기서 쓰인 filter라는 함수가 디비를 돌면서 id에 맞는 person을 찾아줍니다.

 

import {people, getById} from './db';

const resolvers = {
    Query: {
        people:() => people,
        person:() => getById()
    }
};

export default resolvers;

 

마지막으로 resolvers.js 파일을 알맞게 수정해봅시다.

 

분리해준 people과 getById함수를 import하고

people을 요청하면 people을, id와 함께 person을 요청하면 해당 id의 person을 return 받도록 설계합니다.

 

 

뭔가 파일이 많아져서 동작들이 헷갈릴 수도 있으니 정리를 해봅시다!

파일이 열려있는 창 순서대로

GraphQL에 people을 요청하면(Query) > people에 맞는 resolver를 찾아(Resolvers) > db안의 people배열을 보내줍니다.

또는

GraphQL에 id를 주면서 person을 요청하면(Query) > person에 맞는 resolver를 찾아 (Resolvers) > db안의 getById를 실행시켜 원하는 person을 보내줍니다.

 

이 때 id를 어떻게 요청하고 어떻게 받아서 탐색하는지는 다음시간에 알아보도록 하겠습니다 :)