End-to-end

Type-Safe
GraphQL
Apps

Carlos Rufo / 26-10-2019 / JSDC Taiwan ๐Ÿ‡น๐Ÿ‡ผ 2019

ๅคงๅฎถ ๐Ÿ™Œ ๅฅฝๅ—?

*ไฝ ๅ€‘็พๅœจๆ‡‰่ฉฒๆญกๅ‘ผๅ›ž็ญ” ๐Ÿฅณ

๐Ÿ‘‹ ๆˆ‘ๅซCarlos
ย 

ๆˆ‘ๆ˜ฏ่ฅฟ็ญ็‰™ไบบ
ๆˆ‘ๆ˜ฏGraphQL Hong Kong

็š„็ต„็น”่€…

้€™ๆ˜ฏๆˆ‘ๅ”ฏไธ€ๆœƒ่ชช็š„ไธ‰ๅฅไธญๆ–‡ ๐Ÿ˜‚

Agenda

  1. Intro ๐ŸŒ to GraphQL

  2. GraphQL ๐Ÿš€ Servers

  3. GraphQL ๐ŸŒ– Clients

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

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 ๐ŸŽŠ

What is programmer's favourite hangout place?

Foo Bar

*๐Ÿฅ ba dum tss

DevJokes time ๐ŸŽˆ

What the developer said to the repository?

FORK YOU! ๐Ÿคฃ

Intro ๐ŸŒ
to GraphQL

What ๐Ÿคฉ

  • Specification

  • Features

  • History

  • Learn

Specification

โŒ It's not a library

โŒ It's not a framework

โœ… It's a specification

Is a language-agnostic
specification to build APIs

Specification

โŒ 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

History

๐Ÿ˜… Several clients support need

๐Ÿค” Rethink app data-fetching

๐Ÿ’ก "Write once, run anywhere"

How ๐Ÿง

๐Ÿ”œ Live
Coding

Why ๐Ÿค”

  • Efficiency

  • Type System

  • Documentation

  • Tooling

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 nested resources,
get all of that ๐ŸŽ‡

"Fetch not enough data that the client
actually needs"

Type System

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

Learn

Confs

GQL Summitย ๐Ÿ‡บ๐Ÿ‡ธ Oct 30-31

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

GQL Conf ๐Ÿ‡ฉ๐Ÿ‡ช Jun-Jul

GQL Day ๐Ÿ‡ญ๐Ÿ‡ฐ๐Ÿ‡จ๐Ÿ‡ณ๐Ÿ‡น๐Ÿ‡ผ?ย Sept?

Tutorials

Real World GraphQL

Newsletters

GraphQL Weekly

Blogs

Open GraphQL

Live coding

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

Agenda

  1. Exploring ๐ŸŒ GraphiQL

  2. GraphQL ๐Ÿš€ Servers

  3. GraphQL ๐ŸŒ– Clients

Let's go! In & out,
20 minutes adventure

Exploring ๐ŸŒ GraphiQL

SpaceX APIs ๐Ÿ‘ฝ

Links

๐Ÿš€ api.spacex.land/graphql

๐Ÿ›ฐ api.spacex.land/rest

Check & contribute ๐Ÿ‘‡
github.com/spacexland

GraphQL ๐Ÿš€

Servers

Few minutes

later...

GraphQL ๐ŸŒ–

Clients

Finally...

Slides

่ฌ่ฌย ๐Ÿ˜„

End-to-end Type-Safe GraphQL Apps - JSDC Taiwan 2019

By Carlos Rufo

End-to-end Type-Safe GraphQL Apps - JSDC Taiwan 2019

  • 1,337