Introdución a

GraphQL & Apollo

 

Diana Rodriguez

Chief DevOps /Full Stack Developer

Vue Vixens Argentina Leader

@cotufa82

Source: Natalia Tepluhina (CTO Vue Vixens)

@N_tepluhina

Qué es GraphQL?

@cotufa82

GraphQL es un "query language" para APIs, y un "server-side runtime" para ejecutar queries usando un sistema tipado que definimos para nuestra data. GraphQL no está necesariamente "casado"con  ninguna base de datos o storage engine y está más bien basado en tu código y data propios.

- graphql.org -

GraphQL Features

@cotufa82

  • Query a tu API y obtener solamente lo que necesitas

  • Acceso a muchos recursos en 1 request

  • Resultados predecibles con schema & type system

Empresas que usan GraphQL

@cotufa82

GraphQL vs. REST

@cotufa82

...otra request

@cotufa82

...y una más

@cotufa82

GraphQL: todo lo que necesitas con 1 query

@cotufa82

Schema Definition Language

@cotufa82

Ejemplo Sencillo

Con type relationship

type User {
  name: String!;
  age: Int!;
}
type Comment {
  title: String!;
  author: User!;
}

Scalar types

  • Int

  • Float

  • String

  • Boolean

  • Id

Fetching data con queries

@cotufa82

Query con arguments

@cotufa82

Data con mutations

@cotufa82

Usando Fragments

@cotufa82

Realtime updates con Subscriptions

@cotufa82

Desventajas de GraphQL (por ahora!)

@cotufa82

  • Hay que aprender a "setear" GraphQL

  • Las queries se envían desde el cliente => código extra en cliente

  • Hay que definir el schema con anterioridad => un poco mas de trabajo antes de obtener resultados

  • Se necesita un endpoint de graphql en el server

  • Las queries de Graphql traducen en más bytes que un endpoint REST

  • El server necesita mas capacidad de procesamiento

Apollo Client

@cotufa82

  • Incrementalmente adoptable

  • Universalmente compatible

  • Curva de aprendizaje simple

  • Inspeccionable y entendible

  • Construido para apps interactivas

  • Pequeño y flexible

  • Community driven

Ejemplo: Apollo query  

@cotufa82

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://q80vw8qjp.lp.gql.zone/graphql' }),
  cache: new InMemoryCache()
});

client.query({ query: gql`{ hello }` }).then(console.log);

@cotufa82

Tiempo de practicar!!!  

Links!

@cotufa82

Gracias!!

@cotufa82

GraphQL & Apollo

By Super Diana

GraphQL & Apollo

Presentacion original de Natalia Tepluhina

  • 62
Loading comments...

More from Super Diana