Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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?

Radoslav Stankov

March 23, 2017
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

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