Carlos Rufo
Polyglot Engineer • @GraphQLHongKong organizer • api.spacex.land author • he/him
End-to-end
Type-Safe
GraphQL
Apps
Carlos Rufo / 26-02-2019 / TypeScript NYC Meetup
👋 , I'm Carlos!
OSS Developer ⌛️
Agenda
-
Intro to GraphQL💡
-
TypeScript 💙 GraphQL
-
🚀 Live Coding
-
🙋♀️ Q&A 🙋♂️
Intro to
GraphQL💡
Why 🤔
Efficiency
Type System
Predictability
Documentation
Versioning & Tooling
Efficiency
-
Overfetching
-
Underfecthing
⚠️ Common issues in current APIs
Overfetching
Ask for what you need,
get exactly that 🎆
"Fetch more data
that the client
actually needs"
Overfetching
Save resources,
respond faster ⚡️
Efficiency
🤩 Desktop ~ 100%
😧 Mobile ~ 60%
😱 Watch ~ 20%
Reusability
😃 /desktop/launches
🤨 /mobile/launches
😤 /watch/launches
Underfetching
Ask for nested resources,
get all of that 🎇
"Fetch not enough data that the client
actually needs"
Underfetching
Handle data
in your 📱,
instead over the 🌐!
REST
🤩 /launches - 1 HTTP/DB
😧 /rocket/:id - 'N' HTTP/DB
😭 Client parse functions
GraphQL
😃 /graphql - 1 HTTP/'N' DB
😎 No client parse functions
Type System
Predictability
Explore your API ✨
Docs
-
Auto-Generated
-
Typed
-
Up-to-Date
That'd be 🔥
Versioning
Tooling
Move faster with
powerful dev tools 🕹
-
In-browser API IDE
-
Auto-Gen Types
-
IDEs extensions
How 🧐
🔜 Live
Coding
What 🤩
-
Specification
-
Query Language
-
Features
-
History
-
Learn
Specification
Neither is a library,
nor a framework
Is a language-agnostic
specification to build APIs!
Query Language
Is a Graph QL
for your API!
Neither is a library,
nor a framework
Features
💪 Strongly Typed
🔎 Introspection
📝 Queries, Mutations & Subscriptions
🌐 Transport agnostic
♻️ Efficient & Reusable
⚡️ Product development
History
😅 Several clients support need
🤔 Rethink app data-fetching
💡 "Write once, run anywhere"
Learn
Docs
Tutorials
Newsletters
Books
Blogs
TypeScript
💙
GraphQL
Let's recap about typed languages
Static 👉 Compile-Time 👉 Java
Dynamic 👉 Run-Time 👉 JavaScript
JavaScript 👈 No types 👈 Weakly
TypeScript 👈 Types 👈 Strongly
Type-Safe Apps
💪 Typed
DB & BE & FE
➕
DB ✅ BE ✅ FE
Types
Single Source of Truth
Auto-generate types
based on your
Single Source of Truth
Implementations
Schema First
👍 Fully client-focused (SDL)
👎 Code reuse, Type safety
🛠 Apollo Server
Resolver First
👍 Lowest abstraction level
👎 Verbose, Less client focus
🛠 graphql.js
Code/Model First
👍 Code reuse, Type safety
👎 Most "distance" between code-schema
🛠 GraphQL Nexus
Schema First
type Query {
launches: [Launch]
launch(id: ID!): Launch
}
type Launch {
id: ID!
name: String
details: String
image: String
rocket: Rocket
ship: Ship
}
type Rocket {
id: ID!
name: String
}
type Ship {
id: ID!
name: String
port: String
image: String
}Query: {
launches: async (obj, args, context) => {
const data = await context.db
.collection('launch')
.toArray();
return data;
},
launch: async (obj, { id }, context) => {
const [data] = await context.db
.collection('launch')
.find({ id })
.toArray();
return data;
},
}Type Definitions
Resolvers
Type Generators
Auto-generate types based
on your GraphQL implementation
🚀 Live
Coding
Design
Let's make
this work out 💪
GraphQL
💜
REST
🙋♀️ Q&A 🙋♂️
🔥 Available 4 hire 🔥
👨💻 Infra/Product Engineer
🛠 TypeScript, GraphQL, React
🚀 Launched APIs & Clients
🌏 Remote (CST)
Let's build & scale ⚡️ apps together!
Thanks for coming 😄
tsc --version # 3.3
TypeScript NYC Meetup
See you in the next one?
End-to-end Type-Safe GraphQL Apps - TypeScript NYC
By Carlos Rufo
