Slide 1

Slide 1 text

Apollo iOS Workshop Swift Alps | Crans-Montana, Switzerland | November 2019 Ellen Shapiro | @DesignatedNerd | apollographql.com

Slide 2

Slide 2 text

What the hell is GraphQL?

Slide 3

Slide 3 text

! The Graph

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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))

Slide 6

Slide 6 text

A GraphQL Graph is defined by a schema

Slide 7

Slide 7 text

"Within your schema, you define different types of nodes and how they connect/relate to one another." https://graphql.org/learn/thinking-in-graphs/

Slide 8

Slide 8 text

A list of things you can interact with

Slide 9

Slide 9 text

A list of valid ways to interact with those things

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

GraphQL Operations

Slide 12

Slide 12 text

GraphQL Operations → Query

Slide 13

Slide 13 text

GraphQL Operations → Query → Mutation

Slide 14

Slide 14 text

GraphQL Operations → Query → Mutation → Subscription

Slide 15

Slide 15 text

How is this different from REST APIs?

Slide 16

Slide 16 text

user/1/details

Slide 17

Slide 17 text

user/1/details { "user": { "id": 1, "firstName": "Ellen", "lastName": "Shapiro", "city": "Madison", "state": "Wisconsin", "country": "USA", "profilePicPath": "user/1/profile.jpg" } }

Slide 18

Slide 18 text

user/1/details { "user": { "id": 1, "firstName": "Ellen", "lastName": "Shapiro", "city": "Madison", "state": "Wisconsin", "country": "USA", "profilePicPath": "user/1/profile.jpg" } }

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

GraphQL Query query UserDetails { user(id: 1) { id firstName lastName profilePicPath } }

Slide 21

Slide 21 text

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" } } }

Slide 22

Slide 22 text

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" } } }

Slide 23

Slide 23 text

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" } } }

Slide 24

Slide 24 text

GraphQL Query query UserDetails { user(id: 1) { firstName lastName profilePicPath } } JSON response { "data": { "user": { "firstName": "Ellen", "lastName": "Shapiro", "profilePicPath": "user/1/profile.jpg" } } }

Slide 25

Slide 25 text

! Designer: Let's make the profile border the user's favorite color!

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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" } } }

Slide 29

Slide 29 text

Pop Quiz!

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

What does Apollo iOS do on top of GraphQL?

Slide 36

Slide 36 text

schema + operations = code

Slide 37

Slide 37 text

schema + operations = code What is possible?

Slide 38

Slide 38 text

schema + operations = code What am I asking for?

Slide 39

Slide 39 text

schema + operations = code Is what I'm asking for actually possible?

Slide 40

Slide 40 text

schema + operations = code ! End to end type safe code

Slide 41

Slide 41 text

Generate Network + Parsing code Automagically

Slide 42

Slide 42 text

Generate Network + Parsing code Automagically** ** - may involve a whole lotta typescript

Slide 43

Slide 43 text

By Jorje Lascar, https://www.flickr.com/photos/jlascar/4503951595

Slide 44

Slide 44 text

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? } } } }

Slide 45

Slide 45 text

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? } } } }

Slide 46

Slide 46 text

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? } } } }

Slide 47

Slide 47 text

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? } } } }

Slide 48

Slide 48 text

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? } } } }

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

You can't even access what you didn't ask for

Slide 51

Slide 51 text

type User { id: ID! firstName: String lastName: String profilePicPath: String city: String state: String country: String favoriteColor: String }

Slide 52

Slide 52 text

Caching!

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

A few special toys for Apollo Server users

Slide 55

Slide 55 text

! Brand new tutorial!

Slide 56

Slide 56 text

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