GraphQL Overview and Practice
0 likes102 views
GraphQL is a query language developed by Facebook as an alternative to REST APIs. It allows clients to define the structure of the data required, and exactly the data is returned from the server. Queries in GraphQL are typed and the type system ensures the client receives the expected data. Mutations in GraphQL are used to create or update data.
![!29
// GET /graphQL
query {
account(id: "1"){
username
email
firstName
lastName
friends{
firstName
userName
}
}
}
{
"data": {
"account": {
"username": "samslow",
"email": "hsseo@lfin.kr",
"firstName": "Hyeonseok",
"lastName": "Seo"
"friends": [
{
"username": "gamjaman"
},
{
"username": "kongsun"
}
]
}
}
}](https://image.slidesharecdn.com/graphqlsamslowforslideshare-190731104612/85/GraphQL-Overview-and-Practice-29-320.jpg)
![!30
// GET /graphQL
mutaion {
createAccount(
userName: "samslow"
email: "hsseo@lfin.kr"
firstName: "Hyeonseok"
lastName: "Seo"
)
}{
username
email
}
{
"data": {
"createAccount": {
"username": "samslow",
"email": "samslow@gmail.com",
"firstName": "Hyeonseok",
"lastName": "Seo",
"friends": []
}
}
}](https://image.slidesharecdn.com/graphqlsamslowforslideshare-190731104612/85/GraphQL-Overview-and-Practice-30-320.jpg)
![type Character {
name: String!
appearsIn: [Episode]!
}type Query {
hero(episode: Episode): Character
droid(id: ID!): Droid
}](https://image.slidesharecdn.com/graphqlsamslowforslideshare-190731104612/85/GraphQL-Overview-and-Practice-32-320.jpg)
GraphQL Overview and Practice
- 1. !1
- 2. !2
- 3. !3
- 4. !4
- 5. !5
- 6. !6
- 7. !7
- 8. !8
- 9. !9
- 10. !10 GraphQL is a data query language developed by Facebook as an alternate to REST and ad-hoc webservice architectures. REST ad-hoc webservice architectures ( GraphQL )
- 11. !11
- 12. !12
- 13. !13
- 14. !14
- 15. !15
- 16. !16
- 17. !17
- 18. !18
- 19. !19
- 20. !20
- 21. !21 📱 👔 📦 $ 📱 👔 📦 $
- 22. !22
- 23. !23
- 24. !24
- 25. !25
- 26. !26
- 27. !27
- 28. !28 // GET /graphQL query { account(id: "1"){ username email firstName lastName } } { "data": { "account": { "username": "samslow", "email": "hsseo@lfin.kr", "firstName": "Hyeonseok", "lastName": "Seo" } } }
- 29. !29 // GET /graphQL query { account(id: "1"){ username email firstName lastName friends{ firstName userName } } } { "data": { "account": { "username": "samslow", "email": "hsseo@lfin.kr", "firstName": "Hyeonseok", "lastName": "Seo" "friends": [ { "username": "gamjaman" }, { "username": "kongsun" } ] } } }
- 30. !30 // GET /graphQL mutaion { createAccount( userName: "samslow" email: "hsseo@lfin.kr" firstName: "Hyeonseok" lastName: "Seo" ) }{ username email } { "data": { "createAccount": { "username": "samslow", "email": "samslow@gmail.com", "firstName": "Hyeonseok", "lastName": "Seo", "friends": [] } } }
- 32. type Character { name: String! appearsIn: [Episode]! }type Query { hero(episode: Episode): Character droid(id: ID!): Droid }
- 33. !33
- 34. !34
- 35. !35 • • •
- 36. !36
- 37. !37 .. , GraphQL . REST URL Resource , GraphQL URL . Query Mutaion( ) . url Query GraphQL .
- 38. !38 • GraphQL → → API → • • → • .
- 39. !39
- 40. !40
- 41. !41 • 가장 현대적인 웹을 만들자 3편 (GraphQL)) • GraphQL 공식 홈페이지 • GraphQL을 오해하다 • when-and-why-to-use-graphql • GraphQL이 무엇인가
- 42. !42