GraphQL로 rest api 감싸기

GraphQL을 사용해서 REST api를 감싸는 것도 가능하다. REST api의 결과 데이터를 GraphQL이 한번 더 핸들링 해주는 것이다.

HOW?

방법은 간단하다. 이전 시간에 실습해본 내용은 GraphQL 서버로 데이터를 요청하면 응답값으로 단순히 코드상의 데이터를 전달했다.

export let memberList = [
	..멤버 배열
]

export const getMembers = () => memberList;

그렇다면 반환하는 데이터를 fetch나 axios를 사용해서 rest api의 데이터를 가져와 반환하면 된다.

 

실습해 사용한 무료 rest api 사이트

https://gorest.co.in/

Online REST API for Testing and Prototyping | GO REST

 

코드는 다음과 같다.

//apidb.js
import fetch from 'node-fetch'
const API_URL = "https://gorest.co.in/public/v1/users"
export const getMembers = () => {
    return fetch(`${API_URL}`).then(res => res.json()).then(json => json.data);
}


//resolverAPI.js
import { getMembers } from './apidb.js';

const resolvers = {
    Query : {
        getMembers : () => getMembers()
    }
}
export default resolvers


//index.js
import { GraphQLServer } from 'graphql-yoga';
// import resolvers from './graphql/resolvers';
import resolvers from './graphql/resolversAPI.js';

const server = new GraphQLServer({
typeDefs:"graphql/schemaAPI.graphql",
resolvers
})

server.start(() => console.log("시작!"));

 

GraphQLServer의 typeDefs 는 실제 api의 반환 데이터 형식을 참고해서 아래와 같이 정의했다.

type Member{
    id : Int!
    name:String!
    email:String!
    gender:String!
    status:String!
}

type Query{
    getMembers: [Member]!
}

 

위의 무료 rest api 사이트에서는 users 말고도 posts comments todos 등 여러가지 api가 제공된다. GraphQL을 사용해서 Rest api를 감싸는 것을 통해 under fetching 문제와 over fetching 문제를 해결하는 것을 보자

 

Over Fetching 문제 해결

만약 user의 이름만 얻고 싶은 경우 위의 코드에서 따로 수정 없이

 

Under Fetching 문제 해결

만약 user 데이터와 post 데이터, comments 데이터가 필요하다면 

https://gorest.co.in/public/v1/users

https://gorest.co.in/public/v1/posts

https://gorest.co.in/public/v1/comments

이 세개의 url로 각각 요청을 날려야 할 것이다. 화면을 띄우기 위해서 3번을 요청하고 응답받아야하는 것이다. 하지만 GraphQL을 사용하면 여러 종류의 데이터를 한번에 가져올 수 있다. 쿼리만 올바르게 짠다면!

// resolver 코드
import { getMembers, getPosts, getComments } from './apidb.js';

const resolvers = {
    Query : {
        getMembers : () => getMembers(),
        getPosts : () => getPosts(),
        getComments : () => getComments(),
    }
}
export default resolvers


// apidb.js 코드
import fetch from 'node-fetch'

const API_URL = "https://gorest.co.in/public/v1/"

export const getMembers =   () => fetch(`${API_URL}users`).then(res => res.json()).then(json => json.data)
export const getPosts =     () => fetch(`${API_URL}posts`).then(res => res.json()).then(json => json.data)
export const getComments =  () => fetch(`${API_URL}comments`).then(res => res.json()).then(json => json.data)

모든 요청에 대한 데이터가 이렇게 한번에 오는 것을 확인할 수 있다. 응답값은 당연히 json 형식이며 형태는

{
    getMembers : [ member 데이터 배열 ],
    getPosts : [ post 데이터 배열 ],
    getCommnets : [ commnets 데이터 배열 ]
}

각 데이터 배열에는 요청한 항목만 오게 된다. Member는 이름만! post와 comment는 내용(body) 만!