2. GraphQL?
Graph QL
SQL 비슷하다고 우선 생각하면 됨.
사전적으로 이렇게 생긴걸 Graph라고 함.
# excel chart 생각하면 안됨.
서로 관계가 있는 2개 또는 그 이상의 양의 상태값을 나타낸 도형
3. 누가 만들었지?
Facebook
2012년부터 내부적으로 사용하다 2015년 공개.
언제 만들었지?
Facebook(https://developers.facebook.com/docs/graph-api/using-graph-api)
Github(https://developer.github.com/) v4 api
- Query 해보기(GraphiQL) : https://developer.github.com/v4/explorer/
어디서 쓰고 있어?
스펙이라서 구현을 하던지 언어별로 구현체가 있으니 가져다 쓰면 됨.
http://graphql.org/code/
어떤 언어로 되어 있어?
4. Why Github using GraphQL
• 모든 Rest API를 제공하고 있지만 gw(integrators)의 요청
을 유연하게 처리하기 힘들었다.
• 때때로 response를 위해 2, 3번의 호출이 필요했다.
• 매개 변수에 대한 검증이 필요했다.
• 코드를 통해 문서를 생성하길 원했다.
• 요청 받을 Response에 대해서 요청자가 정의하길 원한다.
-> 이건 넣고 이건 빼고 할필요 없음. 요청자가 요청한 정보만 내려온다.(=overfetch 방지)
-> GraphiQL을 쓰면 schema 문서가 생성된다.
-> 매개변수에 대한 검증도 FE의 요청쿼리에 대한 validation 가능하다. eslint-plugin-graphql
-> GraphQL이 알아서 해준다.
-> GraphQL을 쓰면 신경 안써도 된다. 스키마만 업데이트 해주면 된다.
https://githubengineering.com/the-github-graphql-api/
7. Rest API vs GraphQL
Endpoint 비교
▪ 리스트 조회 : GET /api/posts
▪ 조회 : GET /api/posts/1
▪ 생성 : POST /api/posts
▪ 치환(수정) : PUT or PATCH /api/posts/1
▪ 삭제 : DELETE /api/posts/1
Rest API
▪ 조회, 생성, 수정, 삭제 : POST /graphqlGraphQL
8. 간단하게 oracle/mysql의 console에 붙어서 쿼리 날린다고 생각하자.
그러고 GraphQL 서버에서 할수 있는 쿼리의 스펙을 미리 만들어놓았다 생각
하자.
SQL에 따라서
입력을
조회를
수정을
삭제를
있다.
# 라임 좀 넣었습니다.
10. node(Schema) 정의.
node 간의 관계도 정의 해주어야 연결이 되겠죠.
연결의 힘을 발휘하기 위해선.
GraphQL은 스펙이고 language 별로 GraphQL 구현체 들이 있으니 구현도 해야겠죠.
expressGraphQL이 제일 많이 쓰는것 같고 쿵짝이 잘 맞는거 같아요.
18. 이제 호출해보자.
GraphiQL
작성한 Schema를 보고
Query를 작성하고
유효성을 검사하면서
테스트를 할 수 있는
good dev tool
설치버전도 있고,
서버 띄울때 함께 띄울수 있다.
샘플을 실행시켜보려면 https://github.com/gidong-lee/graphQL_exam
23. mutation {
addUser(
firstName: “gu",
age: 40
) {
id
firstName
age
}
}
{
"data": {
"addUser": {
"id": "SJ0Wox-i-",
"firstName": "gu",
"age": 40
}
}
}
mutation을 이용한 유저 추가 및 생성 정보 받기
27. mutation {
editUser(
id: "44",
firstName: "ra",
age: 45
) {
id
firstName
age
company {
id
name,
description
}
}
}
{
"data": {
"editUser": {
"id": "44",
"firstName": "ra",
"age": 45,
"company": {
"id": "1",
"name": "tomorrow",
"description": "111st"
}
}
}
}
mutation을 이용한 유저 수정(Patch)
28. FrontEnd Client 3총사
• Apollo client(http://dev.apollodata.com/)
- All in one
• relay(https://facebook.github.io/relay/)
- performance
• Lokka(https://github.com/kadirahq/lokka)
- Simple
29. URL
• slide 예제소스.(https://github.com/gidong-lee/graphQL_exam)
- 예제쿼리, 소스, 동작방법등 기술.
• GraphiQL(https://github.com/graphql/graphiql)
• udemy 강의 추천(https://www.udemy.com/graphql-with-react-course)
- 영어가 힘드시면 저처럼 크롬으로 강의 한글번역해서 보시면 보기 편합
니다.
- 크롬으로 강의시작 -> 자막 on(영문) -> 한글로 번역 -> 나쁘지않게 번역
됨.
• graphql query check eslint
(https://github.com/apollographql/eslint-plugin-graphql)