1. 16 Jan 2020 @ Graphql-Korea Online-Meetup
Head First Relay & Graphql
"당근마켓 당근일자리 서비스 Relay 도입기를 소개합니다.
GraphQL 초심자의 입장에서 Relay를 도입하면서 만나게 된 여러가지 이슈들을 공유합니다."
김승욱 @beautifulife
당근마켓, Frontend Engineer
2. Head First Relay & Graphql &
2
발표자 소개
김승욱
당근마켓 / Frontend Engineer / Steve
@beautifulife
" 경영학을 전공했고, Business Developer
업무를 3년정도 경험한 후, 개발하는게 즐거워
서 프론트엔드 개발자로 전향하게 되었어요.
사용자의 경험과 가치를 중요하게 생각하고,
사용자에게 어떤 가치를 줄 수 있는지 고민하는
것을 좋아해요. "
3. Head First Relay & Graphql &
3
당근일자리?
당근마켓 내에 존재하는 웹뷰기반의 어플리케이션
- Steve의 Jobs 프로젝트
4. Head First Relay & Graphql &
4
왜 Graphql?
" 당근마켓 내에 존재하는 웹뷰기반의 어플리케이션 "
네이티브와 유사하면서 빠릿빠릿한 경험
빠른 개발 및 배포 사이클
웹 서비스로의 확장 가능성
추가. YouTube - 그래서 DECLARATIVE가 뭔데? - 원지혁님
참고. https://relay.dev/docs/en/thinking-in-graphql
5. Head First Relay & Graphql &
5
왜 Graphql?
네이티브와 유사하면서 빠릿빠릿한 경험
네트워크 횟수를 줄여야함
Rest Graphql
GET /api/job-posts - Comp)JobPosts
GET /api/job-post/user - Comp)user
GET /api/user/resume - Comp)resume
query {
jobPosts {
... jobPost
user {
... user
resume {
... resume
}
}
}
}
OR
- Over Fetching
- New EndPoint
6. Head First Relay & Graphql &
6
왜 Graphql?
빠른 개발 및 배포 사이클
서버와 클라이언트 Decoupling
Rest Graphql
GET /api/job-posts query {
jobPosts {
... jobPost
... newField
}
}
"EndPoint에 OO field좀 추가해주세요"
"EndPoint 하나만 파주세요"
"타입이 어떻게 되요?"
"JobPost type에 oo type
추가되어야 할 것 같아요"
"Schema 공유"
"Type Generation"
7. Head First Relay & Graphql &
7
왜 Graphql?
웹 서비스로의 확장 가능성
Api의 변경없이, Over Fetching없이
Mobile Web
query {
jobPosts {
... jobPostFieldsForWeb
}
}
query {
jobPosts {
... jobPostFieldsForMobile
}
}
No need for "New Endpoint & Over Fetching"
8. Head First Relay & Graphql &
8
왜 Relay?
" 유지보수성과 성능이 좋은 서비스를 빠르게! "
Declarative Data Fetching, Colocation
React와의 결합성
CompileTime에 쿼리를 계산
참고. https://relay.dev/docs/en/thinking-in-relay
— React, Relay, and GraphQL —
are powerful on their own, the combination is a UI platform that allows us to
move fast and ship high-quality apps at scale.
9. Head First Relay & Graphql &
9
Relay로 개발을 하신다면...
1. Graphql 서버로 하자고 설득
만약 안된다면 ?
(YouTube - Code Generator 와 TypeScript 로 멋지게 API 응답 처리하기 - 원지혁 님)
: 'Good'
2. Graphql Schema 정의
3. Relay 기본환경 세팅 - relay-runtime, relay-compiler, graphql, etc
4. Query 가 뭐지?, Mutation이 뭐지?
5. Fragment가 뭐지? 기타 등등 뭐지?
6. !왜 데이터가 안들어오지? -> Data Masking?
7. Pagination 어떻게 하지? -> Connection?
8. !왜 Store에 Mutation이 반영이 안되지?
9. !자동으로 Cache 관리가 된다고 했는데, 왜 계속 네트워크를 호출하지?
10. 네트워크 정책(Fetch-Policy)을 어떻게 활용하지?
10. Head First Relay & Graphql &
10
저는 이건 해결되었어요
1. Graphql 서버로 하자고 설득
만약 안된다면 ?
(YouTube - Code Generator 와 TypeScript 로 멋지게 API 응답 처리하기 - 원지혁 님)
: 'Good'
2. Graphql Schema 정의
3. Relay 기본환경 세팅 - relay-runtime, relay-compiler, graphql, etc
4. Query 가 뭐지?, Mutation이 뭐지?
5. Fragment가 뭐지? 기타 등등 뭐지?
6. !왜 데이터가 안들어오지? -> Data Masking?
7. Pagination 어떻게 하지? -> Connection?
8. !왜 Store에 Mutation이 반영이 안되지?
9. !자동으로 Cache 관리가 된다고 했는데, 왜 계속 네트워크를 호출하지?
10. 네트워크 정책(Fetch-Policy)을 어떻게 활용하지?
11. Head First Relay & Graphql &
11
그래서 이걸 공유 드리려고 해요
1. Graphql 서버로 하자고 설득
만약 안된다면 ?
(YouTube - Code Generator 와 TypeScript 로 멋지게 API 응답 처리하기 - 원지혁 님)
: 'Good'
2. Graphql Schema 정의
3. Relay 기본환경 세팅 - relay-runtime, relay-compiler, graphql, etc
4. Query 가 뭐지?, Mutation이 뭐지?
5. Fragment가 뭐지? 기타 등등 뭐지?
6. !왜 데이터가 안들어오지? -> Data Masking?
7. Pagination 어떻게 하지? -> Connection?
8. !왜 Store에 Mutation이 반영이 안되지?
9. !자동으로 Cache 관리가 된다고 했는데, 왜 계속 네트워크를 호출하지?
10. 네트워크 정책(Fetch-Policy)을 어떻게 활용하지?
12. Head First Relay & Graphql &
12
정리해보면
1. Query, Mutation
Query -> Data를 가져옴 (Rest get)
Mutation -> Data를 변경함 (Rest post, put, delete)
2. Fragment -> Data를 선언하는 단위, Query에 사용됨
3. Data Masking -> 해당 data가 정의된 component에서만 조회가 가능하도록 하여 계층
간 의존성이 생기지 않도록함
4. Pagination & Connection -> cursor를 기반으로 데이터 slicing and paginating이 가
능하도록함, Uniquely Identify
5. Store Updater & optimisticUpdater -> Relay Store를 Update함 &
optimisticUpdate를 통해 사용성을 개선함 (좋아요).
6. Cache & Garbage Collection -> 정규화된 형태로 데이터를 저장하고, 메모리관리 규칙
에 따라 불필요한 데이터를 삭제함
7. Fetch-Policy -> 캐시 데이터 사용 or 네트워크 사용을 정함
13. Head First Relay & Graphql &
13
Demo
Demo Todo Application을 통해서 Relay 개발흐름과, 제가 겪었던 이슈들을 간접체험 해볼거에요.
1. Query, Mutation
2. Fragment
3. Data Masking
4. Pagination & Connection
5. Store Updater & optimisticUpdater
6. Cache & Garbage Collection
7. Fetch-Policy
https://github.com/beautifulife/beautifulife-relay-app-example
" beautifulife-relay-app-example "
14. Head First Relay & Graphql &
14
One More Thing...
" 우리에게 익숙한.. 그리고 편하게 사용하고 있는 기술도
처음엔 누군가의 삽질을 통해 성장해 왔다. "
15. Head First Relay & Graphql &
15
감사합니다.
16 Jan 2020 @ Graphql-Korea Online-Meetup
김승욱 @beautifulife
당근마켓, Frontend Engineer
