Apollo GraphQL

Transcript

1. Apollo GraphQL
2. About me Atte Huhtakangas Software Specialist at Futurice @attehuhtakangas jazmon
3. Apollo GraphQL
4. There are some problems with REST apis
5. (Some of) the problems with REST • Fragmentation of services • Caching • Static types :( • Performance insights & analytics • What is REST and what is a RESTful service? • Filters? ?filter=foo ?filter=[foo, bar] ?????? • API versioning sucks (for the API consumer) • Analytics server side are quite limited, no per field insights etc.
6. How does GraphQL these issues then?
7. Since time is limited, I’ll mostly focus on the client stuff :)
8. What is GraphQL then? • Data query language • Built with and still focused on client needs • Supports queries, mutations and subscriptions • You can combine different data sources (SQL, GQL, REST apis, my_data.txt)
9. query ToyQuery { allToys { id name } } GraphQL query
10. { "data": { "allToys": [ { "name": "Firetruck" }, { "name": "Teddy Bear" }, { "name": "Barbie Doll" } ] } } Response
11. query ToyQuery { redToys: allToys(filter: { color: Red }){ id name users @include(if:true) { # Some logic here name } } } GraphQL query
12. query ToyQuery { allToys { id name } redToys: allToys(filter: { color: Red }){ id name users @include(if:true) { # Some logic here name } } someToys: allToys(after: "1", first:5){ name } } GraphQL query
13. { "data": { "allToys": [ { "name": "Firetruck" }, { "name": "Teddy Bear" }, { "name": "Barbie Doll" } ], "redToys": [{ "id": "cjara83b0e00j0117p77nqa1o", "name": "Firetruck", "users": [] } ], "someToys": [ { "name": "Teddy Bear" }, { "name": "Barbie Doll" }, { "name": "Duck" }, { "name": "Hula hoop" }, { "name": "Chinpokomon" } ] } } Response
14. mutation CreateToy { createToy(color:Blue, name: "Balloon"){ id name } } GraphQL Mutation { "data": { "createToy": { "id": "cjb46yfksb5z60124b2npcefs", "name": "Balloon" } } } Response
15. Simple usage example with React import React from 'react'; import { graphql } from 'react-apollo'; import gql from 'graphql-tag'; const ToysForList = gql` query ToysQuery { allToys { id name } } `; ... export const ToyList = ({ allToys, refetchToys }) => ( <div> {allToys.map(toy => ( <div key={toy.id}> <span>{toy.name}</span> </div> ))} </div> ); export default graphql(ToysForList, { props: ({ ownProps, data: { loading, allToys, refetch } }) => ({ loading: loading, allToys: allToys, refetchToys: refetch, }), })(ToyList);
16. GraphiQL is awesome http://graphql.org/swapi-graphql/?query=%7B %0A%20%20allFilms%20%7B%0A%20%20 %20%20films%20%7B%0A%20%20%20%2 0%20%20title%0A%20%20%20%20%20%20 created%0A%20%20%20%20%7D%0A%20 %20%7D%0A%7D%0A&operationName=null
17. Apollo Client • GraphQL Client library • Less frontend data handling boilerplate. • Client available for all the modern web and mobile environments ◦ Bindings for React, Vue, Angular, Android, iOS, Ember & Meteor • Static type generation ◦ TypeScript, Flowtype, Scala.js, Swift & Java • Optimistic UI updates • Pagination support with cursors or offsets, not limited to Apollo Client • Schema stitching (on Apollo server) • Caching is handled in the GraphQL spec
18. Pros & cons of using GraphQL Pros: • Query language is nice to read and write • GraphiQL is great (like swagger but it comes for free) • Caching per field possible • Possible to limit queries to only fields you need • Less HTTP calls • Improved performance (less joins) Cons: • Less commonplace and familiar • Single point of failure for client applications for API calls • Less mature tools, the spec might still evolve • Some APIs might be harder to describe as graphs • Backend support is currently best in Node • Less conventions used (status codes, etc)
19. When to use? • You want nice things :) • You don’t use too cool for school techs • You understand the benefits of static typing • You want client devs to have a good time and are willing to discuss with them how the apis should look like • You want less boilerplate in frontend code • And you can use both REST and GraphQL if you like. They can co-exist :)
20. Thanks! Questions? Cool article about GraphQL vs REST: • https://philsturgeon.uk/api/2017/01/24/graphql-vs-rest-overview/