Talk given at Swift Summit 2016, in San Francisco CA by Sommer Panage. Discusses how GraphQL is beneficial to mobile apps and how it can interface with Swift via up-and-coming code generation.
4. The GraphQL Schema
type User {
name: String!
id: Int!
email: String
twitter: String
}
4 — Sommer Panage • @sommer • Swift Summit 2016
5. Instead of hitting a REST endpoint like...
https://mybackend.com/api/user?id=1
5 — Sommer Panage • @sommer • Swift Summit 2016
6. I write a query like...
{
user(id: 1) {
name
email
twitter
}
}
And send it to my GraphQL endpoint
https://mybackend.com/graphql
6 — Sommer Panage • @sommer • Swift Summit 2016
7. And I get back a JSON response like...
{
"data": {
"name": "Sommer Panage",
"email": "sommer@panage.org",
"twitter": "@sommer"
}
}
7 — Sommer Panage • @sommer • Swift Summit 2016
8. Why is GraphQL such a
big deal for mobile?
8 — Sommer Panage • @sommer • Swift Summit 2016
9. Let's write an app
9 — Sommer Panage • @sommer • Swift Summit 2016
10. In a REST world, we'd hit this endpoint:
http://swapi.co/api/people/1/
And we'd get back...
10 — Sommer Panage • @sommer • Swift Summit 2016
12. And then...we'd make two more calls to...
http://swapi.co/api/starships/12/
and
http://swapi.co/api/starships/22/
12 — Sommer Panage • @sommer • Swift Summit 2016
18. So, why is GraphQL such a big deal for mobile?
1. Ask and ye shall receive!
2. Fewer round trips!
3. Less client logic around data!
18 — Sommer Panage • @sommer • Swift Summit 2016
19. Wait just a minute...
19 — Sommer Panage • @sommer • Swift Summit 2016
20. Our Star Wars Character model
struct SWCharacter {
let name: String
let heightInCm: Int
let massInKg: Int
let hairColorDescriptor: String
let skinColorDescriptor: String
let eyeColorDescriptor: String
let birthYear: StarWarsUniverse.Year
let gender: StarWarsUniverse.Gender
let homeworld: StarWarsUniverse.Planet
let films: [SWFilm]
let species: [StarWarsUniverse.Species]
let vehicles: [StarWarsUniverse.Vehicle]
let starships: [StarWarsUniverse.Starship]
let imageURL: URL?
}
20 — Sommer Panage • @sommer • Swift Summit 2016
21. Our Star Wars Character model
struct SWCharacter {
let name: String?
let heightInCm: Int?
let massInKg: Int?
let hairColorDescriptor: String?
let skinColorDescriptor: String?
let eyeColorDescriptor: String
let birthYear: StarWarsUniverse.Year?
let gender: StarWarsUniverse.Gender?
let homeworld: StarWarsUniverse.Planet?
let films: [SWFilm]?
let species: [StarWarsUniverse.Species]?
let vehicles: [StarWarsUniverse.Vehicle]?
let starships: [StarWarsUniverse.Starship]?
let imageURL: URL?
}
21 — Sommer Panage • @sommer • Swift Summit 2016
22. Swift, No!!!!
struct SWCharacter {
let name: String?
let heightInCm: Int?
let massInKg: Int?
let hairColorDescriptor: String?
let skinColorDescriptor: String?
let eyeColorDescriptor: String
let birthYear: StarWarsUniverse.Year?
let gender: StarWarsUniverse.Gender?
let homeworld: StarWarsUniverse.Planet?
let films: [SWFilm]?
let species: [StarWarsUniverse.Species]?
let vehicles: [StarWarsUniverse.Vehicle]?
let starships: [StarWarsUniverse.Starship]?
let imageURL: URL?
}
22 — Sommer Panage • @sommer • Swift Summit 2016
23. 23 — Sommer Panage • @sommer • Swift Summit 2016
24. Let's model the data how we want it, not how it is
→ 1 View Controller
→ 1 Query
→ 1 Data Model
24 — Sommer Panage • @sommer • Swift Summit 2016
25. 25 — Sommer Panage • @sommer • Swift Summit 2016
26. query AllCharacters {
allPeople {
edges {
node {
id
name
homeworld {
name
}
}
}
}
}
26 — Sommer Panage • @sommer • Swift Summit 2016
27. struct AllCharactersData {
let people: [Person]
struct Person {
let id: String
let name: String
let homeworld: Homeworld
struct Homeworld {
let name: String
}
}
}
27 — Sommer Panage • @sommer • Swift Summit 2016
28. query Character($id: ID) {
person (id: $id) {
id
height,
mass,
hairColor,
eyeColor,
imageURL,
starshipConnection {
edges {
node {
name
}
}
}
}
}
28 — Sommer Panage • @sommer • Swift Summit 2016
29. struct CharacterData {
struct Person {
let id: String
let height: Int
let mass: Int
let hairColor: String
let eyeColor: String
let imageURL: URL?
let starshipConnect: [Starship]
struct Starship {
let name: String
}
}
}
29 — Sommer Panage • @sommer • Swift Summit 2016
30. By having query / view-
data based models, we
no longer need optionals
everywhere!
30 — Sommer Panage • @sommer • Swift Summit 2016
31. But our parsing code still looks like...
let parsedData = try JSONSerialization.jsonObject(with: data, options: []) as! [String: Any]
self.id = parsedData["id"] as! String
self.name = parsedData["name"] as! String
self.homeworld = Homeworld(dict: parsedData["homeworld"] as! [String : Any])
Ugh!
31 — Sommer Panage • @sommer • Swift Summit 2016
32. Code Gen!
32 — Sommer Panage • @sommer • Swift Summit 2016
33. 33 — Sommer Panage • @sommer • Swift Summit 2016
34. Apollo's iOS GraphQL Client for Swift
→ Compile-time safety
→ Inline validation errors for GraphQL
→ No wasted cycles on query-gen
34 — Sommer Panage • @sommer • Swift Summit 2016
40. Aren't you supposed to
use GraphQL with React
Native?
40 — Sommer Panage • @sommer • Swift Summit 2016
41. GraphQL + Swift
-> GraphQL shines on mobile
-> Swift gives us types and compile time safety
-> React Native is new and exciting, but that comes
with challenges too
41 — Sommer Panage • @sommer • Swift Summit 2016
43. Pros to GraphQL + Swift
→ Fewer requests for data
→ Getting the exact data you need
→ Code gen -> no janky parsing code
→ Models that are reflective of your views
→ A strongly typed backend schema
43 — Sommer Panage • @sommer • Swift Summit 2016
44. Cons to GraphQL + Swift
→ Not a lot of tooling yet
→ Best practices still emerging
→ Poorly defined schema becomes a big client
problem
→ Not as good for endpoints requiring heavy logic
44 — Sommer Panage • @sommer • Swift Summit 2016
46. Check out
→ Apollo iOS Client: Documentation and info on
Apollo's awesome Swift iOS GraphQL client
→ 5 benefits of static GraphQL Queries: Blog post
from Apollo
→ Bringing GraphQL to iOS: Blog post from Apollo
→ GraphQL First: A better way to build modern apps:
Blog post from Apollo
46 — Sommer Panage • @sommer • Swift Summit 2016
47. Check out...con’t
→ GraphQL for mobile: Blog post from Artsy
→ Relay: Thinking in GraphQL: Post from FB on
Caching
47 — Sommer Panage • @sommer • Swift Summit 2016
48. Thank you!!
Come ask me questions about GraphQL + Swift
or about Accessibility!
48 — Sommer Panage • @sommer • Swift Summit 2016
