Introduction to GraphQL

Transcript

1. Introduction to GraphQL Radoslav Stankov 08/10/2015

2. Radoslav Stankov @rstankov http://rstankov.com
 http://blog.rstankov.com http://github.com/rstankov

3. None
4. None
5. None
6. None
7. None
8. None
9. None
10. None
11. None

12. GET /api/posts?date=2015-10-31 { id: 1, title: "Post title", tagline: "Post

    headline", votes_count: 1, comments_count: 1, url: '/category/slug', thumbnail_url: 'assets.producthunt.com/uuid', hunter_id: 1 }
13. None
14. None

15. GET /api/users/1 { id: 1, name: 'User Name', handle: 'user_name',

    avatar_url: 'assets.producthunt.com/uuid' }

16. Rest Client Rest Server

17. Rest Client Rest Server /api/posts?date=2015-10-31

18. Rest Client Rest Server /api/posts?date=2015-10-31 /api/users/{x} (for X users)

19. Rest Client Rest Server /api/posts?date=2015-10-31 /api/users/{x} (for X users)

20. …approach 2

21. GET /api/posts?date=2015-10-31 { id: 1, title: "Post title", tagline: "Post

    headline", votes_count: 1, comments_count: 1, url: '/category/slug', thumbnail_url: 'assets.producthunt.com/uuid', hunter: { id: 1, name: 'User Name', handle: 'user_name', avatar_url: 'assets.producthunt.com/uuid' } }
22. None
23. None
24. None
25. None
26. None
27. None

28. GET /api/posts?date=2015-10-31 { id: 1, title: "Post title", tagline: "Post

    headline", votes_count: 1, comments_count: 1, url: '/category/slug', thumbnail_url: 'assets.producthunt.com/uuid', hunter: { id: 1, name: 'User Name', handle: 'user_name', avatar_url: 'assets.producthunt.com/uuid' }, makers: [{ id: 2, name: 'Second User', handle: 'second_user', avatar_url: 'assets.producthunt.com/uuid' }] }
29. None
30. None
31. None

32. GET /api/posts?date=2015-10-31 { id: 1, title: "Post title", tagline: "Post

    headline", votes_count: 1, comments_count: 1, url: '/category/slug', thumbnail_url: 'assets.producthunt.com/uuid', hunter: { id: 1, name: 'User Name', handle: 'user_name', avatar_url: 'assets.producthunt.com/uuid' }, makers: [{ id: 2, name: 'Second User', handle: 'second_user', avatar_url: 'assets.producthunt.com/uuid' }], platform: [{ name: 'iPhone', }, { name: 'Mac', }, { name: 'Web', }] }
33. None
34. None

35. …approach 3

36. None

37. Rest Client Rest Server

38. Rest Client Rest Server endpoint 1 feature 1

39. Rest Client Rest Server endpoint 1 feature 1 endpoint 2

    feature 2

40. Rest Client Rest Server endpoint 1 feature 1 endpoint 2

    feature 2 endpoint 3 feature 3

41. Rest Client Rest Server endpoint 1 feature 1 endpoint 2

    feature 2 endpoint 3 feature 3 endpoint N feature N
42. None
43. None
44. None
45. None
46. None
47. None

48. { id: 1, title: "Post title", tagline: "Post headline", votes_count:

    1, hunter: { id: 1, avatar_url: 'assets.producthunt.com/uuid' }, makers: [{ id: 2, avatar_url: 'assets.producthunt.com/uuid' }] }

49. { id title tagline votes_count hunter { id avatar_url }

    makers { id avatar_url } }
50. None

51. GET /graphql Request Body Response Body

52. 
 query { post(id: 1){ id title tagline votes_count hunter

    { id avatar_url } makers { id avatar_url } } } GET /graphql Request Body Response Body

53. 
 query { post(id: 1){ id title tagline votes_count hunter

    { id avatar_url } makers { id avatar_url } } } GET /graphql Request Body Response Body

54. 
 query { post(id: 1){ id title tagline votes_count hunter

    { id avatar_url } makers { id avatar_url } } } GET /graphql Request Body Response Body { "data": { "post": { "id": 1, "title": "title", "tagline": "tagline", "votes_count": 0, "hunter": { "id": 1, "avatar_url": "assets.producthu }, "makers": [ { "id": 1, "avatar_url": "assets.product } ] } } }

55. It’s that simple

56. 
 https://facebook.github.io/graphql


57. GraphQL is a query language created by Facebook in 2012

    which provides a common interface between the client and the server for data fetching and manipulations. The client asks for various data from the GraphQL server via queries.

58. Architecture 
 GraphQL Library
 (Per-Language)
 
 Type
 Definitions
 
 Application


    Code


59. GraphQL • Single endpoint • Not just a library •

    Application-Layer Protocol • Server agnostic • Strongly-typed • Client-specified queries • Hierarchical

60. Tries to solve • N+1 API queries • API response

    bloat • Documentation • Ad Hoc Endpoints • Structure issues

61. QueryType = GraphQL::ObjectType.define do name 'Query' description 'The query root

    for this schema' field :post do type PostType description 'The post' argument :id, types.Int, 'Post id' resolve -> (obj, args, context) do Post.find args['id'] end end end Ruby Example

62. PostType = GraphQL::ObjectType.define do name 'Post' field :id, types.Int field

    :title, types.String field :tagline, types.String field :votes_count, types.Int field :comments_count, types.Int field :thumbnail_url, types.String field :hunter do type -> { UserType } resolve -> (obj, args, context) do obj.user end end field :makers do type -> { types[UserType] } resolve -> (obj, args, context) do obj.makers end end end Ruby Example

63. Query 
 query { post(id: 1){ id title tagline votes_count

    hunter { id avatar_url } makers { id avatar_url } } } { "data": { "post": { "id": 1, "title": "title", "tagline": "tagline", "votes_count": 0, "hunter": { "id": 1, "avatar_url": "assets.producthun }, "makers": [ { "id": 1, "avatar_url": "assets.producth } ] } } }

64. Mutation 
 mutation { createUser(name: "Rado") { id } }

    { "data": { "createSpeaker": { "id": 2 } } }

65. Documentation 
 query { __schema { types { name fields

    { name type { name kind ofType { name kind } } } } } } { "data": { "__schema": { "types": [ { "name": "Query", "fields": [ { "name": "user", "type": { "name": "Non-Null", "kind": "NON_NULL", "ofType": { "name": "User", "kind": "OBJECT" } } }, { "name": "post", "type": { "name": "Non-Null", "kind": "NON_NULL", "ofType": { "name": "Post", "kind": "OBJECT" } } } ] },

66. { id hunter: { id name
 small_avatar_url: avatar_url(size: 100)
 big_avatar_url:

    avatar_url(size: 400) } } Cool tricks

67. query withFragments { user(id: 4) { friends(first: 10) { ...friendFields

    } mutualFriends(first: 10) { ...friendFields } } } fragment friendFields on User { id name profilePic(size: 50) } Cool tricks

68. 
 https://facebook.github.io/react


69. 
 https://facebook.github.io/relay


70. None

71. PostContainer = Relay.createContainer(Post, { fragments: { post: () => Relay.QL`

    fragment on Post { id title tagline votes_count } `, }, }); Relay

72. Demo

73. Issues • New, just a draft specification • Mutations are

    weird • Best practices and solutions • Large datasets
74. None

75. https://speakerdeck.com/rstankov/introduction-to-graphql

76. https://github.com/rstankov/talks-code

77. None
78. None

79. @rstankov Thanks :)

80. Questions?