Bringing GraphQL to iOS – Berlin GraphQL meetup Nov 2016

Transcript

1. Bringing GraphQL to iOS Martijn Walraven Open Source Developer, Meteor / Apollo
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
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] }
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
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?
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? } }
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 ?
46. Caching Optimistic UI Pagination Subscriptions
47. dev.apollodata.com
50. Know anyone who wants to work on GraphQL technology full time? We’re hiring! @martijnwalraven @apollographql http://www.apollodata.com github.com/apollostack