$30 off During Our Annual Pro Sale. View Details »

Implementing and using GraphQL at GitHub

Kyle Daigle
September 14, 2016

Implementing and using GraphQL at GitHub

This talk was given at GitHub Universe 2016. Alongside Dan Schafer from GitHub, we discuss GraphQL, the what's and the hows, and how GitHub has launched its public GraphQL API.

Kyle Daigle

September 14, 2016
Tweet

More Decks by Kyle Daigle

Other Decks in Programming

Transcript

  1. Implementing and Using GraphQL
    Kyle Daigle
    Platform Interface Engineering Manager, GitHub
    Dan Schafer
    Software Engineer, Co-Creater of GraphQL, Facebook

    View Slide

  2. Kyle Daigle
    @kdaigle
    [email protected]

    View Slide

  3. Today
    • Over 250,000 OAuth Applications
    • Over 6,000,000 users have installed an OAuth app
    • REST API v3
    • Webhooks

    View Slide

  4. But not without some pain...

    View Slide

  5. Pains of our API
    • Getting the data you want can be multiple REST calls
    away
    • It’s difficult for us to release comprehensive REST
    responses that don’t expose too much data that’s too
    expensive to calculate.
    • When we’re forced to make a change, it’s very hard to
    know who it will impact
    • GitHub uses the API for its own integrations but not
    for product features

    View Slide

  6. Announcing
    GitHub GraphQL API

    View Slide

  7. We did some investigation...

    View Slide

  8. Built a proof of concept...

    View Slide

  9. Woah.

    View Slide

  10. githubengineering.com

    View Slide

  11. We headed to the source...

    View Slide

  12. Introduction to GraphQL
    Dan Schafer
    Software Engineer, Facebook

    View Slide

  13. Why GraphQL?

    View Slide

  14. View Slide

  15. Join-tables
    http://url.api/reso

    View Slide

  16. View Slide

  17. GraphQL

    View Slide

  18. {
    me {
    name
    }
    }

    View Slide

  19. {
    "me": {
    "name": "Daniel Schafer"
    }
    }
    {
    me {
    name
    }
    }

    View Slide

  20. {
    me {
    name
    profilePic {
    width
    height
    url
    }
    }
    }

    View Slide

  21. {
    "me": {
    "name": "Daniel Schafer",
    "profilePic": {
    "width": 50,
    "height": 50,
    "url": "https://cdn/50.jpg"
    }
    }
    }
    {
    me {
    name
    profilePic {
    width
    height
    url
    }
    }
    }

    View Slide

  22. {
    me {
    name
    friends {
    name
    }
    }
    }
    {
    "me": {
    "name": "Daniel Schafer",
    "friends": [
    {
    "name": "Kyle Daigle"
    },
    {
    "name": "Nick Schrock"
    },
    {
    "name": "Lee Byron"
    },

    View Slide

  23. {
    me {
    name
    friends {
    name
    events {
    name
    }
    }
    }
    }
    {
    "me": {
    "name": "Daniel Schafer",
    "friends": [
    {
    "name": "Kyle Daigle",
    "events": [
    {
    "name": "Github Universe"
    },
    {
    "name": "GraphQL Meetup"
    },
    ]
    }

    View Slide

  24. {
    me {
    name
    friends(first: 1) {
    name
    events(first: 1) {
    name
    }
    }
    }
    }
    {
    "me": {
    "name": "Daniel Schafer",
    "friends": [
    {
    "name": "Kyle Daigle",
    "events": [
    {
    "name": "Github Universe"
    }
    ]
    }
    ]
    }
    }

    View Slide

  25. Benefits of GraphQL

    View Slide

  26. Mental Model for

    Product Developers

    View Slide

  27. Type System

    View Slide

  28. {
    me {
    name
    friends(first: 1) {
    name
    events(first: 1) {
    name
    }
    }
    }
    }

    View Slide

  29. {
    me {
    name
    friends(first: 1) {
    name
    events(first: 1) {
    name
    }
    }
    }
    }

    View Slide

  30. {
    me {
    name
    friends(first: 1) {
    name
    events(first: 1) {
    name
    }
    }
    }
    }
    type Query {
    me: User
    user(id: Int): User
    }

    View Slide

  31. {
    me {
    name
    friends(first: 1) {
    name
    events(first: 1) {
    name
    }
    }
    }
    }
    type User {
    name: String
    profilePic(size: Int = 50): Image
    friends(first: Int): [User]
    events(first: Int): [Event]
    }

    View Slide

  32. {
    me {
    name
    friends(first: 1) {
    name
    events(first: 1) {
    name
    }
    }
    }
    }
    type User {
    name: String
    profilePic(size: Int = 50): Image
    friends(first: Int): [User]
    events(first: Int): [Event]
    }

    View Slide

  33. {
    me {
    name
    friends(first: 1) {
    name
    events(first: 1) {
    name
    }
    }
    }
    }
    type Event {
    name: String
    attendees(first: Int): [User]
    }

    View Slide

  34. {
    me {
    name
    attendees(first: 1) {
    name
    }
    }
    }

    View Slide

  35. {
    me {
    name
    attendees(first: 1) {
    name
    }
    }
    }

    View Slide

  36. {
    me {
    name
    attendees(first: 1) {
    name
    }
    }
    }
    type User {
    name: String
    profilePic(size: Int = 50): Image
    friends(first: Int): [User]
    events(first: Int): [Event]
    }

    View Slide

  37. Introspection

    View Slide

  38. {
    __schema {
    types {
    name
    fields {
    name
    type { name }
    }
    }
    }
    }
    type Query {
    me: User
    user(id: Int): User
    }
    type User {
    name: String
    profilePic(size: Int = 50): Image
    friends(first: Int): [User]
    events(first: Int): [Event]
    }
    type Event {
    name: String
    attendees(first: Int): [User]
    }

    View Slide

  39. Power to the Clients

    View Slide

  40. Models
    Views
    Here's your 123 model
    CLIENT
    Model: 123, plz
    APP SERVER

    View Slide

  41. Models
    Views v2
    Here's your 123 model
    CLIENT
    Model: 123, plz
    APP SERVER

    View Slide

  42. Models
    Models v2
    Here's your 123 v2 model
    CLIENT
    Model: 123, v2, plz
    APP SERVER
    Views v2

    View Slide

  43. CLIENT
    APP SERVER
    Views v3
    Models
    Models v2
    Models v3
    Here's your 123 v3 model
    Model: 123, v3, plz

    View Slide

  44. CLIENT
    APP SERVER
    Models v2
    Models v3
    Models v4
    Views v4
    Here's your 123 v4 model
    Model: 123, v4, plz

    View Slide

  45. Models
    Views
    Here's your 123 model
    CLIENT
    Model: 123, plz
    APP SERVER
    Model: 123, plz
    Model: 123, plz
    Model: 123, plz
    Model: 123, plz
    Model: 123, plz

    View Slide

  46. Capabilities
    Requirements
    CLIENT
    APP SERVER

    View Slide

  47. Type System
    Views
    Models
    This data shape, plz
    Here's your specific data
    CLIENT
    APP SERVER

    View Slide

  48. Views v2
    Views
    Models
    Models v2
    This data shape, plz
    Here's your specific data
    CLIENT
    APP SERVER
    Type System

    View Slide

  49. Views v3
    Views v2
    Views
    Models
    Models v2
    Models v3
    This data shape, plz
    Here's your specific data
    CLIENT
    APP SERVER
    Type System

    View Slide

  50. iOS Feed
    Android Feed
    Ads Manager iPad Pages
    iOS Messenger
    Facebook Lite

    View Slide

  51. GraphQL

    View Slide

  52. graphql.org

    View Slide

  53. We love collaborating
    on GraphQL.

    View Slide

  54. rmosolgo/graphql-ruby
    shopify/graphql-batch

    View Slide

  55. We are changing how we work
    to help improve the platform.

    View Slide

  56. We felt this building the
    Projects REST API.

    View Slide

  57. View Slide

  58. Be transparent.

    View Slide

  59. Public GitHub
    Platform Roadmap
    developer.github.com

    View Slide

  60. Collaborate directly

    with integrators.

    View Slide

  61. platform.github.community

    View Slide

  62. View Slide

  63. GitHub Platform Forum
    • Public forum to discuss early access and pre-release
    features
    • Staffed by GitHub Platform Engineers, Product
    Managers, and Support staff
    • Feedback can immediately be used by GitHub
    engineers
    • Integrators can work with each other to share novel
    uses and best practices

    View Slide

  64. Change how we build features
    at GitHub.

    View Slide

  65. Early Access Program

    View Slide

  66. Early Access Program
    • We will provide a communication channel to
    collaboratively impact the direction and approach of a
    project.
    • We will strive to keep documentation updated, but you
    can expect unannounced breaking changes as we develop
    quickly.
    • We may stop or pause access to Early Access releases at
    any point.
    • You will encounter bugs and there will be reliability and
    stability hiccups.

    View Slide

  67. Systemic support from Product
    Managers, Support, and
    Engineers makes this possible.

    View Slide

  68. GitHub Engineers building on
    top of the same platform.

    View Slide

  69. Access to more data sooner.

    View Slide

  70. We’re solving new problems
    with GraphQL in the public.

    View Slide

  71. Using OAuth tokens to limit
    field & object visibility.

    View Slide

  72. query {
    viewer
    }
    user

    View Slide

  73. query {
    viewer {
    repositories(first: 3) {
    edges {
    node {
    name
    }
    }
    }
    }
    }
    user
    repo

    View Slide

  74. Will change to support
    Integrations’ new permission
    system.

    View Slide

  75. Keeping some schema bits
    internal while letting the rest be
    public.

    View Slide

  76. User = GraphQL::Object.define do
    name “User”
    available_for_targets [:public]
    end

    View Slide

  77. User = GraphQL::Object.define do
    name “User”
    available_if_flagged [:super_secret_ship]
    end

    View Slide

  78. There are also a lot of cool
    parts of GraphQL in public.

    View Slide

  79. Query Introspection

    View Slide

  80. Let’s give it a shot.

    View Slide

  81. developer.github.com

    View Slide

  82. github/graphql-client

    View Slide

  83. github/github-graphql-rails-example

    View Slide

  84. graphql.org

    View Slide

  85. platform.github.community

    View Slide

  86. View Slide

  87. FIN

    View Slide