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.

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
   kdaigle@github.com
   

   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