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. 3.
  2. 4.
  3. 5.
  4. 6.
  5. 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] }
  6. 8.
  7. 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] }
  8. 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' }, ] }
  9. 16.
  10. 17.
  11. 18.
  12. 19.
  13. 20.
  14. 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' }, ], }
  15. 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" } }
  16. 23.
  17. 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,

  18. 25.
  19. 26.
  20. 28.
  21. 32.
  22. 33.

    Rest Client Rest Server endpoint 2 feature 2 endpoint 3

    feature 3 endpoint N feature N endpoint 1 feature 1
  23. 34.
  24. 35.
  25. 36.
  26. 37.
  27. 38.
  28. 39.
  29. 40.
  30. 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" } }
  31. 44.
  32. 46.

    
 query { post(id: 1) { id title tagline votesCount

    commentsCount thumbnailUrl
 hunter: { id avatarUrl } } } GET /graphql Request Body Response Body
  33. 47.

    
 query { post(id: 1) { id title tagline votesCount

    commentsCount thumbnailUrl
 hunter: { id avatarUrl } } } GET /graphql Request Body Response Body
  34. 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 } } } }
  35. 49.
  36. 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.
  37. 53.

    GraphQL • Single endpoint • Not just a library •

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

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

    bloat • Documentation • Ad Hoc Endpoints • Structure issues
  39. 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); } }, }; } });
  40. 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] }, } } });
  41. 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); } }, });
  42. 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 } ] } } }
  43. 60.

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

    { "data": { "createUser": { "id": 2 } } }
  44. 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); }, }, }, });
  45. 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" } } } ] },
  46. 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
  47. 68.
  48. 70.
  49. 71.
  50. 72.
  51. 73.

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

    fragment on Post { id title tagline votes_count } `, }, }); Apollo
  52. 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 }
  53. 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 }
  54. 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 }
  55. 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 } }
  56. 78.

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

    fragment on Post { id title tagline votes_count } `, }, }); Apollo
  57. 79.

    query Homepage($page: Int!) { mainMenu { ...MenuItem } latestNewsletter {

    ...NewsletterCard } latestGiveaway { ...GiveawayCard } homepagePosts(page: $page) { ...PostItem } }
  58. 80.
  59. 83.
  60. 84.