Graphql.md


graphql

GraphQL์€ Graph Query Language๋กœ, ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“  ์ฟผ๋ฆฌ ์–ธ์–ด์ž…๋‹ˆ๋‹ค.

๐Ÿ™„ GraphQL์ด๋ž€?

GraphQL์€ sql๊ณผ ๊ฐ™์ด ์ฟผ๋ฆฌ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‘˜์€ ํ™œ์šฉ ๋ชฉ์ ์—์„œ ํฐ ์ฐจ์ด์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

SQl๊ณผ GraphQL์˜ ๋ชฉ์ 

SQL

  • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์‹œ์Šคํ…œ์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ

GraphQL

  • Web Client๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ํšจ์œจ์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๋Š”๊ฒƒ

๊ธฐ์กด์˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ๋™ ๋ฐฉ์‹์œผ๋กœ๋Š”, sql์˜ ๋ฌธ์žฅ์€ ์ฃผ๋กœ ๋ฐฑ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ž‘์„ฑํ•˜๊ณ  ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ GraphQL์˜ ๋ฌธ์žฅ์€ ์ฃผ๋กœ ํด๋ผ์ด์–ธํŠธ ์‹œ์Šคํ…œ์—์„œ ์ž‘์„ฑํ•˜๊ณ  ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

Sql Query ์˜ˆ์‹œ

SELECT plot_id, species_id, sex, weight, ROUND(weight / 1000.0, 2) FROM surveys;

GraphQL Query ์˜ˆ์‹œ

{
    hero {
        name
        friends {
            name
        }
    }
}

โœ… GraphQL์˜ ํŠน์ง•

1๏ธโƒฃ ํŠน์ • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋‚˜ ํ”Œ๋žซํผ์— ์ข…์†์ ์ด์ง€ ์•Š๋‹ค.

  • HTTP API๊ฐ€ ํŠน์ • ํ”Œ๋žซํผ์— ์ข…์†์ ์ด์ง€ ์•Š์€ ๊ฒƒ์ฒ˜๋Ÿผ GraphQL๋„ ํŠน์ • ํ”Œ๋žซํผ์— ์ข…์†์ ์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

  • ์‹ฌ์ง€์–ด ๋„คํŠธ์›Œํฌ ๋ฐฉ์‹์—๋„ ์ข…์†์ ์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

GraphQL์€ ์ฃผ๋กœ ๋„คํŠธ์›Œํฌ ๋ ˆ์ด์–ด L7์˜ HTTP POST๋ฉ”์„œ๋“œ์™€ ์›น์†Œ์ผ“ ํ”„๋กœํ† ์ฝœ์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ•„์š”์— ๋”ฐ๋ผ TCP/UDP, ์ด๋”๋„ทํ”„๋ ˆ์ž„์„ ํ™œ์šฉ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

GraphQL Pipeline

  • GraphQL Query๊ฐ€ ๋“ค์–ด์˜ค๊ฒŒ ๋˜๋ฉด Parse, Validate์™€ ๊ฐ™์€ ์ฒ˜๋ฆฌ๊ณผ์ •์„ ๊ฑฐ์นœํ›„ ๋ฐฑ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๊ตฌํ˜„ํ•œ GraphQL Resolver๋ฅผ ํ†ตํ•ด DB์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์ด๊ฒƒ์„ JSON ํ˜•ํƒœ๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

2๏ธโƒฃ REST API์˜ ๋ฌธ์ œ์  ํ•ด๊ฒฐ

GraphQL์„ ๋งŒ๋“  Facebook์˜ ๋ธ”๋กœ๊ทธ์—์„œ๋Š”

RESTful API๋กœ๋Š” ๋‹ค์–‘ํ•œ ๊ธฐ์ข…์—์„œ ํ•„์š”ํ•œ ์ •๋ณด๋“ค์„ ์ผ์ผํžˆ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ํž˜๋“ค๋‹ค.

๋ผ๊ณ  ๋งํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ •๋ณด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ธก์—์„œ ์›ํ•˜๋Š” ๋Œ€๋กœ ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๊ณ , ๋ณด๋‹ค ํŽธํ•˜๊ฒŒ ์ •๋ณด๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ํ‘œ์ค€ํ™”๋œ ์ฟผ๋ฆฌ ์–ธ์–ด๊ฐ€ ๋ฐ”๋กœ GraphQL์ž…๋‹ˆ๋‹ค.

โœ… GraphQL์˜ ๊ตฌ์กฐ

Query/Mutation

GraphQL์˜ ์š”์ฒญํ•˜๋Š” ์ฟผ๋ฆฌ๋ฌธ๊ณผ ์‘๋‹ต ๋‚ด์šฉ์˜ ๊ตฌ์กฐ๋Š” ๊ฑฐ์˜ ์ผ์น˜ํ•ฉ๋‹ˆ๋‹ค.

  • request Query

{
    hero {
        name
    }
}
  • response

{
    "data": {
        "hero": {
            "name": "R2-D2"
        }
    }
}

์Šคํ‚ค๋งˆ/ํƒ€์ž…(schema/type)

  • ์˜ค๋ธŒ์ ํŠธ ํƒ€์ž…๊ณผ ํ•„๋“œ

type Character {
    name: String!
    appearsIn: [Episode!]!
}
  • ์˜ค๋ธŒ์ ํŠธ ํƒ€์ž…: Character

  • ํ•„๋“œ: name, appearsIn

  • ์Šค์นผ๋ผ ํƒ€์ž…: String, ID, Int ๋“ฑ

  • ๋Š๋‚Œํ‘œ(!): ํ•„์ˆ˜ ๊ฐ’์„ ์˜๋ฏธ(non-nullable)

  • ๋Œ€๊ด„ํ˜ธ([,]): ๋ฐฐ์—ด์„ ์˜๋ฏธ

๋ฆฌ์กธ๋ฒ„(resolver)

GraphQL ์ฟผ๋ฆฌ๋ฌธ ํŒŒ์‹ฑ์€ ๋Œ€๋ถ€๋ถ„์˜ GrahpQL๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์ฒ˜๋ฆฌํ•˜์ง€๋งŒ, GraphQL์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ตฌ์ฒด์ ์ธ ๊ณผ์ •์€ resolver์—์„œ ๋‹ด๋‹นํ•˜๊ณ  ์ด๋ฅผ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ๊ตฌํ˜„ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

QraphQL์ฟผ๋ฆฌ์—์„œ๋Š” ๊ฐ๊ฐ์˜ ํ•„๋“œ๋งˆ๋‹ค ํ•จ์ˆ˜๊ฐ€ ํ•˜๋‚˜์”ฉ ์กด์žฌ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฐ๊ฐ์˜ ํ•จ์ˆ˜๋ฅผ ๋ฆฌ์กธ๋ฒ„(resolver)๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฆฌ์กธ๋ฒ„๋Š” ๋‹ค์Œ ํƒ€์ž…์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

๋งŒ์•ฝ ํ•„๋“œ๊ฐ€ ์Šค์นผ๋ผ ๊ฐ’์ด๋ผ๋ฉด ์‹คํ–‰์ด ์ข…๋ฃŒ๋˜์ง€๋งŒ, ํ•„๋“œ์˜ ํƒ€์ž…์ด ์Šค์นผ๋ผ ํƒ€์ž…์ด ์•„๋‹Œ ์šฐ๋ฆฌ๊ฐ€ ์ •์˜ํ•œ ํƒ€์ž…์ด๋ผ๋ฉด ํ•ด๋‹น ํƒ€์ž…์˜ ๋ฆฌ์กธ๋ฒ„๋ฅผ ํ˜ธ์ถœํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ฆฌ์กธ๋ฒ„์˜ ํ˜ธ์ถœ์€ DFS๋กœ ๊ตฌํ˜„๋˜์žˆ์„๊ฑฐ๋ผ ์ถ”์ธก๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์—์„œ Graph๋ผ๋Š” ๋‹จ์–ด๋ฅผ ์“ด ์ด์œ ๊ฐ€ ์žˆ์„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์—ฐ์‡„ ๋ฆฌ์กธ๋ฒ„ ํ˜ธ์ถœ์€ DBMS๊ฐ„์˜ ๊ด€๊ณ„์— ๋Œ€ํ•œ ์ฟผ๋ฆฌ๋ฅผ ๋งค์šฐ ์‰ฝ๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ธํŠธ๋กœ์ŠคํŽ™์…˜(introspection)

Apollo Server ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์šฉ ์›น IDEํ™”๋ฉด

๊ธฐ์กด ์„œ๋ฒ„-ํด๋ผ์ด์–ธํŠธ ํ˜‘์—… ๋ฐฉ์‹์—์„œ๋Š” API ๋ช…์„ธ์„œ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๋Š” ์ ˆ์ฐจ๊ฐ€ ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

GraphQL์—์„œ๋Š” RSETAPI ๋ช…์„ธ์„œ ๊ณต์œ ์™€ ๊ฐ™์€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ ์ธํŠธ๋กœ์ŠคํŽ™์…˜ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

GraphQL์˜ ์ธํŠธ๋กœ์ŠคํŽ™์…˜์€ ์„œ๋ฒ„ ์ž์ฒด์—‡ ํ˜„์žฌ ์„œ๋ฒ„์— ์ •์˜๋œ ์Šคํ‚ค๋งˆ์˜ ์‹ค์‹œ๊ฐ„ ์ •๋ณด๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

GraphQL ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

์ •๋ฆฌ

GrahpQL์€ ๊ธฐ์กด REST API์˜ ๋‹จ์ ์„ ๋ณด์™„ํ•˜๋Š” ์„ฑ๋Šฅ์ ์ธ ์žฅ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ RESTAPI์—์„œ๋Š” Swagger์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ API ๋ช…์„ธ์„œ๋ฅผ ๊ณต์œ ํ•˜๋Š” ๊ฒƒ์ด ์ตœ์„ ์ด์—ˆ์ง€๋งŒ GraphQL์—์„œ๋Š” ์ด๋ฅผ ์ธํŠธ๋กœ์ŠคํŽ™์…˜์œผ๋กœ ๋Œ€์ฒดํ•˜์—ฌ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๊ฐ„ ํ˜‘์—…์ด ๋” ์‰ฌ์›Œ์งˆ ๊ฒƒ์œผ๋กœ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋น„๊ต์  ํ”„๋ก ํŠธ์—”๋“œ์ชฝ์— ํ• ์ผ์ด ๋งŽ์•„์งˆ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

Last updated