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 full-size slide

  2. Radoslav Stankov
    @rstankov

    http://rstankov.com

    http://github.com/rstankov

    View full-size slide

  3. 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 full-size slide

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

    View full-size slide

  5. Rest Client
    Rest Server

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. …approach 3

    View full-size slide

  15. Rest Client
    Rest Server

    View full-size slide

  16. Rest Client
    Rest Server
    endpoint 1
    feature 1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. {
    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 full-size slide

  21. {
    id
    title
    tagline
    votesCount
    commentsCount
    thumbnailUrl

    hunter: {
    id
    name
    handle
    avatarUrl
    }
    }

    View full-size slide

  22. {
    id
    title
    tagline
    votesCount
    commentsCount
    thumbnailUrl

    hunter: {
    id
    avatarUrl
    }
    }

    View full-size slide

  23. GET /graphql
    Request Body Response Body

    View full-size slide


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

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

    View full-size slide


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

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

    View full-size slide


  26. 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 full-size slide


  27. https://facebook.github.io/graphql


    View full-size slide

  28. 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 full-size slide

  29. Architecture
    GraphQL Library

    (Per-Language)
    Type

    Definitions
    Application

    Code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Architecture
    GraphQL Library

    (Per-Language)
    Type

    Definitions
    Application

    Code

    View full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. Mutation

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

    View full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. {
    id
    hunter: {
    id
    name

    smallAvatarUrl: avatarUrl(size: 100)

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

    View full-size slide

  41. 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 full-size slide


  42. https://github.com/graphql/graphiql


    View full-size slide


  43. https://facebook.github.io/react


    View full-size slide


  44. https://facebook.github.io/relay


    View full-size slide


  45. http://www.apollodata.com/


    View full-size slide

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

    View full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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


    View full-size slide