End-to-end

Type-Safe
GraphQL
Apps

Carlos Rufo / 19-02-2019 / #2 Sevilla TypeScript Meetup

👋 , I'm Carlos!

OSS Developer

@swcarlosrj

Agenda

  • Intro to GraphQL💡

  • TypeScript 💙 GraphQL

  • 🚀 Live Coding

  • 🙋‍♀️ Q&A 🙋‍♂️

Intro to
GraphQL💡

Why 🤔

  • Efficiency

  • Type System

  • 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

Docs

  • Auto-Generated

  • Typed

  • Up-to-Date

 

It's just 🔥

Versioning

Tooling

Move faster with
powerful dev tools 🕹

  • GraphiQL

  • Auto-Gen Types

  • IDEs extensions

How 🧐

  • Entry points

  • TypeDefs

  • Resolvers

  • Context

  • Servers

Entry points

  • Query (Get data)

  • Mutation (Modify data)

  • Subscription (Subscribe to data)

TypeDefs

type Query {
  launches: [Launch]
  launch(id: ID!): Launch
}
type Rocket {
  id: ID!
  name: String
}
type Launch {
  id: ID!
  name: String
  details: String
  image: String
  rocket: Rocket
  ship: Ship
}
type Ship {
  id: ID!
  name: String
  port: String
  image: String
}

Entry points

Type

Sub Types

Resolvers

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;
    },
}

Context

DRY ♻️

import db from '../db';
import { find, limit, offset, order, sort } from '../utils';

const context = {
    db,
    find,
    limit,
    offset,
    order,
    sort
};

export default context;

Servers

const server = new GraphQLServer({
  typeDefs,
  resolvers,
  context
});

server.listen()

What 🤩

  • Specification

  • Query Language

  • Features

  • History

  • Learn

Specification

It's not a library,
nor a framework

Is a language-agnostic
specification for your API!

C# / .NET, Clojure, Elixir, Erlang, Go, Groovy,
Java, JavaScript, PHP, Python, Scala, Ruby

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

  • Client-specified response shape

  • Efficient

History

  • Several clients support need

  • Rethink app data-fetching

  • "Write once, run anywhere"

Learn

Docs

GraphQL.org

Confs

GQL Asia 🇮🇳 Apr 12-13 

GQL Conf 🇩🇪 Jun 20-21
GQL Summit 🇺🇸 Oct 29-31

Tutorials

How To GraphQL

Newsletters

GraphQL Weekly

🔜 Open GraphQL

Books

Learning GraphQL

Blogs

Open GraphQL

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 BE
➕
💪 Typed FE
➕

BE Types ✅ FE Types

Single Source of Truth

Auto-generate types
based on your
GraphQL implementation

Implementations

Schema First
👍 Fully client-focused design
👎 Code reuse, Type safety
🛠 Apollo Server, GraphQL Yoga

Resolver First
👍 Can be type-safe
👎 MVC confusion, less client focus
🛠 graphql.js

Model First
👍 Code reuse, Type safety
👎 Most "distance" between code & schema
🛠 GraphQL Nexus, TypeGraphQL

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;
    },
}

Introspection

Explore the GraphQL Schema
& take advantage of it predictability ✨

Type Generators

Backend

Prisma GraphQLGen

Frontend

Apollo Codegen

Both

GraphQL Code Generator

Auto-generate types
based on your
GraphQL implementation

🚀 Live
Coding

Design

Let's make
this work out 💪

GraphQL
💜
REST

🙋‍♀️ Q&A 🙋‍♂️

Thanks for coming 😄

Meetup #2: TypeScript, GraphQL y React
Sevilla TypeScript Meetup

See you in the next one?

End-to-end Type-Safe GraphQL Apps - Sevilla TypeScript

By Carlos Rufo

Made with Slides.com

End-to-end Type-Safe GraphQL Apps - Sevilla TypeScript

  • 577

More from Carlos Rufo

  • End-to-end Type-Safe GraphQL Apps - JavaScript Bangkok
    Carlos Rufo
    1024
  • From Over-fetching to Over-typing - GraphQL Bangkok 8.0.0
    Carlos Rufo
    772
  • End-to-end Type-Safe GraphQL Apps - JavaScript Singapore
    Carlos Rufo
    707