Apollo iOS Workshop - Swift Alps, Crans-Montana, Switzerland - November 2019

A set of slides from my Swift Alps 2019 workshop on Apollo iOS, featuring our hotttt new in-progress tutorial.

https://www.apollographql.com/docs/ios/tutorial/tutorial-introduction/

Transcript

1. Apollo iOS Workshop Swift Alps | Crans-Montana, Switzerland | November 2019 Ellen Shapiro | @DesignatedNerd | apollographql.com
2. What the hell is GraphQL?
3. ! The Graph
5. In mathematics, and more specifically in graph theory, a graph is a structure amounting to a set of objects in which some pairs of the objects are in some sense "related" https://en.wikipedia.org/wiki/Graph(discretemathematics))
6. A GraphQL Graph is defined by a schema
7. "Within your schema, you define different types of nodes and how they connect/relate to one another." https://graphql.org/learn/thinking-in-graphs/
8. A list of things you can interact with
9. A list of valid ways to interact with those things
11. GraphQL Operations
12. GraphQL Operations → Query
13. GraphQL Operations → Query → Mutation
14. GraphQL Operations → Query → Mutation → Subscription
15. How is this different from REST APIs?
16. user/1/details
17. user/1/details { "user": { "id": 1, "firstName": "Ellen", "lastName": "Shapiro", "city": "Madison", "state": "Wisconsin", "country": "USA", "profilePicPath": "user/1/profile.jpg" } }
18. user/1/details { "user": { "id": 1, "firstName": "Ellen", "lastName": "Shapiro", "city": "Madison", "state": "Wisconsin", "country": "USA", "profilePicPath": "user/1/profile.jpg" } }
19. Schema type User { id: ID! firstName: String lastName: String profilePicPath: String city: String state: String country: String } This is written in GraphQL's Schema Definition Language
20. GraphQL Query query UserDetails { user(id: 1) { id firstName lastName profilePicPath } }
21. GraphQL Query query UserDetails { user(id: 1) { id firstName lastName profilePicPath } } JSON response { "data": { "user": { "id": 1, "firstName": "Ellen", "lastName": "Shapiro", "profilePicPath": "user/1/profile.jpg" } } }
22. GraphQL Query query UserDetails { user(id: 1) { id firstName lastName profilePicPath } } JSON response { "data": { "user": { "id": 1, "firstName": "Ellen", "lastName": "Shapiro", "profilePicPath": "user/1/profile.jpg" } } }
23. GraphQL Query query UserDetails { user(id: 1) { id firstName lastName profilePicPath } } JSON response { "data": { "user": { "id": 1, "firstName": "Ellen", "lastName": "Shapiro", "profilePicPath": "user/1/profile.jpg" } } }
24. GraphQL Query query UserDetails { user(id: 1) { firstName lastName profilePicPath } } JSON response { "data": { "user": { "firstName": "Ellen", "lastName": "Shapiro", "profilePicPath": "user/1/profile.jpg" } } }
25. ! Designer: Let's make the profile border the user's favorite color!
26. Schema type User { id: ID! firstName: String lastName: String profilePicPath: String city: String state: String country: String } This is written in GraphQL's Schema Definition Language
27. Schema type User { id: ID! firstName: String lastName: String profilePicPath: String city: String state: String country: String favoriteColor: String } This is written in GraphQL's Schema Definition Language
28. GraphQL Query query UserDetails { user(id: 1) { firstName lastName profilePicPath favoriteColor } } JSON response { "data": { "user": { "firstName": "Ellen", "lastName": "Shapiro", "profilePicPath": "user/1/profile.jpg", "favoriteColor": "0000FF" } } }
29. Pop Quiz!
30. Schema type User { id: ID! firstName: String lastName: String profilePicPath: String city: String state: String country: String favoriteColor: String } This is written in GraphQL's Schema Definition Language
31. Schema type User { id: ID! firstName: String lastName: String profilePicPath: String city: String state: String country: String favoriteColor: String } This is written in GraphQL's Schema Definition Language
32. Schema type User { id: ID! // <-- NOT optional firstName: String lastName: String profilePicPath: String city: String state: String country: String favoriteColor: String } This is written in GraphQL's Schema Definition Language
33. Schema type User { id: ID! firstName: String lastName: String profilePicPath: String city: String state: String country: String favoriteColor: String } This is written in GraphQL's Schema Definition Language
34. Schema type User { id: ID! firstName: String // <-- Optional lastName: String profilePicPath: String city: String state: String country: String favoriteColor: String } This is written in GraphQL's Schema Definition Language
35. What does Apollo iOS do on top of GraphQL?
36. schema + operations = code
37. schema + operations = code What is possible?
38. schema + operations = code What am I asking for?
39. schema + operations = code Is what I'm asking for actually possible?
40. schema + operations = code ! End to end type safe code
41. Generate Network + Parsing code Automagically
42. Generate Network + Parsing code Automagically** ** - may involve a whole lotta typescript
43. By Jorje Lascar, https://www.flickr.com/photos/jlascar/4503951595
44. public final class LaunchDetailsQuery: GraphQLQuery { public var id: GraphQLID public struct Data: GraphQLSelectionSet { public var launch: Launch? public struct Launch: GraphQLSelectionSet { public var __typename: String public var id: GraphQLID public var site: String? public var mission: Mission? public var rocket: Rocket? public var isBooked: Bool public struct Mission: GraphQLSelectionSet { public var __typename: String public var name: String? public var missionPatch: String? public struct Rocket: GraphQLSelectionSet { public var __typename: String public var name: String? public var type: String? } } } }
45. public final class LaunchDetailsQuery: GraphQLQuery { public var id: GraphQLID public struct Data: GraphQLSelectionSet { public var launch: Launch? public struct Launch: GraphQLSelectionSet { public var __typename: String public var id: GraphQLID public var site: String? public var mission: Mission? public var rocket: Rocket? public var isBooked: Bool public struct Mission: GraphQLSelectionSet { public var __typename: String public var name: String? public var missionPatch: String? } public struct Rocket: GraphQLSelectionSet { public var __typename: String public var name: String? public var type: String? } } } }
46. public final class LaunchDetailsQuery: GraphQLQuery { public var id: GraphQLID public struct Data: GraphQLSelectionSet { public var launch: Launch? public struct Launch: GraphQLSelectionSet { public var __typename: String public var id: GraphQLID public var site: String? public var mission: Mission? public var rocket: Rocket? public var isBooked: Bool public struct Mission: GraphQLSelectionSet { public var __typename: String public var name: String? public var missionPatch: String? } public struct Rocket: GraphQLSelectionSet { public var __typename: String public var name: String? public var type: String? } } } }
47. public final class LaunchDetailsQuery: GraphQLQuery { public var id: GraphQLID public struct Data: GraphQLSelectionSet { public var launch: Launch? public struct Launch: GraphQLSelectionSet { public var __typename: String public var id: GraphQLID public var site: String? public var mission: Mission? public var rocket: Rocket? public var isBooked: Bool public struct Mission: GraphQLSelectionSet { public var __typename: String public var name: String? public var missionPatch: String? } public struct Rocket: GraphQLSelectionSet { public var __typename: String public var name: String? public var type: String? } } } }
48. public final class LaunchDetailsQuery: GraphQLQuery { public var id: GraphQLID public struct Data: GraphQLSelectionSet { public var launch: Launch? public struct Launch: GraphQLSelectionSet { public var __typename: String public var id: GraphQLID public var site: String? public var mission: Mission? public var rocket: Rocket? public var isBooked: Bool public struct Mission: GraphQLSelectionSet { public var __typename: String public var name: String? public var missionPatch: String? } public struct Rocket: GraphQLSelectionSet { public var __typename: String public var name: String? public var type: String? } } } }
50. You can't even access what you didn't ask for
51. type User { id: ID! firstName: String lastName: String profilePicPath: String city: String state: String country: String favoriteColor: String }
52. Caching!
54. A few special toys for Apollo Server users
55. ! Brand new tutorial!
56. ! https://www.apollographql.com/docs/ios/tutorial/tutorial-introduction/ ⚠ WIP