GraphQL

graphQL์„ ์•Œ์•„๋ณด์ž

GraphQL

GraphQL์ด๋ž€

GraphQL์€ Facebook์—์„œ ๋ฐœํ‘œํ•œ API๋ฅผ ์œ„ํ•œ ์ฟผ๋ฆฌ์–ธ์–ด (query language for your API)์ด๋ฉฐ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ์šฐ๋ฆฌ๊ฐ€ ์ •์˜ํ•œ ํƒ€์ž… ์‹œ์Šคํ…œ์„ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ์ฟผ๋ฆฌ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ์„œ๋ฒ„์‚ฌ์ด๋“œ ๋Ÿฐํƒ€์ž„์ด๋‹ค. GraphQL์€ ์–ด๋–ค ํŠน์ •ํ•œ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋‚˜ ์ €์žฅ์†Œ ์—”์ง„์— ๋งค์—ฌ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ์™€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

โš”๏ธ GraphQL vs REST API

REST API๋Š” Resource ๋งˆ๋‹ค ํ•˜๋‚˜์˜ Endpoint๋ฅผ ๊ฐ€์ง€๊ณ , ๊ทธ Endpoint์—์„œ ๊ทธ Resource ์— ๋Œ€ํ•œ (๊ฑฐ์˜) ๋ชจ๋“  ๊ฒƒ์„ ๋‹ด๋‹นํ•œ๋‹ค. ๋ฐ˜๋ฉด, GraphQL์€ ๋‹จ ํ•˜๋‚˜์˜ Endpoint๋งŒ์„ ์‚ฌ์šฉํ•œ๋‹ค. ๋˜ํ•œ GraphQL API ๋Š” ์š”์ฒญํ•  ๋•Œ ์‚ฌ์šฉํ•œ Query ๋ฌธ์— ๋”ฐ๋ผ ์‘๋‹ต์˜ ๊ตฌ์กฐ๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค.

GraphQL? REST API?

๋‘˜์ค‘์— ์–ด๋–ค๊ฒƒ์„ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ?

  • GraphQL
    • ์„œ๋กœ ๋‹ค๋ฅธ ๋ชจ์–‘์˜ ๋‹ค์–‘ํ•œ ์š”์ฒญ๋“ค์— ๋Œ€ํ•ด ์‘๋‹ตํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•  ๋•Œ
    • ๋Œ€๋ถ€๋ถ„์˜ ์š”์ฒญ์ด CRUD(Create-Read-Update-Delete) ์— ํ•ด๋‹นํ•  ๋•Œ
  • REST API
    • HTTP ์™€ HTTPs ์— ์˜ํ•œ Caching ์„ ์ž˜ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ
    • File ์ „์†ก ๋“ฑ ๋‹จ์ˆœํ•œ Text ๋กœ ์ฒ˜๋ฆฌ๋˜์ง€ ์•Š๋Š” ์š”์ฒญ๋“ค์ด ์žˆ์„ ๋•Œ
    • ์š”์ฒญ์˜ ๊ตฌ์กฐ๊ฐ€ ์ •ํ•ด์ ธ ์žˆ์„ ๋•Œ

์œ„ ๋‚˜์—ด๋œ REST API์˜ ์‚ฌ์šฉํ•ด์•ผํ•  ์ด์œ ๊ฐ€ GraphQL์˜ ๋‹จ์ ์ด ๋œ๋‹ค.

Over-fetching, Under-fetching

๊ธฐ์กด ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ API๋ฅผ REST API๋กœ ๊ตฌํ˜„ํ•˜๋ฉด์„œ ๋ฌธ์ œ์ ์€ over-fetching๊ณผ Under-fetching์˜ ๋ฐœ์ƒ์ด์˜€๋Š”๋ฐ GraphQL์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

Over-fetching

GET /users

{
    "users" : [
        {
            "id" : 1,
            "name" : "cho",
            "age" : 20,
            "email" : "cho@gaeng.io"
        },
        {
            "id" : 2,
            "name" : "gaeng",
            "age" : 22,
            "email" : "gaeng@gaeng.io"
        }
    ]
}

์œ„์˜ ๋ฐ์ดํ„ฐ์—์„œ 1๋ฒˆ ์œ ์ €์˜ name๋ฐ์ดํ„ฐ์™€ age๋ฐ์ดํ„ฐ๋งŒ ํ•„์š”ํ•œ ์ƒํ™ฉ์— ์šฐ๋ฆฌ๋Š” GET /users/1๊ณผ ๊ฐ™์€ ์š”์ฒญ์œผ๋กœ ๋‚˜๋จธ์ง€ ํ•„์š”ํ•˜์ง€ ์•Š์€ ์ •๋ณด๋“ค๋„ ๋ฐ›๊ฒŒ ๋œ๋‹ค. ์ด๋กœ ์ธํ•ด ๋ฆฌ์†Œ์Šค ๋‚ญ๋น„๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ , ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๋ฒˆ ๊ฐ€๊ณตํ•ด์•ผํ•˜๋Š” ์ผ๋„ ์ƒ๊ธด๋‹ค. ์ด๋ฅผ Over-fetching์ด๋ผ ํ•˜๋Š”๋ฐ GraphQL๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

//GraphQL ์š”์ฒญ
query {
    user(id:1){
        name
        age
    }
}

// ์‘๋‹ต๊ฒฐ๊ณผ
{
    "users" : [
        {
            "name" : "cho",
            "age" : 20
        }
    ]
}

Under-fetching

ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€์—์„œ ์—ฌ๋Ÿฌ ์š”์ฒญ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ๋ฅผ Under-fetching๋ผ๊ณ  ํ•œ๋‹ค.

/user/1/
/like/
/notifications/

๋‹ค์Œ์€ GraphQL์˜ ์š”์ฒญ๊ณผ ๊ฒฐ๊ณผ์ด๋‹ค.

//GraphQL ์š”์ฒญ
query {
    user(id:1){
        name
        age
    }
    notifications{
        isRead
    }
    like{
        count
    }
}

//์‘๋‹ต๊ฒฐ๊ณผ
{
    "users" : [
        {
            "name" : "cho",
            "age" : 20
        }
    ],
    "notifications" : {
        "isRead" : true
    },
    "like" : {
        "count" : 1108
    }
}

Thanks to

์ฐธ๊ณ  : GraphQL ๊ณต์‹ํ™ˆํŽ˜์ด์ง€

์ฐธ๊ณ  : Junyoung Clare Jang - GraphQL๊ณผ RESTful API

์ฐธ๊ณ  : King Tora - GraphQL์ด๋ž€


ยฉ 2019. All rights reserved.