End-to-end

Type-Safe

GraphQL

Apps

Carlos Rufo / 08-02-2020 / JavaScript Bangkok ๐Ÿ‡น๐Ÿ‡ญ

๐Ÿ‘ Kudos JSBangkok

Thanks to ๐Ÿ™๐Ÿป
Speakers, Sponsors,

Organizers but specially,

to you all attendees โ™ฅ๏ธ

๐ŸŽ‰ Largest JavaScript Conference in Asia ๐ŸŽŠ

๐Ÿ‘‹ I'm Carlos

Software ๐Ÿ’ป Consultant

GraphQL ๐Ÿ‡ญ๐Ÿ‡ฐ Organizer

SpaceX ๐Ÿš€ GraphQL API

Agenda

  1. ๐ŸŒ GraphQL Intro

  2. ๐Ÿš€ TS loves GQL

  3. ๐ŸŒ– Live-coding

But before start...

It's ๐ŸŽ‰ ๐ŸŽŠ ๐ŸŽˆ
DevJokes Time

Check & contribute ๐Ÿ‘‡
github.com/shrutikapoor08/devjoke

DevJokes time ๐ŸŽ‰

How do you comfort a JavaScript bug?

You console it ๐Ÿ˜‚

DevJokes time ๐ŸŽ‰

DevJokes time ๐ŸŽŠ

Why do functions always break up?

Because they have constant arguments.

*๐Ÿฅ ba dum tss

DevJokes time ๐ŸŽŠ

"Your site will not have vulnerabilities...

if you don't find them"

DevJokes time ๐ŸŽˆ

What the developer said to the repository?

FORK YOU! ๐Ÿคฃ

Intro ๐ŸŒ

GraphQL

๐Ÿค” What
๐Ÿง Why
๐Ÿคฉ How

What ๐Ÿค”

  • Specification

  • Query Language

  • Features

  • Learn

Specification

โŒ It's not a library,
โŒ nor a framework

โœ… Is a language-agnostic
specification to build APIs

Query Language

โœ… Is a Graph QL
to build APIs

โŒ It's not a library,
โŒ nor a framework

Features

๐Ÿ’ช Strongly Typed

๐Ÿ”Ž Introspectable

๐Ÿ“ Queries, Mutations, Subscriptions

โ™ป๏ธ Efficient & Reusable

๐ŸŒ Transport agnostic

โšก๏ธ Product development

Learn

Confs

GQL Asia ๐Ÿ‡ฎ๐Ÿ‡ณ Feb 20-22ย 

GQL Conf ๐Ÿ‡ฉ๐Ÿ‡ช Jun ?

GQL HK ๐Ÿ‡ญ๐Ÿ‡ฐ Sept ?

GQL Summit ๐Ÿ‡บ๐Ÿ‡ธ Oct 27-28

Tutorials

FullStack GraphQL

Newsletters

GraphQL Weekly

Blogs

Open GraphQL

Why ๐Ÿคฉ

  • Type System

  • Predictability

  • Efficiency

  • Docs & Tooling

Type System

Predictability

Introspect your API โœจ

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"

Underfetching

Ask for nested 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

How ๐Ÿง

๐Ÿ”œ Live
Codingย 

TypeScript
โ™ฅ๏ธ

GraphQL

TypeScript

Typed supersetย of JavaScript that compiles to plain JavaScript

TypeScript ๐Ÿค GraphQL

  • Starts and ends withย JavaScript
  • Strong tooling for large apps
  • State of the art JavaScript

Introspect your API with GraphQL
Introspect your codebase with TS

Single Source of Truth

Type Generators

Auto-generateย types based
on your GraphQL implementation

Live coding

๐ŸŒ ๐Ÿš€ ๐ŸŒ–

Agenda

  1. GraphQL ๐ŸŒ Explorer

  2. GraphQL ๐Ÿš€ Servers

  3. GraphQL ๐ŸŒ– Clients

SpaceX APIs

Links

๐Ÿš€ api.spacex.land/graphql

๐Ÿ›ฐ api.spacex.land/rest

Check & contribute
github.com/spacexland

GraphQL ๐Ÿ‡น๐Ÿ‡ญ Bangkok

GraphQL ๐ŸŒ Asia

ย  ย  ย  ย  ย  ย graphql.asia

Slides

เธ‚เธญเธ‚เธญเธšเธ„เธธเธ“ย ๐Ÿ‡น๐Ÿ‡ญ

Made with Slides.com