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
   

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

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]
   }
   

   View Slide

8. View Slide

9. GET /api/topics/1
   {
   id: 1,
   name: 'Web',
   slug: 'web',
   }
   

   View Slide

10. Rest Client
    Rest Server
    

    View Slide

11. /api/posts?date=2017-03-23
    Rest Client
    Rest Server
    

    View Slide

12. /api/posts?date=2017-03-23
    /api/topics/{x}
    (for X users)
    Rest Client
    Rest Server
    

    View Slide

13. /api/posts?date=2017-03-23
    /api/topics/{x}
    (for X users)
    Rest Client
    Rest Server
    

    View Slide

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]
    }
    

    View Slide

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' },
    ]
    }
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

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' },
    ],
    }
    

    View Slide

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"
    }
    }
    

    View Slide

23. View Slide

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,

    

    View Slide

25. View Slide

26. View Slide

27. …approach 3
    

    View Slide

28. View Slide

29. Rest Client
    Rest Server
    

    View Slide

30. Rest Client
    Rest Server
    endpoint 1
    feature 1
    

    View Slide

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

    View Slide

32. Rest Client
    Rest Server
    endpoint 2
    feature 2
    endpoint 3
    feature 3
    endpoint 1
    feature 1
    

    View Slide

33. Rest Client
    Rest Server
    endpoint 2
    feature 2
    endpoint 3
    feature 3
    endpoint N
    feature N
    endpoint 1
    feature 1
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

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"
    }
    }
    

    View Slide

42. {
    id
    title
    tagline
    votesCount
    commentsCount
    thumbnailUrl

    hunter: {
    id
    name
    handle
    avatarUrl
    }
    }
    

    View Slide

43. {
    id
    title
    tagline
    votesCount
    commentsCount
    thumbnailUrl

    hunter: {
    id
    avatarUrl
    }
    }
    

    View Slide

44. View Slide

45. GET /graphql
    Request Body Response Body
    

    View Slide

46. 

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

    hunter: {
    id
    avatarUrl
    }
    }
    }
    GET /graphql
    Request Body Response Body
    

    View Slide

47. 

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

    hunter: {
    id
    avatarUrl
    }
    }
    }
    GET /graphql
    Request Body Response Body
    

    View Slide

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
    }
    }
    }
    }
    

    View Slide

49. View Slide

50. 

    https://facebook.github.io/graphql

    

    View Slide

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.
    

    View Slide

52. Architecture
    GraphQL Library

    (Per-Language)
    Type

    Definitions
    Application

    Code
    

    View Slide

53. GraphQL
    • Single endpoint
    • Not just a library
    • Application-Layer Protocol
    • Server agnostic
    • Strongly-typed
    • Client-specified queries
    • Hierarchical
    

    View Slide

54. Tries to solve
    • N+1 API queries
    • API response bloat
    • Documentation
    • Ad Hoc Endpoints
    • Structure issues
    

    View Slide

55. Architecture
    GraphQL Library

    (Per-Language)
    Type

    Definitions
    Application

    Code
    

    View Slide

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);
    }
    },
    };
    }
    });
    

    View Slide

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]
    },
    }
    }
    });
    

    View Slide

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);
    }
    },
    });
    

    View Slide

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
    }
    ]
    }
    }
    }
    

    View Slide

60. Mutation
    

    mutation {
    createUser(name: "Rado") {
    id
    }
    }
    {
    "data": {
    "createUser": {
    "id": 2
    }
    }
    }
    

    View Slide

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);
    },
    },
    },
    });
    

    View Slide

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"
    }
    }
    }
    ]
    },
    

    View Slide

63. {
    id
    hunter: {
    id
    name

    smallAvatarUrl: avatarUrl(size: 100)

    bigAvatarUrl: avatarUrl(size: 400)
    }
    }
    Cool tricks
    

    View Slide

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
    

    View Slide

65. 

    https://github.com/graphql/graphiql

    

    View Slide

66. 

    https://facebook.github.io/react

    

    View Slide

67. 

    https://facebook.github.io/relay

    

    View Slide

68. View Slide

69. 

    http://www.apollodata.com/

    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. PostContainer = Relay.createContainer(Post, {
    fragments: {
    post: () => Relay.QL`
    fragment on Post {
    id
    title
    tagline
    votes_count
    }
    `,
    },
    });
    Apollo
    

    View Slide

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
    }
    

    View Slide

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
    }
    

    View Slide

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
    }
    

    View Slide

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
    }
    }
    

    View Slide

78. PostContainer = Relay.createContainer(Post, {
    fragments: {
    post: () => Relay.QL`
    fragment on Post {
    id
    title
    tagline
    votes_count
    }
    `,
    },
    });
    Apollo
    

    View Slide

79. query Homepage($page: Int!) {
    mainMenu {
    ...MenuItem
    }
    latestNewsletter {
    ...NewsletterCard
    }
    latestGiveaway {
    ...GiveawayCard
    }
    homepagePosts(page: $page) {
    ...PostItem
    }
    }
    

    View Slide

80. View Slide

81. https://speakerdeck.com/rstankov/graphql-basics
    

    View Slide

82. 

    https://graphql-europe.org/

    

    View Slide

83. Thanks !
    

    View Slide

84. View Slide