Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bringing GraphQL to iOS – Berlin GraphQL meetup Nov 2016

Bringing GraphQL to iOS – Berlin GraphQL meetup Nov 2016

1e6e009eb34acada083d876fbc6cc44f?s=128

Martijn Walraven

November 09, 2016
Tweet

Transcript

  1. Bringing GraphQL to iOS Martijn Walraven Open Source Developer, Meteor

    / Apollo
  2. None
  3. 2 0 1 6

  4. 2 0 1 6

  5. 2 0 1 6

  6. 2 0 1 5

  7. 2 0 1 2

  8. W H Y G R A P H Q L

    ?
  9. C L I E N T S E R V

    E R GET users/apollostack/repos [ { "id": 67563416, "name": "android-docs", "full_name": "apollostack/android-docs", "owner": { "login": "apollostack", "id": 17189275, "avatar_url": "https://avatars.githubusercontent.com/u/17189275?v=3", "gravatar_id": "", "url": "https://api.github.com/users/apollostack", "html_url": "https://github.com/apollostack", "followers_url": "https://api.github.com/users/apollostack/followers", "following_url": "https://api.github.com/users/apollostack/following{/other_user}", "gists_url": "https://api.github.com/users/apollostack/gists{/gist_id}", "starred_url": "https://api.github.com/users/apollostack/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/apollostack/subscriptions", "organizations_url": "https://api.github.com/users/apollostack/orgs", "repos_url": "https://api.github.com/users/apollostack/repos", "events_url": "https://api.github.com/users/apollostack/events{/privacy}", "received_events_url": "https://api.github.com/users/apollostack/received_events", "type": "Organization", "site_admin": false }, "private": false, Overfetching
  10. None
  11. C L I E N T S E R V

    E R GET repos/apollostack/apollo-client/contributors GET users/apollostack/repos GET repos/apollostack/react-apollo/contributors GET repos/apollostack/apollo-ios/contributors [{"login":"stubailo","id":448783,"avatar_url":"https:// avatars.githubusercontent.com/u/448783? v=3","gravatar_id":"","url":"https://api.github.com/users/ stubailo","html_url":"https://github.com/ stubailo","followers_url":"https://api.github.com/users/ stubailo/followers","following_url":"https://api.github.com/ [{"login":"stubailo","id":448783,"avatar_url":"https:// avatars.githubusercontent.com/u/448783? v=3","gravatar_id":"","url":"https://api.github.com/users/ stubailo","html_url":"https://github.com/ stubailo","followers_url":"https://api.github.com/users/ stubailo/followers","following_url":"https://api.github.com/ [{"login":"stubailo","id":448783,"avatar_url":"https:// avatars.githubusercontent.com/u/448783? v=3","gravatar_id":"","url":"https://api.github.com/users/ stubailo","html_url":"https://github.com/ stubailo","followers_url":"https://api.github.com/users/ stubailo/followers","following_url":"https://api.github.com/ [ { "id": 67563416, "name": "android-docs", "full_name": "apollostack/android-docs", "owner": { "login": "apollostack", "id": 17189275, "avatar_url": "https://avatars.githubusercontent.com/u/17189275?v=3", "gravatar_id": "", "url": "https://api.github.com/users/apollostack", "html_url": "https://github.com/apollostack", "followers_url": "https://api.github.com/users/apollostack/followers", "following_url": "https://api.github.com/users/apollostack/following{/other_user}", "gists_url": "https://api.github.com/users/apollostack/gists{/gist_id}", "starred_url": "https://api.github.com/users/apollostack/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/apollostack/subscriptions", "organizations_url": "https://api.github.com/users/apollostack/orgs", "repos_url": "https://api.github.com/users/apollostack/repos", "events_url": "https://api.github.com/users/apollostack/events{/privacy}", "received_events_url": "https://api.github.com/users/apollostack/received_events", "type": "Organization", "site_admin": false }, "private": false, "html_url": "https://github.com/apollostack/android-docs", "description": "[WIP] :book: Docs for using Apollo with Android", "fork": false, "url": "https://api.github.com/repos/apollostack/android-docs", "forks_url": "https://api.github.com/repos/apollostack/android-docs/forks", "keys_url": "https://api.github.com/repos/apollostack/android-docs/keys{/key_id}", "collaborators_url": "https://api.github.com/repos/apollostack/android-docs/collaborators{/collaborator}", "teams_url": "https://api.github.com/repos/apollostack/android-docs/teams", "hooks_url": "https://api.github.com/repos/apollostack/android-docs/hooks", Extra roundtrips
  12. This is not to say REST can’t be made performant,

    but it comes at a cost
  13. Fundamental tension between efficiently satisfying the data needs of specific

    clients, and keeping the number of endpoints manageable on the server
  14. Let clients specify their own data needs against the capabilities

    exposed by the server
  15. Capabilities Data needs type Post { id: Int! title: String

    author: Author votes: Int } Q U E R Y S C H E M A query { posts { title } } { "data": { "posts": [ { "title": "Introduction to GraphQL" }, { "title": "GraphQL Rocks" }, { "title": "Advanced GraphQL" } ] } }
  16. Not just about performance

  17. GraphQL has been designed with the needs of product developers

    in mind
  18. “GraphQL is unapologetically driven by the requirements of views and

    the front-end engineers that write them.”
  19. “GraphQL starts with their way of thinking and requirements and

    builds the language and runtime necessary to enable that.”
  20. Schema acts as a strongly typed 
 and self-documenting contract

    
 between frontend and backend type Post { id: Int! title: String author: Author votes: Int } type Author { id: Int! firstName: String lastName: String posts: [Post] }
  21. None
  22. www.graphql.org

  23. S E R V E R

  24. GraphQL is an application-level query language built on top of

    any sort of data source
  25. const authors = [ { id: 1, firstName: 'Tom', lastName:

    'Coleman' }, { id: 2, firstName: 'Sashko', lastName: 'Stubailo' }, ]; const posts = [ { id: 1, authorId: 1, title: 'Introduction to GraphQL', votes: 2 }, { id: 2, authorId: 2, title: 'GraphQL Rocks', votes: 3 }, { id: 3, authorId: 2, title: 'Advanced GraphQL', votes: 1 }, ]; const resolveFunctions = { Query: { posts() { return posts; }, }, Author: { posts(author) { return filter(posts, { authorId: author.id }); }, }, Post: { author(post) { return find(authors, { id: post.authorId }); }, } };
  26. GraphQL requests Backend fetches

  27. Any backend Any client Any language

  28. None
  29. C L I E N T

  30. curl -X POST -H 'Content-Type:application/json' -d '{ "query": "{ posts

    { title } }"}' http://localhost:8080/graphql { "data": { "posts": [ { "title": "Introduction to GraphQL" }, { "title": "GraphQL Rocks" }, { "title": "Advanced GraphQL" } ] } }
  31. Raw JSON?

  32. None
  33. type Post { id: Int! title: String author: Author votes:

    Int } type Author { id: Int! firstName: String lastName: String posts: [Post] }
  34. type Post { id: Int! title: String author: Author votes:

    Int } type Author { id: Int! firstName: String lastName: String posts: [Post] } Type models struct Post { let id: Int? let title: String? let author: Author? let votes: Int? } struct Author { let id: Int? let firstName: String? let lastName: String? let posts: [Post]? }
  35. query { posts { title author { firstName } }

    } Query models struct Post { let title: String? let author: Author? struct Author { let firstName: String? } }
  36. GraphQL is a great fit for 
 component-based UI development

    fragment PostDetails on Post { title author { firstName } }
  37. query { posts { ...PostDetails } } fragment PostDetails on

    Post { title author { firstName } } Fragment models struct PostDetails { let title: String? let author: Author? struct Author { let firstName: String? } }
  38. None
  39. Static type safety from your server to your UI

  40. Empowers and unblocks product developers

  41. Lets backend developers focus on exposing capabilities, not writing endpoints

    for individual clients
  42. Continuous evolution of a schema instead of having to support

    multiple versions of your API
  43. 2 0 1 2

  44. W H A T ’ S N E X T

    ?
  45. None
  46. Caching Optimistic UI Pagination Subscriptions

  47. dev.apollodata.com

  48. None
  49. None
  50. Know anyone who wants to work on GraphQL technology full

    time? We’re hiring! @martijnwalraven @apollographql http://www.apollodata.com github.com/apollostack