larlet-fr-david-cache/cache/09f03c20156f63a521120c9dddda68f9/index.md

title: GraphQL in the age of REST APIs
url: https://medium.com/chute-engineering/graphql-in-the-age-of-rest-apis-b10f2bf09bba
hash_url: 09f03c20156f63a521120c9dddda68f9

<p name="f9f0" id="f9f0" class="graf--p">I’ve been excited about GraphQL since it was teased in January, and now as of Thursday <a href="http://facebook.github.io/graphql/" data-href="http://facebook.github.io/graphql/" class="markup--anchor markup--p-anchor" rel="nofollow">the spec is finally available</a>. Huge thanks to <a href="https://twitter.com/leeb" data-href="https://twitter.com/leeb" class="markup--anchor markup--p-anchor" rel="nofollow">@leeb</a>, <a href="https://twitter.com/dlschafer" data-href="https://twitter.com/dlschafer" class="markup--anchor markup--p-anchor" rel="nofollow">@dlschafer</a> and <a href="https://twitter.com/schrockn" data-href="https://twitter.com/schrockn" class="markup--anchor markup--p-anchor" rel="nofollow">@schrockn</a> for getting it out!</p><p name="d869" id="d869" class="graf--p">If you’re interested in the details, it’s worth checking out the spec itself, but the most important thing is:</p><blockquote name="eb53" id="eb53" class="graf--pullquote pullquote">GraphQL is not a language. It’s an API.</blockquote><p name="3ab2" id="3ab2" class="graf--p">GraphQL tries to improve the way clients communicate with remote systems. An Application Programming Interface. As such, it’s a direct replacement for REST.</p><p name="44f9" id="44f9" class="graf--p">GraphQL doesn’t require any specific technology or language. A GraphQL server can be built in any technology, just like a REST server.</p></div><div class="section-inner layoutSingleColumn"><p name="55af" id="55af" class="graf--p">GraphQL’s power comes from a simple idea — instead of defining the structure of responses on the server, the flexibility is given to the client. Each request specifies what fields and relationships it wants to get back, and GraphQL will construct a response tailored for this particular request. The benefit: only one round-trip is needed to fetch all the complex data that might otherwise span multiple REST endpoints, and at the same time only return the data that are actually needed and nothing more.</p><blockquote name="b989" id="b989" class="graf--pullquote pullquote">That is huge. Like moving from SOAP to REST.</blockquote><p name="4c02" id="4c02" class="graf--p">Another advantage that I see in GraphQL is that it has a built-in type introspection. That means you can describe the entire API programmatically, and we can build tools that drastically improve development. REST APIs don’t have that — although there are several proposals for a REST API schema, there isn’t one standard that everyone would use. SOAP has WSDL, but it has many problems of its own.</p><blockquote name="8b12" id="8b12" class="graf--pullquote pullquote">So does it mean REST is over?</blockquote><p name="3c6d" id="3c6d" class="graf--p">The industry has invested a lot in REST APIs, in fact the area is rapidly growing, with many companies opening their APIs to the outside world, and many startups building tools to support the ecosystem.</p><p name="3718" id="3718" class="graf--p">Currently, the only production use case of GraphQL is at Facebook. It works great for them but we’re still yet to see how it will work for everyone else.</p><p name="4b71" id="4b71" class="graf--p">Even if GraphQL was so much better than REST, it would take at least 10 years for the industry to switch. 10 years on the Internet is like a lifetime — heck, we might not even have React anymore.</p><p name="798b" id="798b" class="graf--p">It’s likely that <strong class="markup--strong markup--p-strong">if GraphQL proves to be effective, it will co-exist with REST APIs</strong>. Some APIs will use REST, some will use GraphQL. Some might support both.</p><blockquote name="2a48" id="2a48" class="graf--pullquote pullquote">GraphQL with REST</blockquote><p name="43e4" id="43e4" class="graf--p">Apart from the GraphQL spec, a <a href="https://github.com/graphql/graphql-js" data-href="https://github.com/graphql/graphql-js" class="markup--anchor markup--p-anchor" rel="nofollow">reference implementation in JavaScript</a> is also available. A typical GraphQL server implementation maps the GraphQL query to database queries. However, it can have any kind of underlying storage — even not having any and just acting as a proxy for REST APIs, transforming GraphQL queries to remote REST requests.</p><figure name="965d" id="965d" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*GRQJg_zgdyVxVw_0QSikLg.png" data-width="1532" data-height="698" data-action="zoom" data-action-value="1*GRQJg_zgdyVxVw_0QSikLg.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*GRQJg_zgdyVxVw_0QSikLg.png"/></div></figure><p name="0ed5" id="0ed5" class="graf--p">Current REST APIs can be exposed to GraphQL clients by building a GraphQL server as a wrapper around the REST API. A client would talk to a GraphQL server which would translate the query to (multiple) REST APIs. Client only sends one request, and receives the smallest possible response it needs. The server has much better bandwidth so the extra queries are not so critical.</p><blockquote name="42eb" id="42eb" class="graf--pullquote pullquote">Relay</blockquote><p name="f85a" id="f85a" class="graf--p">Relay is a GraphQL client library for React (to be open sourced by Facebook in August). It has pluggable transport layer that abstracts fetching data from a GraphQL server. The “server” doesn’t have to be running remotely though; it could be packaged as part of the client app itself.</p><p name="f7f8" id="f7f8" class="graf--p">I’ve been working on an experimental project called <a href="https://medium.com/p/a1f55d4b7d91" data-href="https://medium.com/p/a1f55d4b7d91" class="markup--anchor markup--p-anchor">Turbine</a>, which implements this pattern. However, it hooks directly to Relay components, and thus is separate from Relay.</p><figure name="0ab4" id="0ab4" class="graf--figure graf--layoutOutsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*IuakxLN35T0DeVh3orTfAg.png" data-width="1148" data-height="712" data-action="zoom" data-action-value="1*IuakxLN35T0DeVh3orTfAg.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*IuakxLN35T0DeVh3orTfAg.png"/></div></figure><p name="8018" id="8018" class="graf--p">I’ve now started adapting Turbine as a transport layer for Relay, called graphql-rest (at least for now). Relay will manage the local state, handle optimistic updates and many other amazing things, and graphql-rest will translate the queries to REST calls.</p><p name="251c" id="251c" class="graf--p">At the same time, graphql-rest could be used as a GraphQL server, too. Without changing a line of code, the developer could then choose whether they want to optimize for data transport (and run graphql-rest as a server that the client app talks to), or have a simpler architecture (bundle graphql-rest with the app and run it on the client).</p><p name="62c0" id="62c0" class="graf--p">If you want to follow graphql-rest development, see <a href="https://github.com/chute/graphql-rest" data-href="https://github.com/chute/graphql-rest" class="markup--anchor markup--p-anchor" rel="nofollow">https://github.com/chute/graphql-rest</a>.</p><p name="03b1" id="03b1" class="graf--p">Discuss on HN: <a href="https://news.ycombinator.com/item?id=9847758" data-href="https://news.ycombinator.com/item?id=9847758" class="markup--anchor markup--p-anchor" rel="nofollow">https://news.ycombinator.com/item?id=9847758</a></p><blockquote name="8dcf" id="8dcf" class="graf--blockquote graf--last">Thanks to <a href="https://twitter.com/en_JS" data-href="https://twitter.com/en_JS" class="markup--anchor markup--blockquote-anchor" rel="nofollow">@en_js</a> for providing insights into how Relay works.</blockquote>