2019년 11월 30일 GDG 송도 Devfest에서 발표한 내용입니다. GraphQL의 설명과 GraphQL을 서버에 적용하면서 발생한 문제들과 간단한 해결책들을 다루고 있습니다.

1. GraphQL 적용기
전창완, 데이터블

2. RESTFul API

3. RESTFul API
Method Path Body 동작
GET /users 회원 목록 읽기
GET /users/:id 회원 정보 읽기
POST /users {"email": "hi@wani.kr", .. } 회원 정보 저장
PUT/PATCH /users/:id {"email": "hi@wani.kr", .. } 회원 정보 수정
DELETE /users/:id 회원 정보 삭제

4. RESTFul API
대부분의 프레임워크가 지원, 누구나 쉽게 도입 가능
RESTFul에서 모든 모델은 CRUD로 표현
OAS(Open Api Specification) 표준 존재

5. RESTFul API 예시 - Github API
Method Path 동작
GET /user 회원 정보 읽기
GET /user/repos 사용자의 저장소 조회
POST /user/repos 저장소 만들기
DELETE /repos/:owner/:repo 저장소 삭제하기
POST /repos/:owner/:repo/transfer 저장소 이동하기
developer.github.com/v3

6. developers.facebook.com/docs/graph-api

8. 🤔

9. RESTFul API
데이터 유효성 검사
JSON Schema, JOI, Safen ...
const validator = sfl`{
username: (string & email & length_between(12, 100)) | null,
password?: string & length_between(8, 20),
areas: {
lat: number & between(-90, 90),
lng: number & between(-180, 180),
}[1:] | null,
env: {
referer: url,
ip: ip("v4"),
os: {
name: in("window", "osx", "android", "iphone"),
version: string,
},
},
}`
validator.assert({
username: "wan2land@gmail.com",
areas: [
{lat: 0, lng: 0},
],
env: {
referer: "http://wan2land.github.io",
ip: "127.0.0.1",
os: {
name: "osx",
version: "10.13.1",
},
},
}) // ok

10. RESTFul API
테스트 + 문서화 도구
Postman

11. RESTFul API
문서화(코드활용)
Swagger, APIDoc

12. GraphQL

13. “GraphQL is a query language
for APIs and a runtime for fulfilling those
queries with your existing data.”
graphql.org

14. 지원언어
graphql.org/code

15. 주요 라이브러리
서버
Apollo, GraphQL Yoga, Type GraphQL, Graphity
웹 클라이언트
apollo-client (react, vue, svelte!)
앱 클라이언트
apollo-ios, apollo-android (flutter는 공식라이브러리가 없는 듯..)

16. GraphQL 구조
Schema
데이터 구조를 정의, 서버에서 구현
Query
데이터를 읽고 쓰는 명령어, 주로 클라이언트에서 구현

17. type Query {
user(id: ID!): User
userPagination(take: Int, offset: Int): ListOfUser
}
type Mutation {
createUser(input: InputCreateUser!): User
updateUser(id: ID!, input: InputUpdateUser!): User
deleteUser(id: ID!): User
}
type ListOfUser {
count: Int
nodes: [User!]!
}
Schema
type User {
id: ID!
email: String!
friends: [User!]!
}
input InputCreateUser {
email: String!
}
input InputUpdateUser {
email: String!
}

18. type Query {
user(id: ID!): User
userPagination(take: Int, offset: Int): ListOfUser
}
type Mutation {
createUser(input: InputCreateUser!): User
updateUser(id: ID!, input: InputUpdateUser!): User
deleteUser(id: ID!): User
}
type ListOfUser {
count: Int
nodes: [User!]!
}
Schema
Name Arguments (생략가능) Return
Name Return
type User {
id: ID!
email: String!
friends: [User!]!
}
input InputCreateUser {
email: String!
}
input InputUpdateUser {
email: String!
}

19. type Query {
user(id: ID!): User
userPagination(take: Int, offset: Int): ListOfUser
}
type Mutation {
createUser(input: InputCreateUser!): User
updateUser(id: ID!, input: InputUpdateUser!): User
deleteUser(id: ID!): User
}
type ListOfUser {
count: Int
nodes: [User!]!
}
Schema
Entry Point
type User {
id: ID!
email: String!
friends: [User!]!
}
input InputCreateUser {
email: String!
}
input InputUpdateUser {
email: String!
}

20. GraphQL Types
Scalars
ID, String, Int, Float, Boolean
그외(?)
Object Type, Input Type, Enum, List, Non-Null

21. type Query {
user(id: ID!): User
userPagination(take: Int, offset: Int): ListOfUser
}
type Mutation {
createUser(input: InputCreateUser!): User
updateUser(id: ID!, input: InputUpdateUser!): User
deleteUser(id: ID!): User
}
type ListOfUser {
count: Int
nodes: [User!]!
}
Schema
type User {
id: ID!
email: String!
friends: [User!]!
}
input InputCreateUser {
email: String!
}
input InputUpdateUser {
email: String!
}
NonNull(List(NonNull(ObjectType)))
Object Type
Input Type

22. type Query {
user(id: ID!): User
userPagination(take: Int, offset: Int): ListOfUser
}
type Mutation {
createUser(input: InputCreateUser!): User
updateUser(id: ID!, input: InputUpdateUser!): User
deleteUser(id: ID!): User
}
type ListOfUser {
count: Int
nodes: [User!]!
}
Schema
type User {
id: ID!
email: String!
friends: [User!]!
}
input InputCreateUser {
email: String!
}
input InputUpdateUser {
email: String!
}
Arguments에는 Input Type + Scalar
Object Type
Return에는 Object Type + Scalar

23. Query
query GetUser($id: ID!) {
user(id: $id) {
id
email
friends {
id
email
}
}
}
mutation CreateUser($input: InputCreateUser!) {
user: createUser(input: $input) {
id
email
}
}

24. query GetUser($id: ID!) {
user(id: $id) {
id
email
friends {
id
email
}
}
}
Query
mutation CreateUser($input: InputCreateUser!) {
user: createUser(input: $input) {
id
email
}
}
Name (생략가능) Arguments
Fields

25. query GetUser($id: ID!) {
user(id: $id) {
id
email
}
}
Query
{
"data": {
"user": {
"id": "30",
"email": "wan2land@gmail.com"
}
}
}

26. query GetUser($id: ID!) {
user(id: $id) {
id
email
friends {
id
email
}
}
}
Query {
"data": {
"user": {
"id": "30",
"email": "wan2land@gmail.com",
"friends": [
{
"id": "31",
"email": "wan3land@gmail.com"
},
{
"id": "32",
"email": "wan4land@gmail.com"
}
]
}
}
}

27. GraphQL Custom Scalars
input InputCreateUser {
email: String!
name: String
}

28. GraphQL Custom Scalars
input InputCreateUser {
email: String!
name: String
}
"hi@wani.kr" O
"wan2land" O (!?)

29. GraphQL Custom Scalars
scalar Email
input InputCreateUser {
email: Email!
name: String
}
"hi@wani.kr" O
"wan2land" X

30. github.com/Urigo/graphql-scalars
GraphQL Custom Scalars
scalar DateTime
scalar EmailAddress
scalar NegativeFloat
scalar NegativeInt
scalar NonNegativeFloat
scalar NonNegativeInt
scalar NonPositiveFloat
scalar NonPositiveInt
scalar PhoneNumber
scalar PositiveFloat
scalar PositiveInt
scalar PostalCode
scalar UnsignedFloat
scalar UnsignedInt
scalar URL
scalar BigInt
scalar Long
scalar GUID
scalar HexColorCode
scalar HSL
scalar HSLA
scalar IPv4
scalar IPv6
scalar ISBN
scalar MAC
scalar Port

31. GraphQL Description
type Query {
user(id: ID!): User
"""
ex.
userPagination(take: 20, offset: 0) - 1
userPagination(take: 20, offset: 20) - 2
userPagination(take: 20, offset: 40) - 3
"""
userPagination(take: Int, offset: Int): ListOfUser
something(id: ID!): User @deprecated(reason: "use 'user' query")
}

32. GraphQL Description
type Query {
user(id: ID!): User
"""
ex.
userPagination(take: 20, offset: 0) - 1
userPagination(take: 20, offset: 20) - 2
userPagination(take: 20, offset: 40) - 3
"""
userPagination(take: Int, offset: Int): ListOfUser
something(id: ID!): User @deprecated(reason: "use 'user' query")
}

33. GraphQL Playground

34. Swagger + JSON Schema + Postman

35. iOS와 Android에서도
쉽게 사용할 수 있어요!
여긴 GDG니까 앱 개발자가 많을거야! 😤😤😤

36. (지인 앱개발자 ⽈)
RESTFul API인 경우, JSON객체를 가져와서 Kotlin/Swift 클래스에 일일이 대입하는 노가다 필요
GraphQL + Application

37. GraphQL + Application
Apollo iOS / Apollo Android

38. 1. GraphQL Schema 불러오기
2. GraphQL 쿼리 작성
3. codegen
4. 클래스가 자동생성!
GraphQL + Application

40. 남은 문제들
(키워드만 후다닥..)

41. GraphQL - N + 1
SELECT * FROM `users`
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
...
query GetUser($id: ID!) {
userPagination {
id
friends {
id
}
}
}
목록조회 1번 + 친구조회 20번 = 21번

42. GraphQL - N + 1
SELECT * FROM `users`
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
...
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
...
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
SELECT * FROM `users` WHERE `friend_id` = ?
...
query GetUser($id: ID!) {
userPagination {
id
friends {
id
friends {
id
}
}
}
}
1 + 20 + 20 x 20 = 421번

43. GraphQL - N + 1
query GetUser($id: ID!) {
userPagination {
id
friends {
id
friends {
id
friends {
id
}
}
}
}
}
????!

44. GraphQL - N + 1
SELECT * FROM `users`
SELECT * FROM `users` WHERE `friend_id` IN (?, .. )
SELECT * FROM `users` WHERE `friend_id` IN (?, .. )
SELECT * FROM `users` WHERE `friend_id` IN (?, .. )
query GetUser($id: ID!) {
userPagination {
id
friends {
id
friends {
id
friends {
id
}
}
}
}
}

45. github.com/graphql/dataloader
GraphQL - N + 1

46. GraphQL - File Upload
scalar Upload
type Mutation {
uploadAttachment(file: Upload): Attachment
}
multipart/form-data 사용

47. github.com/jaydenseric/graphql-upload
GraphQL - File Upload

48. blog.apollographql.com/tutorial-graphql-subscriptions-server-side-e51c32dc2951
GraphQL - Subscription

49. GraphQL - Subscription
type Query {
user(id: ID!): User
userPagination(take: Int, offset: Int): ListOfUser
}
type Mutation {
createUser(input: InputCreateUser!): User
updateUser(id: ID!, input: InputUpdateUser!): User
deleteUser(id: ID!): User
}
type Subscription {
onUserCreated: User
onUserUpdated(id: ID!): User
onDeleteUser(id: ID!): User
}
Event 발생시, 구독가능

50. GraphQL - Image Response
corgi.photos/300/200
Response는 application/json 로 고정, 위와 같은 image/png는 처리할 수 없음.
(비슷한 예로 엑셀 다운로드)

51. query {
user(id: 566) {
profile {
id
resize(width: 100, height: 100)
}
}
}
{
"data": {
"user": {
"profile": {
"id": "1324",
"resize": "https://
something.s3.ap-
northeast-2.amazonaws.com/
6c326d50-
c1b8-45d8-80c7-7cd9d472b84f-
w100-h100.jpg"
}
}
}
}
GraphQL - Image Response

52. 요약
GraphQL은 RESTFul API의 대체제로 충분하다.
GraphQL Custom Scalar를 활용하면 추가적인 데이터 유효성검사 라이브러리가 필요없다.
Apollo iOS / Android를 사용하면 앱에서 GraphQL을 훨씬 쉽게 사용할 수 있다.
1+N 문제는 생각보다 쉽게 해결가능하다.
GraphQL에서 파일업로드가 가능하다.
Subscription 활용을 활용하면 채팅 같은 서비스를 만들 수 있다.
이미지 Response는 URL로 사용하자.

53. Q & A
🙋