GraphQL with JavaScript

My GraphQL presentation from JSTalks

Transcript

1. Implementing
   GraphQL
   with

   JavaScript
   Radoslav Stankov 21/10/2015
   

   View Slide

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

   http://blog.rstankov.com
   
   http://github.com/rstankov
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

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

   View Slide

10. View Slide

11. View Slide

12. GET /api/users/1
    {
    id: 1,
    name: 'User Name',
    handle: 'user_name',
    avatar_url: 'assets.producthunt.com/uuid'
    }
    

    View Slide

13. Rest Client
    Rest Server
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. …approach 2
    

    View Slide

18. 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'
    }
    }
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. 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'
    }]
    }
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

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

    View Slide

30. View Slide

31. View Slide

32. …approach 3
    

    View Slide

33. View Slide

34. Rest Client
    Rest Server
    

    View Slide

35. Rest Client
    Rest Server
    endpoint 1
    feature 1
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. {
    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'
    }]
    }
    

    View Slide

46. {
    id
    title
    tagline
    votes_count
    hunter {
    id
    avatar_url
    }
    makers {
    id
    avatar_url
    }
    }
    

    View Slide

47. View Slide

48. GET /graphql
    Request Body Response Body
    

    View Slide

49. 

    query {
    post(id: 1){
    id
    title
    tagline
    votes_count
    hunter {
    id
    avatar_url
    }
    makers {
    id
    avatar_url
    }
    }
    }
    GET /graphql
    Request Body Response Body
    

    View Slide

50. 

    query {
    post(id: 1){
    id
    title
    tagline
    votes_count
    hunter {
    id
    avatar_url
    }
    makers {
    id
    avatar_url
    }
    }
    }
    GET /graphql
    Request Body Response Body
    

    View Slide

51. 

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

    View Slide

52. It’s that simple
    

    View Slide

53. 

    https://facebook.github.io/graphql

    

    View Slide

54. 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

55. Architecture
    

    GraphQL Library

    (Per-Language)

    

    Type

    Definitions

    

    Application

    Code

    

    View Slide

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

    View Slide

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

    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. Code
    var PostType = new GraphQLObjectType({
    name: 'Post',
    fields: function() {
    return {
    id: {
    type: GraphQLInt,
    },
    title: {
    type: GraphQLString,
    },
    user: {
    type: UserType,
    description: "Creator of the post",
    resolve: function(post) {
    return data.users.find(post.user_id);
    }
    },
    };
    }
    });
    

    View Slide

60. 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 ARGUMENT],

    resolve: [FUNCTION]
    },
    }
    }
    });
    

    View Slide

61. Code
    var PostType = new GraphQLObjectType({
    name: 'Post',
    fields: function() {
    return {
    id: {
    type: GraphQLInt,

    resolve: function(post) {
    return post.id;
    }
    },
    user: {
    type: UserType,
    resolve: function(post) {
    return data.users.find(post.user_id);
    }
    },
    };
    }
    });
    

    View Slide

62. Code
    var PostType = new GraphQLObjectType({
    name: 'Post',
    fields: function() {
    return {
    id: {
    type: GraphQLInt
    },
    user: {
    type: UserType,
    resolve: function(post) {
    return data.users.find(post.user_id);
    }
    },
    };
    }
    });
    

    View Slide

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

    View Slide

64. Mutation
    

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

    View Slide

65. 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) {
    if (!data.users.find(params.user_id)) {
    throw "Invalid user id - " + params.user_id;
    }
    return data.posts.create(params);
    },
    },
    },
    });
    

    View Slide

66. 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

67. {
    id
    hunter: {
    id
    name

    small_avatar_url: avatar_url(size: 100)

    big_avatar_url: avatar_url(size: 400)
    }
    }
    Cool tricks
    

    View Slide

68. Code
    var UserType = new GraphQLObjectType({
    name: 'User',
    fields: function() {
    return {
    // ... some field definitions ...
    picture: {
    type: GraphQLString,
    args: {
    size: { type: GraphQLInt },
    },
    resolve: function(user, params) {
    var size = params.size || 400;
    return 'file.example.com/' + user.picture_uuid + "?size=" + size;
    }
    },
    };
    }
    });
    

    View Slide

69. 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

70. 

    https://facebook.github.io/react

    

    View Slide

71. 

    https://facebook.github.io/relay

    

    View Slide

72. View Slide

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

    View Slide

74. Demo
    

    View Slide

75. Issues
    • New, just a draft specification
    • Mutations are weird
    • Best practices and solutions
    • Large datasets
    

    View Slide

76. View Slide

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

    View Slide

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

    View Slide

79. View Slide

80. View Slide

81. @rstankov
    Thanks :)
    

    View Slide

82. Questions?
    

    View Slide