GraphQL API 서버 만들기 실습

REST API가 아닌 다른방식으로 데이터를 가져올 수 있다

그것은 페이스북에서 개발하고 사용하는 GraphQL이다 

 

이 방법은 URL이 필요없으며, 당연히 Parameter도 필요없다

그말 즉슨, form-data와 body-parse하는 모든 과정들이 필요가 없어진다 

 

이 하나만으로도 엄청난 장점일 수밖에 없다

 

이전 페이지에서 셋팅법을 소개 하였고 그 것을 조금 따라해본다면 쉽게 결과물을 가져올 준비가 되었을 것이다

 

 

스키마 정의 즉 데이터 가져올 타입과 데이터의 일부분만 가져올 수 있게 형식도 지정하게된다

---

// File:schema.graphql
type Person {
    id: Int!
    name: String!
    age: Int!
    gender: String!	// ! 느낌표의 의미는 필수항목의 의미이다
}                   

type Query {       
    people: [Person]!          // people은 많은 Person을 포함하고있다라는 뜻으로 배열로 묶어준다
    person(id: Int!): Person!  // person의 누구를 찾을것인지 함수와 비슷한 형식을 지정해준다
    						   // 그리고 ':' 뒤에는 리턴되는 형식이 Person이라고 지정한다
}

즉, type을 지정하여 그 객체인 Person을 불러올 때 
person(id: 1){
  name
} // 라고만 하면 id 1에 해당하는 person에 이름을 가지고 오게된다

/*
또한, 간단한 정의는 Query(질문을)를 resolve(해결하는) 함수를 만드는거라고 생각하면된다
그것은 Query라는 타입으로 질문의 타입을 정의하고 그 데이터 형식(타입)을 지정한다
지금은 type Query, type Person이라는 것이다

그리고 이 모듈은 index.js를 생성하면서 GraphQL을 생성할때 Query와 resolvers를 같이 맵핑하여
서버를 구축하게된다
*/

---

 

이렇게 스키마 정의를 하고 데이터를 어떻게 받을지 어떻게 가공할지에 대한 형식을 정해

우리는 데이터 받을때 형식과 폼을 맞추지 않아도 된다는 것이다

 

그럼 두 번째로는 이 형식에 맞게 데이터를 조작할 함수를 생성한다

 

---

// File: resolvers.js
import { people, getById } from './db';
const resolvers = {
    Query: {
        people: () => people, 
        person: (_, { id }) => getById(id) 
    }                           
}

export default resolvers;

// 이 resolvers 파일은 schem에 정의되어있는 형식과 타입에 맞춰 우리는 쿼리를 사용할 수 있다

---

 

이렇게 만들어진 두개의 파일은 API서버를 생성할때

아래와 같이 정의하여 생성하게된다

 

---

// File: index.js

import { GraphQLServer } from "graphql-yoga";
import resolvers from "./graphql/resolvers"

const server = new GraphQLServer({
    typeDefs: "graphql/schema.graphql", // 스키마정의가 되어있는 곳을 Defs로 둔다
    resolvers   		// 결과 값을 실행할곳을 성정한다 단지 이 4줄로 끝이다
});

server.start(() => console.log("Graphql server Running"));

// API서버를 만들기 위해서는 위와같이 두가지사항을 정의한다
// 정의되는 사항은 파일경로 import 해온 정보들을 저장한다

---

 

그리고 데이터를 정의하여 연습을 진행하자

 

---

// File: db.js
export const people = [
    {   
        id: 0,
        name: "Jisu",
        age: 18,
        gender: "female"
    },
    {
        id: 1,
        name: "Deal",
        age: 18,
        gender: "female"
    },
    {
        id: 2,
        name: "JD",
        age: 18,
        gender: "male"
    },
    {
        id: 3,
        name: "Japan Guy",
        age: 18,
        gender: "male"
    },
    {
        id: 4,
        name: "Nicolas",
        age: 18,
        gender: "female"
    },
];

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

// db에 우선에서 getById를 함수를 만들어서 데이터를 가공을 한다
// 그 결과를 리턴값으로 돌려준다
// 그 값을 받는 곳은 getById()를 사용하는 곳이다

 

---

 

db에 간단한 getById 함수를 선언하여 해당하는 id를 사용하는 사용자정보를 구해올 수 있게 한다

 

아래의 사진은 http://localhost:4000/으로 어떻게 데이터가 오는지 확인할 수 있다

 

 

Graph API 활용

 

 

이렇게 기본기를 만들어 보았다

앞으로 무비앱을 만들기위한 기본 토대가 될것이다