GraphQL Basics

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?

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

March 23, 2017
Tweet

Transcript

  1. GraphQL Basics Radoslav Stankov 23/03/2017

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

  3. None
  4. None
  5. None
  6. None
  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] }
  8. None
  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' }, ] }
  16. None
  17. None
  18. None
  19. None
  20. None
  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" } }
  23. None
  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,

  25. None
  26. None
  27. …approach 3

  28. None
  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
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  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 } }
  44. None
  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 } } } }
  49. None
  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


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


  70. None
  71. None
  72. None
  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 } }
  80. None
  81. https://speakerdeck.com/rstankov/graphql-basics

  82. 
 https://graphql-europe.org/


  83. Thanks !

  84. None