Prevent breaking production with GraphQL + TypeScript

Carlos Rufo / 14-11-2019 / API Days London πŸ‡¬πŸ‡§ 2019

πŸ‘‹ I'm Carlos

Software πŸ’» Consultant

GraphQL πŸ‡­πŸ‡° Organizer

SpaceX πŸš€ GraphQL API

Agenda

  1. 🌏 WHW GraphQL

  2. πŸš€ GraphQL + TypeScript

  3. πŸŒ– Live Coding

WHW 🌏
GraphQL

What 🀩

  • Specification

  • ​Query Language

  • Features

Specification

❌ It's not a library

❌ It's not a framework

βœ… It's a specification

Is a language-agnostic
specification to build APIs

Query Language

❌ It's not a library

❌ It's not a framework

βœ… It's a Graph Query Language specification

Features

πŸ”’ Strongly Typed

πŸ”Ž Introspectable

πŸ“ Queries, Mutations & Subscriptions

🌐 Transport agnostic

♻️ Efficient & Reusable

⚑️ Product development

How 🧐

πŸ”œ Live
Coding

Why πŸ€”

  • Efficiency

  • Docs

  • Tooling

  • Type System

Efficiency

  • Overfetching

  • Underfecthing

⚠️ Common issues in current APIs

Overfetching

"Fetch more data
that the client
actually needs"

Ask for what you need,
get exactly that πŸŽ†

Underfetching

Ask for multiple resources,
get all of that πŸŽ‡

"Fetch not enough data that the client
actually needs"

Docs

  • Auto-Generated

  • Typed

  • Up-to-Date

Β 

It'd be πŸ”₯

Tooling

Move faster with
powerful dev tools πŸ•Ή

  • In-browser API IDE

  • Auto-Gen Types

  • IDEs extensions

Type System

Type System

Explore your API ✨

GraphQL πŸš€
TypeScript

TypeScript

Typed supersetΒ of JavaScript that compiles to plain JavaScript

TypeScript & GraphQL

  • Starts and ends withΒ JavaScript

  • Strong tools for large apps

  • State of the art JavaScript

Introspect your API with GraphQL,
introspect your code with TS

Single Source of Truth

Type Generators

Auto-generateΒ types based
on your GraphQL implementation

Live coding

🌏 πŸš€ πŸŒ–

Agenda

  1. Exploring 🌏 Codebase

  2. GraphQL πŸš€ Servers

  3. GraphQL πŸŒ– Clients

SpaceX APIs

Check & contribute
github.com/spacexland

Slides

Thanks πŸ‡¬πŸ‡§

Made with Slides.com