Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to GraphQL

3,174 views

Published on

As presented at DevDuck #3 - JavaScript meetup for developers (www.devduck.pl)
-----
Get know more about GraphQL
-----
Looking for a company to build you an electron desktop app? www.brainhub.eu

Published in: Software
  • Login to see the comments

Introduction to GraphQL

  1. 1. Introduction Origin History Usage Alternatives & useful tools End GraphQL Piotr Sroczkowski Brainhub January 23, 2017 Piotr Sroczkowski GraphQL
  2. 2. Introduction Origin History Usage Alternatives & useful tools End Summary I 1 Introduction 2 Origin DIP Semantic triple 3 History 4 Usage How to setup a GraphQL server? Syntax Types Best practices 5 Alternatives & useful tools 6 End Piotr Sroczkowski GraphQL
  3. 3. Introduction Origin History Usage Alternatives & useful tools End What is GraphQL? Piotr Sroczkowski GraphQL
  4. 4. Introduction Origin History Usage Alternatives & useful tools End What is GraphQL? Graph query language Piotr Sroczkowski GraphQL
  5. 5. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Dependency inversion principle (DIP) Piotr Sroczkowski GraphQL
  6. 6. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Dependency inversion principle (DIP) one of SOLID principles Piotr Sroczkowski GraphQL
  7. 7. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Dependency inversion principle (DIP) one of SOLID principles depend on abstraction, not concretion Piotr Sroczkowski GraphQL
  8. 8. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Dependency inversion principle (DIP) one of SOLID principles depend on abstraction, not concretion IMO even abstract class breaks this rule Piotr Sroczkowski GraphQL
  9. 9. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Dependency inversion principle (DIP) one of SOLID principles depend on abstraction, not concretion IMO even abstract class breaks this rule so we should depend only on interfaces Piotr Sroczkowski GraphQL
  10. 10. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple DIP in services Piotr Sroczkowski GraphQL
  11. 11. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple DIP in services DIP is not only in OOP Piotr Sroczkowski GraphQL
  12. 12. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple DIP in services DIP is not only in OOP also in SOA Piotr Sroczkowski GraphQL
  13. 13. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple DIP in services DIP is not only in OOP also in SOA it’s like joining blocks together Piotr Sroczkowski GraphQL
  14. 14. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple DIP in microservices Piotr Sroczkowski GraphQL
  15. 15. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple DIP in microservices it’s not a new paradigm, it’s just an example of SOA Piotr Sroczkowski GraphQL
  16. 16. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple DIP in microservices it’s not a new paradigm, it’s just an example of SOA service discovery Piotr Sroczkowski GraphQL
  17. 17. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Semantic triple Piotr Sroczkowski GraphQL
  18. 18. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Semantic triple an RDF (Resouce Description Framework) data model Piotr Sroczkowski GraphQL
  19. 19. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Semantic triple an RDF (Resouce Description Framework) data model ex. Alice likes Bob Piotr Sroczkowski GraphQL
  20. 20. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Triplestore Piotr Sroczkowski GraphQL
  21. 21. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Triplestore a proposed database for storage of triples Piotr Sroczkowski GraphQL
  22. 22. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Think in graphs Piotr Sroczkowski GraphQL
  23. 23. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Think in graphs Why? Piotr Sroczkowski GraphQL
  24. 24. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Think in graphs Why? UI Piotr Sroczkowski GraphQL
  25. 25. Introduction Origin History Usage Alternatives & useful tools End DIP Semantic triple Think in graphs Why? UI Graph algorithms Piotr Sroczkowski GraphQL
  26. 26. Introduction Origin History Usage Alternatives & useful tools End GraphQL history Piotr Sroczkowski GraphQL
  27. 27. Introduction Origin History Usage Alternatives & useful tools End GraphQL history developed internally in Facebook in 2012 Piotr Sroczkowski GraphQL
  28. 28. Introduction Origin History Usage Alternatives & useful tools End GraphQL history developed internally in Facebook in 2012 publicly released in 2015 Piotr Sroczkowski GraphQL
  29. 29. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Node Piotr Sroczkowski GraphQL
  30. 30. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Node express-graphql https://github.com/graphql/express-graphql Piotr Sroczkowski GraphQL
  31. 31. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Node express-graphql https://github.com/graphql/express-graphql or graphql-server https://github.com/apollostack/graphql-server Piotr Sroczkowski GraphQL
  32. 32. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices The simplest way 1 git clone https:// github.com/apollostack/apollo - → starter -kit 2 cd apollo -starter -kit 3 git checkout server -only 4 npm install 5 npm start Piotr Sroczkowski GraphQL
  33. 33. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Queries Piotr Sroczkowski GraphQL
  34. 34. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Queries 1 { 2 hero { 3 name 4 } 5 } Piotr Sroczkowski GraphQL
  35. 35. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Queries 1 { 2 hero { 3 name 4 } 5 } 1 { 2 "data": { 3 "hero": { 4 "name": "R2 -D2" 5 } 6 } 7 } Piotr Sroczkowski GraphQL
  36. 36. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Queries Piotr Sroczkowski GraphQL
  37. 37. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Queries 1 { 2 human(id: "1000") { 3 name 4 height 5 } 6 } Piotr Sroczkowski GraphQL
  38. 38. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Queries 1 { 2 human(id: "1000") { 3 name 4 height 5 } 6 } 1 { 2 "data": { 3 "human": { 4 "name": "Luke Skywalker", 5 "height": 1.72 6 } 7 } 8 } Piotr Sroczkowski GraphQL
  39. 39. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Aliases Piotr Sroczkowski GraphQL
  40. 40. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Aliases 1 { 2 empireHero: hero(episode: EMPIRE) { 3 name 4 } 5 jediHero: hero(episode: JEDI) { 6 name 7 } 8 } Piotr Sroczkowski GraphQL
  41. 41. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Aliases 1 { 2 empireHero: hero(episode: EMPIRE) { 3 name 4 } 5 jediHero: hero(episode: JEDI) { 6 name 7 } 8 } 1 { 2 "data": { 3 "empireHero": { 4 "name": "Luke Skywalker" 5 }, 6 "jediHero": { 7 "name": "R2 -D2" 8 } 9 } Piotr Sroczkowski GraphQL
  42. 42. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Fragments - input 1 { 2 leftComparison: hero(episode: EMPIRE) { 3 ... comparisonFields 4 } 5 rightComparison : hero(episode: JEDI) { 6 ... comparisonFields 7 } 8 } 9 10 fragment comparisonFields on Character { 11 name 12 appearsIn 13 friends { 14 name 15 } 16 } Piotr Sroczkowski GraphQL
  43. 43. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Fragments - output I 1 { 2 "data": { 3 " leftComparison": { 4 "name": "Luke Skywalker", 5 "appearsIn": [ 6 "NEWHOPE", 7 "EMPIRE", 8 "JEDI" 9 ], 10 "friends": [ 11 { 12 "name": "Han Solo" 13 }, 14 { 15 "name": "Leia Organa" Piotr Sroczkowski GraphQL
  44. 44. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Fragments - output II 16 }, 17 { 18 "name": "C-3PO" 19 }, 20 { 21 "name": "R2 -D2" 22 } 23 ] 24 }, 25 " rightComparison ": { 26 "name": "R2 -D2", 27 "appearsIn": [ 28 "NEWHOPE", 29 "EMPIRE", 30 "JEDI" 31 ], Piotr Sroczkowski GraphQL
  45. 45. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Fragments - output III 32 "friends": [ 33 { 34 "name": "Luke Skywalker" 35 }, 36 { 37 "name": "Han Solo" 38 }, 39 { 40 "name": "Leia Organa" 41 } 42 ] 43 } 44 } 45 } Piotr Sroczkowski GraphQL
  46. 46. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Variables - input I 1 query HeroNameAndFriends ($episode: Episode) { 2 hero(episode: $episode) { 3 name 4 friends { 5 name 6 } 7 } 8 } Piotr Sroczkowski GraphQL
  47. 47. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Variables - output I 1 { 2 "data": { 3 "hero": { 4 "name": "R2 -D2", 5 "friends": [ 6 { 7 "name": "Luke Skywalker" 8 }, 9 { 10 "name": "Han Solo" 11 }, 12 { 13 "name": "Leia Organa" 14 } 15 ] Piotr Sroczkowski GraphQL
  48. 48. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Variables - output II 16 } 17 } 18 } Piotr Sroczkowski GraphQL
  49. 49. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Directives I 1 query Hero($episode: Episode , $withFriends: Boolean !) → { 2 hero(episode: $episode) { 3 name 4 friends @include(if: $withFriends) { 5 name 6 } 7 } 8 } Piotr Sroczkowski GraphQL
  50. 50. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Mutations I 1 mutation CreateReviewForEpisode ($ep: Episode!, $review → : ReviewInput !) { 2 createReview(episode: $ep , review: $review) { 3 stars 4 commentary 5 } 6 } Piotr Sroczkowski GraphQL
  51. 51. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Inline fragments I 1 query HeroForEpisode ($ep: Episode !) { 2 hero(episode: $ep) { 3 name 4 ... on Droid { 5 primaryFunction 6 } 7 ... on Human { 8 height 9 } 10 } 11 } Piotr Sroczkowski GraphQL
  52. 52. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Meta fields I 1 { 2 search(text: "an") { 3 __typename 4 ... on Human { 5 name 6 } 7 ... on Droid { 8 name 9 } 10 ... on Starship { 11 name 12 } 13 } 14 } Piotr Sroczkowski GraphQL
  53. 53. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Types Piotr Sroczkowski GraphQL
  54. 54. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Types Scalar types Piotr Sroczkowski GraphQL
  55. 55. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Types Scalar types Enumeration types Piotr Sroczkowski GraphQL
  56. 56. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Types Scalar types Enumeration types Interfaces Piotr Sroczkowski GraphQL
  57. 57. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Types Scalar types Enumeration types Interfaces Union types Piotr Sroczkowski GraphQL
  58. 58. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Types Scalar types Enumeration types Interfaces Union types Input types Piotr Sroczkowski GraphQL
  59. 59. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Scalar types Piotr Sroczkowski GraphQL
  60. 60. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Scalar types Int Piotr Sroczkowski GraphQL
  61. 61. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Scalar types Int Float Piotr Sroczkowski GraphQL
  62. 62. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Scalar types Int Float String Piotr Sroczkowski GraphQL
  63. 63. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Scalar types Int Float String Boolean Piotr Sroczkowski GraphQL
  64. 64. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Scalar types Int Float String Boolean Id Piotr Sroczkowski GraphQL
  65. 65. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Scalar types Int Float String Boolean Id You can also define your custom scalar types ex. scalar Date Piotr Sroczkowski GraphQL
  66. 66. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Enumeration types 1 enum Episode { 2 NEWHOPE 3 EMPIRE 4 JEDI 5 } Piotr Sroczkowski GraphQL
  67. 67. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Type modifiers 1 type Character { 2 name: String! 3 appearsIn: [Episode ]! 4 } Piotr Sroczkowski GraphQL
  68. 68. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Interface 1 interface Character { 2 id: ID! 3 name: String! 4 friends: [Character] 5 appearsIn: [Episode ]! 6 } Piotr Sroczkowski GraphQL
  69. 69. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Interface implementation 1 type Human implements Character { 2 id: ID! 3 name: String! 4 friends: [Character] 5 appearsIn: [Episode ]! 6 starships: [Starship] 7 totalCredits: Int 8 } Piotr Sroczkowski GraphQL
  70. 70. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Union types 1 union SearchResult = Human | Droid | Starship Piotr Sroczkowski GraphQL
  71. 71. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Input types Piotr Sroczkowski GraphQL
  72. 72. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Input types 1 input ReviewInput { 2 stars: Int! 3 commentary: String 4 } Piotr Sroczkowski GraphQL
  73. 73. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Input types 1 input ReviewInput { 2 stars: Int! 3 commentary: String 4 } 1 mutation CreateReviewForEpisode ($ep: Episode!, → $review: ReviewInput !) { 2 createReview(episode: $ep , review: $review) → { 3 stars 4 commentary 5 } 6 } Piotr Sroczkowski GraphQL
  74. 74. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Best practices Piotr Sroczkowski GraphQL
  75. 75. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Best practices HTTP Piotr Sroczkowski GraphQL
  76. 76. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Best practices HTTP JSON (with GZIP) Piotr Sroczkowski GraphQL
  77. 77. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Best practices HTTP JSON (with GZIP) Versioning Piotr Sroczkowski GraphQL
  78. 78. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Best practices HTTP JSON (with GZIP) Versioning Nullability Piotr Sroczkowski GraphQL
  79. 79. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Best practices HTTP JSON (with GZIP) Versioning Nullability Pagination Piotr Sroczkowski GraphQL
  80. 80. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Best practices HTTP JSON (with GZIP) Versioning Nullability Pagination Server-side Batching & Caching Piotr Sroczkowski GraphQL
  81. 81. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Pagination example 1 { 2 hero { 3 name 4 friends(first :2) { 5 name 6 } 7 } 8 } Piotr Sroczkowski GraphQL
  82. 82. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Batching - library Piotr Sroczkowski GraphQL
  83. 83. Introduction Origin History Usage Alternatives & useful tools End How to setup a GraphQL server? Syntax Types Best practices Batching - library https://github.com/nodkz/react-relay-network-layer Piotr Sroczkowski GraphQL
  84. 84. Introduction Origin History Usage Alternatives & useful tools End Useful tools Piotr Sroczkowski GraphQL
  85. 85. Introduction Origin History Usage Alternatives & useful tools End Useful tools Relay https://github.com/facebook/relay Piotr Sroczkowski GraphQL
  86. 86. Introduction Origin History Usage Alternatives & useful tools End Useful tools Relay https://github.com/facebook/relay GraphiQL https://github.com/graphql/graphiql Piotr Sroczkowski GraphQL
  87. 87. Introduction Origin History Usage Alternatives & useful tools End Useful tools Relay https://github.com/facebook/relay GraphiQL https://github.com/graphql/graphiql Adrenaline https://github.com/gyzerok/adrenaline Piotr Sroczkowski GraphQL
  88. 88. Introduction Origin History Usage Alternatives & useful tools End Useful tools Relay https://github.com/facebook/relay GraphiQL https://github.com/graphql/graphiql Adrenaline https://github.com/gyzerok/adrenaline Apollo client https://github.com/apollostack/apollo-client Piotr Sroczkowski GraphQL
  89. 89. Introduction Origin History Usage Alternatives & useful tools End Useful tools Relay https://github.com/facebook/relay GraphiQL https://github.com/graphql/graphiql Adrenaline https://github.com/gyzerok/adrenaline Apollo client https://github.com/apollostack/apollo-client Apollo iOS https://github.com/apollostack/apollo-ios Piotr Sroczkowski GraphQL
  90. 90. Introduction Origin History Usage Alternatives & useful tools End Alternatives Piotr Sroczkowski GraphQL
  91. 91. Introduction Origin History Usage Alternatives & useful tools End Alternatives Falcor (not yet available) Piotr Sroczkowski GraphQL
  92. 92. Introduction Origin History Usage Alternatives & useful tools End Alternatives Falcor (not yet available) SPARQL Piotr Sroczkowski GraphQL
  93. 93. Introduction Origin History Usage Alternatives & useful tools End Alternatives Falcor (not yet available) SPARQL Graph databases like Neo4j, ArangoDB Piotr Sroczkowski GraphQL
  94. 94. Introduction Origin History Usage Alternatives & useful tools End What problems does it solve? Piotr Sroczkowski GraphQL
  95. 95. Introduction Origin History Usage Alternatives & useful tools End What problems does it solve? client - server and microservices communication Piotr Sroczkowski GraphQL
  96. 96. Introduction Origin History Usage Alternatives & useful tools End What problems does it solve? client - server and microservices communication more precise than REST Piotr Sroczkowski GraphQL
  97. 97. Introduction Origin History Usage Alternatives & useful tools End What problems does it solve? client - server and microservices communication more precise than REST versioning Piotr Sroczkowski GraphQL
  98. 98. Introduction Origin History Usage Alternatives & useful tools End Sources Piotr Sroczkowski GraphQL
  99. 99. Introduction Origin History Usage Alternatives & useful tools End Sources The examples have been got from GraphQL official site http://graphql.org/learn/ Piotr Sroczkowski GraphQL
  100. 100. Introduction Origin History Usage Alternatives & useful tools End The end Piotr Sroczkowski GraphQL
  101. 101. Introduction Origin History Usage Alternatives & useful tools End The end Thank you Piotr Sroczkowski GraphQL

×