GraphQL overview, GraphQL란 Schema (entity 및 entity간 관계설정) graphiql 이란? query + mutation sample Sample source, https://github.com/gidong-lee/graphQL_exam

1. GraphQL
A query language for your API
간단하게 알아보는
이기동.

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/

5. – Github 개발팀.
“그래서 GraphQL”

6. 이제 알아보자~

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에 따라서
입력을
조회를
수정을
삭제를
있다.
# 라임 좀 넣었습니다.

9. GraphQL Server가
할일

10. node(Schema) 정의.
node 간의 관계도 정의 해주어야 연결이 되겠죠.
연결의 힘을 발휘하기 위해선.
GraphQL은 스펙이고 language 별로 GraphQL 구현체 들이 있으니 구현도 해야겠죠.
expressGraphQL이 제일 많이 쓰는것 같고 쿵짝이 잘 맞는거 같아요.

11. GraphQL 끼워넣기. #1
GraphQL서버
외부 연동 서버
DB
POST /graphql

12. GraphQL 끼워넣기 #2
GraphQL서버
인증서버
상품서버
외부서버
기존 Rest API
내부서버
POST /graphql
DB
지양(/graphql 단일 endpoint 지향)
bypass

13. 회사와 사람
코드로 두 node(Entity)로 관계를 지어보자.
샘플을 실행시켜보려면 https://github.com/gidong-lee/graphQL_exam

14. 회사와 사람
const UserType = new GraphQLObjectType({
name: 'User', // GraphQL Object Name(필수)
fields: () => ({
id: {type: GraphQLString},
firstName: {type: GraphQLString},
age: {type: GraphQLInt},
companyId: {type: GraphQLString},
company: {
type: CompanyType,
resolve(parentValue, args) {
console.log(parentValue, args);
return axios.get(`${SERVER_DOMAIN}/companies/${parentValue.companyId}`)
.then(req => req.data);
}
}
})
});
#사람이 먼저다.
연결(user -> company)

15. 회사와 사람
const CompanyType = new GraphQLObjectType({
name: 'Company',
fields: () => ({
id: {type: GraphQLString},
name: {type: GraphQLString},
description: {type: GraphQLString},
users: {
type: new GraphQLList(UserType),
resolve(parentValue, args) {
return axios.get(`${SERVER_DOMAIN}/companies/${parentValue.id}/users`)
.then(req => req.data);
}
}
})
});
연결(company -> users)

16. RootQuery
Query(조회) 시 시작될 수 있는 node 를 지정하여야 한다.
따라서 Entity product는 RootQuery에 없으므로 user, company의 field로만 접근 할 수 있다.

17. RootQuery 지정
const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields: () => ( {
user: {
type: UserType,
args: {id: {type: GraphQLString}},
resolve(parentValue, args) {
return axios.get(`${SERVER_DOMAIN}/users/${args.id}`)
.then(req => req.data);
}
},
company: {
type: CompanyType,
args: {id: {type: GraphQLString}},
resolve(parentValue, args) {
return axios.get(`${SERVER_DOMAIN}/companies/${args.id}`)
.then(req => req.data);
}
}
})
});

18. 이제 호출해보자.
GraphiQL
작성한 Schema를 보고
Query를 작성하고
유효성을 검사하면서
테스트를 할 수 있는
good dev tool
설치버전도 있고,
서버 띄울때 함께 띄울수 있다.
샘플을 실행시켜보려면 https://github.com/gidong-lee/graphQL_exam

19. {
user(id: "23") {
id
firstName
company {
name
}
}
}
{
"data": {
"user": {
"id": "23",
"firstName": "ko",
"company": {
"name": "tomorrow"
}
}
}
}
User정보와 회사정보를 가져오는 샘플

20. {
company(id: "1") {
id
name
description
users {
id
firstName
age
}
}
}
{
"data": {
"company": {
"id": "1",
"name": "tomorrow",
"description": "111st",
"users": [
{
"id": "23",
"firstName": "ko",
"age": 20
},
{
"id": "40",
"firstName": "lee",
"age": 40
},
{
"id": "44",
"firstName": "ra",
"age": 45
}
]
}
}
}
Company정보와 users를 가져오는 샘플

21. Mutation
변경작업(추가, 수정, 삭제)
Response Type에 따라서 Query를 원하는대로 데이타를 받을 수도 있다.

22. Mutation - User 추가
const mutation = new GraphQLObjectType({
name: 'Mutation',
fields: {
addUser: {
type: UserType,
args: {
firstName: {type: new GraphQLNonNull(GraphQLString)},
age: {type: new GraphQLNonNull(GraphQLInt)},
companyId: {type: GraphQLString}
},
resolve(parentValue, {firstName, age}) {
return axios.post(`${SERVER_DOMAIN}/users`, {firstName, age})
.then(res => res.data);
}
},
deleteUser: {…},
editUser: {…}
}
})

23. mutation {
addUser(
firstName: “gu",
age: 40
) {
id
firstName
age
}
}
{
"data": {
"addUser": {
"id": "SJ0Wox-i-",
"firstName": "gu",
"age": 40
}
}
}
mutation을 이용한 유저 추가 및 생성 정보 받기

24. Mutation - User 삭제
const mutation = new GraphQLObjectType({
name: 'Mutation',
fields: {
addUser: {…},
deleteUser: {
type: UserType,
args: {
id: {type: new GraphQLNonNull(GraphQLString)}
},
resolve(parentValue, {id}) {
return axios.delete(`${SERVER_DOMAIN}/users/${id}`)
.then(res => res.data);
}
},
editUser: {…}
}
})

25. mutation {
deleteUser(
id : "SJ0Wox-i-"
) {
id
}
}
{
"data": {
"deleteUser": {
"id": null
}
}
}
mutation을 이용한 유저 삭제

26. Mutation - User 수정
const mutation = new GraphQLObjectType({
name: 'Mutation',
fields: {
addUser: {…},
deleteUser: {…},
editUser: {
type: UserType,
args: {
id: {type: new GraphQLNonNull(GraphQLString)},
firstName: {type: GraphQLString},
age: {type: GraphQLInt},
companyId: {type: GraphQLString}
},
resolve(parentValue, args) {
return axios.patch(`${SERVER_DOMAIN}/users/${args.id}`, args)
.then(res => res.data);
}
}
}
})

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)

30. FIN