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

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/

C4861b1dfdf3bbb21faec4a1acdf183d?s=128

Ellen Shapiro

November 29, 2019
Tweet

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

  4. None
  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

  10. None
  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? } } } }
  49. None
  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!

  53. None
  54. A few special toys for Apollo Server users

  55. ! Brand new tutorial!

  56. ! https://www.apollographql.com/docs/ios/tutorial/tutorial-introduction/ ⚠ WIP