davidbgk
/
larlet-fr-david-cache
關注 1
收藏 0
複製 0
程式碼 版本發佈 0 活動
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 提交
1 分支
目錄樹: 4985cb471c
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 '4985cb471c'
${ noResults }
larlet-fr-david-cache/cache/d9457ea0fba660a5011e8671f44.../index.html

index.html 37KB
原始文件 Blame 歷史記錄

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>The GitHub GraphQL API (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://githubengineering.com/the-github-graphql-api/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   The GitHub GraphQL API (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://githubengineering.com/the-github-graphql-api/">Source originale du contenu</a></h3>

  463.     <p>GitHub announced a public API <a href="https://github.com/blog/21-the-api">one month after the site launched</a>. We’ve evolved this platform through three versions, adhering to RFC standards and embracing new design patterns to provide a clear and consistent interface. We’ve often heard that our REST API was an inspiration for other companies; countless tutorials refer to our endpoints. Today, we’re excited to announce our biggest change to the API since we snubbed XML in favor of JSON: we’re making the GitHub API available through GraphQL.</p>

  464. 

  465. <p>GraphQL is, at its core, a specification for a data querying language. We’d like to talk a bit about GraphQL, including the problems we believe it solves and the opportunities it provides to integrators.</p>

  466. 

  467. <h2 id="why">Why?</h2>

  468. 

  469. <p>You may be wondering why we chose to start supporting GraphQL. Our API was designed to be RESTful and hypermedia-driven. We’re fortunate to have <a href="https://developer.github.com/libraries/">dozens of different open-source clients</a> written in a plethora of languages. Businesses grew around these endpoints.</p>

  470. 

  471. <p>Like most technology, REST is not perfect and has some drawbacks. Our ambition to change our API focused on solving two problems.</p>

  472. 

  473. <p>The first was scalability. The REST API is responsible for over 60% of the requests made to our database tier. This is partly because, by its nature, hypermedia navigation requires a client to repeatedly communicate with a server so that it can get all the information it needs. Our responses were bloated and filled with all sorts of <code class="highlighter-rouge">*_url</code> hints in the JSON responses to help people continue to navigate through the API to get what they needed. Despite all the information we provided, we heard from integrators that our REST API also wasn’t very flexible. It sometimes required two or three separate calls to assemble a complete view of a resource. It seemed like our responses simultaneously sent too much data <em>and</em> didn’t include data that consumers needed.</p>

  474. 

  475. <p>As we began to audit our endpoints in preparation for an APIv4, we encountered our second problem. We wanted to collect some meta-information about our endpoints. For example, we wanted to identify the OAuth scopes required for each endpoint. We wanted to be smarter about how our resources were paginated. We wanted assurances of type-safety for user-supplied parameters. We wanted to generate documentation from our code. We wanted to generate clients instead of manually supplying patches to <a href="http://octokit.github.io/">our Octokit suite</a>. We studied a variety of API specifications built to make some of this easier, but we found that none of the standards totally matched our requirements.</p>

  476. 

  477. <p>And then we learned about GraphQL.</p>

  478. 

  479. <h2 id="the-switch">The switch</h2>

  480. 

  481. <p><a href="http://graphql.org/">GraphQL</a> is a querying language developed by Facebook over the course of several years. In essence, you construct your request by defining the resources you want. You send this via a <code class="highlighter-rouge">POST</code> to a server, and the response matches the format of your request.</p>

  482. 

  483. <p>For example, say you wanted to fetch just a few attributes off of a user. Your GraphQL query might look like this:</p>

  484. 

  485. <pre><code class="language-graphql">{

  486.   viewer {

  487.     login

  488.     bio

  489.     location

  490.     isBountyHunter

  491.   }

  492. }

  493. </code></pre>

  494. 

  495. <p>And the response back might look like this:</p>

  496. 

  497. <div class="language-json highlighter-rouge">

  498. <pre class="highlight"><code><span class="p">{</span><span class="w">

  499.   </span><span class="nt">"data"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">

  500.     </span><span class="nt">"viewer"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">

  501.       </span><span class="nt">"login"</span><span class="p">:</span><span class="w"> </span><span class="s2">"octocat"</span><span class="p">,</span><span class="w">

  502.       </span><span class="nt">"bio"</span><span class="p">:</span><span class="w"> </span><span class="s2">"I've been around the world, from London to the Bay."</span><span class="p">,</span><span class="w">

  503.       </span><span class="nt">"location"</span><span class="p">:</span><span class="w"> </span><span class="s2">"San Francisco, CA"</span><span class="p">,</span><span class="w">

  504.       </span><span class="nt">"isBountyHunter"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">

  505.     </span><span class="p">}</span><span class="w">

  506.   </span><span class="p">}</span><span class="w">

  507. </span><span class="p">}</span><span class="w">

  508. </span></code></pre>

  509. </div>

  510. 

  511. <p>You can see that the keys and values in the JSON response match right up with the terms in the query string.</p>

  512. 

  513. <p>What if you wanted something more complicated? Let’s say you wanted to know how many repositories you’ve starred. You also want to get the names of your first three repositories, as well as their total number of stars, total number of forks, total number of watchers, and total number of open issues. That query might look like this:</p>

  514. 

  515. <pre><code class="language-graphql">{

  516.   viewer {

  517.     login

  518.     starredRepositories {

  519.       totalCount

  520.     }

  521.     repositories(first: 3) {

  522.       edges {

  523.         node {

  524.           name

  525.           stargazers {

  526.             totalCount

  527.           }

  528.           forks {

  529.             totalCount

  530.           }

  531.           watchers {

  532.             totalCount

  533.           }

  534.           issues(states:[OPEN]) {

  535.             totalCount

  536.           }

  537.         }

  538.       }

  539.     }

  540.   }

  541. }

  542. </code></pre>

  543. 

  544. <p>The response from our API might be:</p>

  545. 

  546. <div class="language-json highlighter-rouge">

  547. <pre class="highlight"><code><span class="p">{</span><span class="w">

  548.   </span><span class="nt">"data"</span><span class="p">:{</span><span class="w">

  549.     </span><span class="nt">"viewer"</span><span class="p">:{</span><span class="w">

  550.       </span><span class="nt">"login"</span><span class="p">:</span><span class="w"> </span><span class="s2">"octocat"</span><span class="p">,</span><span class="w">

  551.       </span><span class="nt">"starredRepositories"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">

  552.         </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">131</span><span class="w">

  553.       </span><span class="p">},</span><span class="w">

  554.       </span><span class="nt">"repositories"</span><span class="p">:{</span><span class="w">

  555.         </span><span class="nt">"edges"</span><span class="p">:[</span><span class="w">

  556.           </span><span class="p">{</span><span class="w">

  557.             </span><span class="nt">"node"</span><span class="p">:{</span><span class="w">

  558.               </span><span class="nt">"name"</span><span class="p">:</span><span class="s2">"octokit.rb"</span><span class="p">,</span><span class="w">

  559.               </span><span class="nt">"stargazers"</span><span class="p">:{</span><span class="w">

  560.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">17</span><span class="w">

  561.               </span><span class="p">},</span><span class="w">

  562.               </span><span class="nt">"forks"</span><span class="p">:{</span><span class="w">

  563.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="w">

  564.               </span><span class="p">},</span><span class="w">

  565.               </span><span class="nt">"watchers"</span><span class="p">:{</span><span class="w">

  566.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="w">

  567.               </span><span class="p">},</span><span class="w">

  568.               </span><span class="nt">"issues"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">

  569.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="w">

  570.               </span><span class="p">}</span><span class="w">

  571.             </span><span class="p">}</span><span class="w">

  572.           </span><span class="p">},</span><span class="w">

  573.           </span><span class="p">{</span><span class="w">

  574.             </span><span class="nt">"node"</span><span class="p">:{</span><span class="w">

  575.               </span><span class="nt">"name"</span><span class="p">:</span><span class="s2">"octokit.objc"</span><span class="p">,</span><span class="w">

  576.               </span><span class="nt">"stargazers"</span><span class="p">:{</span><span class="w">

  577.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="w">

  578.               </span><span class="p">},</span><span class="w">

  579.               </span><span class="nt">"forks"</span><span class="p">:{</span><span class="w">

  580.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w">

  581.               </span><span class="p">},</span><span class="w">

  582.               </span><span class="nt">"watchers"</span><span class="p">:{</span><span class="w">

  583.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="w">

  584.               </span><span class="p">},</span><span class="w">

  585.               </span><span class="nt">"issues"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">

  586.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="w">

  587.               </span><span class="p">}</span><span class="w">

  588.             </span><span class="p">}</span><span class="w">

  589.           </span><span class="p">},</span><span class="w">

  590.           </span><span class="p">{</span><span class="w">

  591.             </span><span class="nt">"node"</span><span class="p">:{</span><span class="w">

  592.               </span><span class="nt">"name"</span><span class="p">:</span><span class="s2">"octokit.net"</span><span class="p">,</span><span class="w">

  593.               </span><span class="nt">"stargazers"</span><span class="p">:{</span><span class="w">

  594.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">19</span><span class="w">

  595.               </span><span class="p">},</span><span class="w">

  596.               </span><span class="nt">"forks"</span><span class="p">:{</span><span class="w">

  597.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">7</span><span class="w">

  598.               </span><span class="p">},</span><span class="w">

  599.               </span><span class="nt">"watchers"</span><span class="p">:{</span><span class="w">

  600.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="w">

  601.               </span><span class="p">},</span><span class="w">

  602.               </span><span class="nt">"issues"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">

  603.                 </span><span class="nt">"totalCount"</span><span class="p">:</span><span class="w"> </span><span class="mi">4</span><span class="w">

  604.               </span><span class="p">}</span><span class="w">

  605.             </span><span class="p">}</span><span class="w">

  606.           </span><span class="p">}</span><span class="w">

  607.         </span><span class="p">]</span><span class="w">

  608.       </span><span class="p">}</span><span class="w">

  609.     </span><span class="p">}</span><span class="w">

  610.   </span><span class="p">}</span><span class="w">

  611. </span><span class="p">}</span><span class="w">

  612. </span></code></pre>

  613. </div>

  614. 

  615. <p>You just made <em>one</em> request to fetch all the data you wanted.</p>

  616. 

  617. <p>This type of design enables clients where smaller payload sizes are essential. For example, a mobile app could simplify its requests by only asking for the data it needs. This enables new possibilities and workflows that are freed from the limitations of downloading and parsing massive JSON blobs.</p>

  618. 

  619. <p>Query analysis is something that we’re also exploring with. Based on the resources that are requested, we can start providing more intelligent information to clients. For example, say you’ve made the following request:</p>

  620. 

  621. <pre><code class="language-graphql">{

  622.   viewer {

  623.     login

  624.     email

  625.   }

  626. }

  627. </code></pre>

  628. 

  629. <p>Before executing the request, the GraphQL server notes that you’re trying to get the <code class="highlighter-rouge">email</code> field. If your client is misconfigured, a response back from our server might look like this:</p>

  630. 

  631. <div class="language-json highlighter-rouge">

  632. <pre class="highlight"><code><span class="p">{</span><span class="w">

  633.   </span><span class="nt">"data"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">

  634.     </span><span class="nt">"viewer"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">

  635.       </span><span class="nt">"login"</span><span class="p">:</span><span class="w"> </span><span class="s2">"octocat"</span><span class="w">

  636.     </span><span class="p">}</span><span class="w">

  637.   </span><span class="p">},</span><span class="w">

  638.   </span><span class="nt">"errors"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">

  639.     </span><span class="p">{</span><span class="w">

  640.       </span><span class="nt">"message"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Your token has not been granted the required scopes to

  641.       execute this query. The 'email' field requires one of the following

  642.       scopes: ['user'], but your token has only been granted the: ['gist']

  643.       scopes. Please modify your token's scopes at: https://github.com/settings/tokens."</span><span class="w">

  644.     </span><span class="p">}</span><span class="w">

  645.   </span><span class="p">]</span><span class="w">

  646. </span><span class="p">}</span><span class="w">

  647. </span></code></pre>

  648. </div>

  649. 

  650. <p>This could be beneficial for users concerned about the OAuth scopes required by integrators. Insight into the scopes required could ensure that only the appropriate types are being requested.</p>

  651. 

  652. <p>There are several other features of GraphQL that we hope to make available to clients, such as:</p>

  653. 

  654. <ul>

  655.   <li>The ability to <em>batch requests</em>, where you can define dependencies between two separate queries and fetch data efficiently.</li>

  656.   <li>The ability to <em>create subscriptions</em>, where your client can receive new data when it becomes available.</li>

  657.   <li>The ability to <em>defer data</em>, where you choose to mark a part of your response as time-insensitive.</li>

  658. </ul>

  659. 

  660. <h2 id="defining-the-schema">Defining the schema</h2>

  661. 

  662. <p>In order to determine if GraphQL really was a technology we wanted to embrace, we formed a small team within the broader Platform organization and went looking for a feature on the site we wanted to build using GraphQL. We decided that implementing <a href="https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments">emoji reactions on comments</a> was concise enough to try and port to GraphQL. Choosing a subset of the site to power with GraphQL required us to model a complete workflow and focus on building the new objects and types that defined our GraphQL schema. For example, we started by constructing a user in our schema, moved on to a repository, and then expanded to issues within a repository. Over time, we grew the schema to encapsulate all the actions necessary for modeling reactions.</p>

  663. 

  664. <p>We found implementing a GraphQL server to be very straightforward. <a href="https://facebook.github.io/graphql/">The Spec</a> is clearly written and succinctly describes the behaviors of various parts of a schema. GraphQL has a type system that forces the server to be unambiguous about requests it receives and responses it produces. You define a schema, describing the objects that represent your resources, fields on those objects, and the connections between various objects. For example, a <code class="highlighter-rouge">Repository</code> object has a non-null <code class="highlighter-rouge">String</code> field for the <code class="highlighter-rouge">name</code>. A repository also has <code class="highlighter-rouge">watchers</code>, which is a connection to another non-nullable object, <code class="highlighter-rouge">User</code>.</p>

  665. 

  666. <p>Although the initial team exploring GraphQL worked mostly on the backend, we had several allies on the frontend who were also interested in GraphQL, and, specifically, moving parts of GitHub to use <a href="https://facebook.github.io/relay/">Relay</a>. They too were seeking better ways to access user data and present it more efficiently on the website. We began to work together to continue finding portions of the site that would be easy to communicate with via our nascent GraphQL schema. We decided to begin transforming some of our social features, such as the profile page, the stars counter, and the ability to watch repositories. These initial explorations paved the way to placing GraphQL in production. (That’s right! We’ve been running GraphQL in production for some time now.) As time went on, we began to get a bit more ambitious: we ported over some of the Git commit history pages to GraphQL and used <a href="http://githubengineering.com/scientist/">Scientist</a> to identify any potential discrepancies.</p>

  667. 

  668. <p>Drawing off our experiences in supporting the REST API, we worked quickly to implement our existing services to work with GraphQL. This included setting up logging requests and reporting exceptions, OAuth and AuthZ access, rate limiting, and providing helpful error responses. We tested our schema to ensure that every part of was documented and we wrote linters to ensure that our naming structure was standardized.</p>

  669. 

  670. <h2 id="open-source">Open source</h2>

  671. 

  672. <p>We work primarily in Ruby, and we were grateful for the existing gems supporting GraphQL. We used the <a href="https://github.com/rmosolgo/graphql-ruby">rmosolgo/graphql-ruby</a> gem to implement <strong>the entirety</strong> of our schema. We also incorporated the <a href="https://github.com/Shopify/graphql-batch">Shopify/graphql-batch</a> gem to ensure that multiple records and relationships were fetched efficiently.</p>

  673. 

  674. <p>Our frontend and backend engineers were also able to contribute to these gems as we experimented with them. We’re thankful to the maintainers for their very quick work in accepting our patches. To that end, we’d like to humbly offer a couple of our own open source projects:</p>

  675. 

  676. <p>We’re going to continue to extract more parts of our system that we’ve developed internally and release them as open source software, such as our loaders that efficiently batch ActiveRecord requests.</p>

  677. 

  678. <h2 id="the-future">The future</h2>

  679. 

  680. <p>The move to GraphQL marks a larger shift in our Platform strategy to be more transparent and more flexible. Over the next year, we’re going to keep iterating on our schema to bring it out of Early Access and into a wider production readiness.</p>

  681. 

  682. <p>Since our application engineers are using the same GraphQL platform that we’re making available to our integrators, this provides us with the opportunity to ship UI features <em>in conjunction with</em> API access. Our new Projects feature is a good example of this: the UI on the site is powered by GraphQL, and you can already use the feature programmatically. Using GraphQL on the frontend and backend eliminates the gap between what we release and what you can consume. We really look forward to making more of these simultaneous releases.</p>

  683. 

  684. <p>GraphQL represents a massive leap forward for API development. Type safety, introspection, generated documentation, and predictable responses benefit both the maintainers and consumers of our platform. We’re looking forward to our new era of a GraphQL-backed platform, and we hope that you do, too!</p>

  685. 

  686. <p>If you’d like to get started with GraphQL—including our new GraphQL Explorer that lets you make <img class="emoji" title=":sparkles:" alt=":sparkles:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" align="absmiddle"/>live queries<img class="emoji" title=":sparkles:" alt=":sparkles:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" align="absmiddle"/>, check out <a href="https://developer.github.com/early-access/graphql">our developer documentation</a>!</p>

  687.   </article>

  688. </section>

  689. 

  690. 

  691. <nav id="jumpto">

  692.   <p>

  693.     <a href="/david/blog/">Accueil du blog</a> |

  694.     <a href="http://githubengineering.com/the-github-graphql-api/">Source originale</a> |

  695.     <a href="/david/stream/2019/">Accueil du flux</a>

  696.   </p>

  697. </nav>

  698. 

  699. <footer>

  700.   <div>

  701.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  702.     <p>

  703.       Bonjour/Hi!

  704.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  705.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  706.     </p>

  707.     <p>

  708.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  709.     </p>

  710.     

  711.     <p>

  712.       Voici quelques articles choisis :

  713.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  714.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  715.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  716.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  717.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  718.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  719.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  720.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  721.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  722.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  723.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  724.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  725.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  726.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  727.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  728.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  729.     </p>

  730.     <p>

  731.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  732.     </p>

  733.     <p>

  734.       Je ne traque pas ta navigation mais mon

  735.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  736.       conserve des logs d’accès.

  737.     </p>

  738.   </div>

  739. </footer>

  740. <script type="text/javascript">

  741.   ;(_ => {

  742.     const jumper = document.getElementById('jumper')

  743.     jumper.addEventListener('click', e => {

  744.       e.preventDefault()

  745.       const anchor = e.target.getAttribute('href')

  746.       const targetEl = document.getElementById(anchor.substring(1))

  747.       targetEl.scrollIntoView({behavior: 'smooth'})

  748.     })

  749.   })()

  750. </script>