GraphQL Basics

This presentation tries to answer the following questions:

- What is GraphQL?
- Why are people so excited about GraphQL?
- How can GraphQL make my life better?

Transcript

1. GraphQL Basics Radoslav Stankov 23/03/2017
2. Radoslav Stankov @rstankov http://rstankov.com http://github.com/rstankov
7. GET /api/posts?date=2017-03-23 { id: 1, title: "Post title", tagline: "Post headline", votesCount: 1, commentsCount: 1, slug: "slug", thumbnail_url: "assets.producthunt.com/uuid", topicIds: [1, 2, 3] }
9. GET /api/topics/1 { id: 1, name: 'Web', slug: 'web', }
10. Rest Client Rest Server
11. /api/posts?date=2017-03-23 Rest Client Rest Server
12. /api/posts?date=2017-03-23 /api/topics/{x} (for X users) Rest Client Rest Server
13. /api/posts?date=2017-03-23 /api/topics/{x} (for X users) Rest Client Rest Server
14. GET /api/posts?date=2017-03-23 { id: 1, title: "Post title", tagline: "Post headline", votesCount: 1, commentsCount: 1, slug: "slug", thumbnailUrl: "assets.producthunt.com/uuid", topicIds: [1, 2, 3] }
15. GET /api/posts?date=2017-03-23 { id: 1, title: "Post title", tagline: "Post headline", votesCount: 1, commentsCount: 1, slug: "slug", thumbnailUrl: "assets.producthunt.com/uuid", topics: [ { id: 1, name: 'Topic 1', slug: 'topic1' }, { id: 2, name: 'Topic 2', slug: 'topic2' }, { id: 3, name: 'Topic 3', slug: 'topic3' }, ] }
21. GET /api/posts?date=2017-03-23 { id: 1, title: "Post title", tagline: "Post headline", votesCount: 1, commentsCount: 1, slug: "slug", thumbnailUrl: "assets.producthunt.com/uuid", topics: [ { id: 1, name: 'Topic 1', slug: 'topic1' }, { id: 2, name: 'Topic 2', slug: 'topic2' }, { id: 3, name: 'Topic 3', slug: 'topic3' }, ], }
22. GET /api/posts?date=2017-03-23 { id: 1, title: "Post title", tagline: "Post headline", votesCount: 1, commentsCount: 1, slug: "slug", thumbnailUrl: "assets.producthunt.com/uuid", topics: [ { id: 1, name: 'Topic 1', slug: 'topic1' }, { id: 2, name: 'Topic 2', slug: 'topic2' }, { id: 3, name: 'Topic 3', slug: 'topic3' }, ],
 hunter: { id: 1, name: "User Name", handle: "username", avatarUrl: "assets.producthunt.com/uuid" } }
24. GET /api/posts?date=2017-03-23 { id: 1, title: "Post title", tagline: "Post headline", votesCount: 1, commentsCount: 1, slug: "slug", thumbnailUrl: "assets.producthunt.com/uuid", topics: [ { id: 1, name: 'Topic 1', slug: 'topic1' }, { id: 2, name: 'Topic 2', slug: 'topic2' }, { id: 3, name: 'Topic 3', slug: 'topic3' }, ],
 hunter: { id: 1, name: "User Name", handle: "username', avatarUrl: "assets.producthunt.com/uuid" }, status: "featured", exclusive: null,

27. …approach 3
29. Rest Client Rest Server
30. Rest Client Rest Server endpoint 1 feature 1
31. Rest Client Rest Server endpoint 2 feature 2 endpoint 1 feature 1
32. Rest Client Rest Server endpoint 2 feature 2 endpoint 3 feature 3 endpoint 1 feature 1
33. Rest Client Rest Server endpoint 2 feature 2 endpoint 3 feature 3 endpoint N feature N endpoint 1 feature 1
41. { id: 1, title: "Post title", tagline: "Post headline", votesCount: 1, commentsCount: 1, thumbnailUrl: "assets.producthunt.com/uuid",
 hunter: { id: 1, name: "User Name", handle: "username', avatarUrl: "assets.producthunt.com/uuid" } }
42. { id title tagline votesCount commentsCount thumbnailUrl
 hunter: { id name handle avatarUrl } }
43. { id title tagline votesCount commentsCount thumbnailUrl
 hunter: { id avatarUrl } }
45. GET /graphql Request Body Response Body
46. 
 query { post(id: 1) { id title tagline votesCount commentsCount thumbnailUrl
 hunter: { id avatarUrl } } } GET /graphql Request Body Response Body
47. 
 query { post(id: 1) { id title tagline votesCount commentsCount thumbnailUrl
 hunter: { id avatarUrl } } } GET /graphql Request Body Response Body
48. 
 query { post(id: 1) { id title tagline votesCount commentsCount thumbnailUrl
 hunter: { id avatarUrl } } } GET /graphql Request Body Response Body { "data": { "post": { "id": 1, "title": "title", "tagline": "tagline", "votesCount": 0, "commentsCount": 0,
 "thumbnailUrl": "assets.producthu "hunter": { "id": 1, "avatarUrl": "assets.producthun } } } }
50. 
 https://facebook.github.io/graphql

51. 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.
52. Architecture GraphQL Library
 (Per-Language) Type
 Definitions Application
 Code
53. GraphQL • Single endpoint • Not just a library • Application-Layer Protocol • Server agnostic • Strongly-typed • Client-specified queries • Hierarchical
54. Tries to solve • N+1 API queries • API response bloat • Documentation • Ad Hoc Endpoints • Structure issues
55. Architecture GraphQL Library
 (Per-Language) Type
 Definitions Application
 Code
56. Code var PostType = new GraphQLObjectType({ name: "Post",
 description: "Post record", fields: function() { return { id: { type: GraphQLID, }, user: { type: UserType, description: "Creator of the post", resolve: function(post) { return data.users.find(post.user_id); } }, }; } });
57. Code var [TYPE] = new GraphQLObjectType({ name: [NAME],
 description: [DESCRIPTION], fields: function() { return { [FIELD_NAME]: { description: [DESCRIPTION], deprecation: [DEPRECATION MARKER], type: [TYPE],
 args: [LIST OF FIELD ARGUMENTS],
 resolve: [FUNCTION] }, } } });
58. Code var RootQueryType = new GraphQLObjectType({ name: 'RootQueryType', fields: { post: { type: PostType, description: 'Find post by id', args: { id: { description: 'Post id' type: new GraphQLNonNull(GraphQLInt) } }, resolve: function(_, params) { return data.posts.find(params.id); } }, });
59. Query 
 query { post(id: 1){ id title tagline votesCount hunter { id avatarUrl } makers { id avatarUrl } } } { "data": { "post": { "id": 1, "title": "title", "tagline": "tagline", "votesCount": 0, "hunter": { "id": 1, "avatarUrl": "assets.producthunt }, "makers": [ { "id": 1, "avatarUrl": "assets.producthu } ] } } }
60. Mutation 
 mutation { createUser(name: "Rado") { id } } { "data": { "createUser": { "id": 2 } } }
61. Code var RootMutationType = new GraphQLObjectType({ name: 'RootMutationType', fields: { createPost: { type: PostType, args: { title: { type: new GraphQLNonNull(GraphQLString) }, tagline: { type: new GraphQLNonNull(GraphQLString) }, user_id: { type: new GraphQLNonNull(GraphQLInt) }, }, resolve: function(_, params) { return data.posts.create(params); }, }, }, });
62. 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" } } } ] },
63. { id hunter: { id name
 smallAvatarUrl: avatarUrl(size: 100)
 bigAvatarUrl: avatarUrl(size: 400) } } Cool tricks
64. query withFragments { user(id: 4) { friends(first: 10) { ...friendFields } mutualFriends(first: 10) { ...friendFields } } } fragment friendFields on User { id name profilePic(size: 50) } Cool tricks
65. 
 https://github.com/graphql/graphiql

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

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

69. 
 http://www.apollodata.com/

73. PostContainer = Relay.createContainer(Post, { fragments: { post: () => Relay.QL` fragment on Post { id title tagline votes_count } `, }, }); Apollo
74. PostContainer = Relay.createContainer(Post, { fragments: { post: () => Relay.QL` fragment on Post { id title tagline votes_count } `, }, }); Apollo fragment MenuItem on Topic { name slug imageUrl }
75. PostContainer = Relay.createContainer(Post, { fragments: { post: () => Relay.QL` fragment on Post { id title tagline votes_count } `, }, }); Apollo fragment NewsletterCard on Newsletter { name slug imageUrl description }
76. PostContainer = Relay.createContainer(Post, { fragments: { post: () => Relay.QL` fragment on Post { id title tagline votes_count } `, }, }); Apollo fragment GiveawayCard on Giveway { name slug imageUrl }
77. PostContainer = Relay.createContainer(Post, { fragments: { post: () => Relay.QL` fragment on Post { id title tagline votes_count } `, }, }); Apollo fragment PostItem on Post { id title headline slug votesCount commentsCount imageUrl topics { slug name } }
78. PostContainer = Relay.createContainer(Post, { fragments: { post: () => Relay.QL` fragment on Post { id title tagline votes_count } `, }, }); Apollo
79. query Homepage($page: Int!) { mainMenu { ...MenuItem } latestNewsletter { ...NewsletterCard } latestGiveaway { ...GiveawayCard } homepagePosts(page: $page) { ...PostItem } }
81. https://speakerdeck.com/rstankov/graphql-basics
82. 
 https://graphql-europe.org/

83. Thanks !