Type-Safe

GraphQL
Servers

Carlos Rufo / 06-08-2019 / Hong Kong JS and Node.js

๐Ÿ‘‹ , I'm Carlos!

๐Ÿ’ป Polyglot Engineer

๐Ÿ‡ญ๐Ÿ‡ฐ @GraphQLHongKong organizer

๐Ÿ“น @VueSchool_io instructor

๐Ÿš€ api.spacex.land author

ย 

@swcarlosrj

Agenda

  • Intro to GraphQL ๐ŸŒ (20')

  • Type-Safe ๐Ÿš€
    GraphQL Servers (20')

  • ๐Ÿ‘ฉโ€๐Ÿš€ Q&A ๐Ÿ‘จโ€๐Ÿš€ (15')

Intro to
GraphQL ๐ŸŒ

Why ๐Ÿค”

  • Efficiency

  • Type System

  • Predictability

  • Documentation

  • 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 ๐Ÿ”ฅ

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 HK ๐Ÿ‡ญ๐Ÿ‡ฐ Sept 29

GQL Summit ๐Ÿ‡บ๐Ÿ‡ธ Oct 29-31

Tutorials

How To GraphQL

Newsletters

GraphQL Weekly

Blogs

Open GraphQL

ย 

Thanks ๐Ÿ˜„

so much!

Hoping to ย ย  ย  ย  ย  ย  ย  ย  seeing y'all

ย 

ย 

@ GraphQL ๐Ÿ‡ญ๐Ÿ‡ฐ Hong Kong

๐Ÿ‘ฉโ€๐Ÿš€ Q&A ๐Ÿ‘จโ€๐Ÿš€ย  (10')

Type-Safe ๐Ÿš€
GraphQL Servers

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

Design

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

GraphQL
๐Ÿ’œ
REST

Design

๐Ÿ‘ฉโ€๐Ÿš€ Q&A ๐Ÿ‘จโ€๐Ÿš€

Thanks for coming ๐Ÿ˜„

Type-Safe GraphQL Servers
Hong Kong JS and Node.js

See you atย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย ?

Made with Slides.com