End-to-end

Type-Safe
GraphQL
Apps

Carlos Rufo / 04-03-2019 / London JS Community Meetup

๐Ÿ‘‹ , I'm Carlos!

OSS Developer โŒ›๏ธ

@swcarlosrj

Agenda

  • Intro to GraphQL๐Ÿ’ก(30')

  • ๐Ÿ›‹ Break (10')

  • TypeScript ๐Ÿ’™ GraphQL (30')

  • ๐Ÿ™‹โ€โ™€๏ธ Q&A ๐Ÿ™‹โ€โ™‚๏ธ (15')

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

ย 

It'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

It's not a library,
nor a framework

Is a language-agnostic
specification for your API!

Query Language

It's not a library,
nor a framework

Is a Graph QL
for your API!

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

Confs

GQL Asia ๐Ÿ‡ฎ๐Ÿ‡ณ Apr 12-13ย 

GQL Conf ๐Ÿ‡ฉ๐Ÿ‡ช Jun 20-21
GQL Summit ๐Ÿ‡บ๐Ÿ‡ธ Oct 29-31

Tutorials

How To GraphQL

Newsletters

GraphQL Weekly

Blogs

Open GraphQL

๐Ÿš€ Live
Coding

Design

Let's make
this work out ๐Ÿ’ช

๐Ÿ›‹ Break (15')

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
GraphQL implementation

Implementations

Schema First
๐Ÿ‘ Fully client-focused (SDL)
๐Ÿ‘Ž Code reuse, Type safety

๐Ÿ›  Apollo Server

Code/Model First
๐Ÿ‘ Code reuse, T
ype safety
๐Ÿ‘Ž Most "distance" between code-schema
๐Ÿ›  GraphQL Nexus

Resolver First
๐Ÿ‘ Lowest abstraction level
๐Ÿ‘Ž Verbose, Less client focus
๐Ÿ›  graphql.js

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

Let's evolve
our B/FE in a
Type-Safe way โœจ

GraphQL
๐Ÿ’œ
REST

Design

๐Ÿ™‹โ€โ™€๏ธ Q&A ๐Ÿ™‹โ€โ™‚๏ธ

๐Ÿ”ฅ Available 4 hire ๐Ÿ”ฅ

๐Ÿ‘จโ€๐Ÿ’ป Infra/Product Engineer
๐Ÿ›  TypeScript, GraphQL, React
๐Ÿš€ Launched APIs & Clients
๐ŸŒ On site - Remote

Let's build & scale โšก๏ธ apps together!

Thanks for coming ๐Ÿ˜„

End-to-end Type-Safe GraphQL Apps
London JS Community Meetup

See you in the next one?

End-to-end Type-Safe GraphQL Apps - London JS Community

By Carlos Rufo

End-to-end Type-Safe GraphQL Apps - London JS Community

  • 505