Curso de
GRAPHQL
www.devcode.la
OBJETIVOS
www.devcode.la
-
Comprender los conceptos claves de GraphQL.
-
Conocer los beneficios a comparación de una REST API.
-
Leer y escribir datos a una base de datos.
-
Crear un proyecto exponiendo un servicio GraphQL.
BENEFICIOS
www.devcode.la
-
Fácil de manenter
-
El cliente decide que datos quiere.
-
Menos peticiones.
-
Menos consumo de información innecesaria.
-
Trabaja muy bien con Redux y componentes.
MÓDULOS
www.devcode.la
Módulo 1: Introducción
Módulo 2: Queries y Mutaciones
Módulo 3: Esquemas y tipos
Módulo 4: Proyecto (Hackernews)
REQUISITOS
www.devcode.la
Bases de programación
¿QUIÉN SOY?
www.devcode.la
¡COMENCEMOS!
www.devcode.la
¿QUÉ ES GRAPHQL?
www.devcode.la
www.devcode.la
www.devcode.la
Query languages are computer languages used to make queries in databases and information systems
- Wikipedia
www.devcode.la
SELECT * FROM tasks
REST vs GRAPHQL
www.devcode.la
La mayorÍa se basa en una optimización a REST
REST vs GRAPHQL
www.devcode.la
servidor
cliente
www.devcode.la
https://mydomain.com/api/v1/tasks
//return
[
{
id: "1"
title: "vistar nicobytes.com",
completed: false,
category:{
id: "1",
title: "category 1"
}
},
{
id: "1"
title: "seguir a @nicobytes",
completed: false,
category:{
id: "1",
title: "category 2"
}
},
{
id: "1"
title: "invitar una cerveza a @nicobytes",
completed: false,
category:{
id: "1",
title: "category 2"
}
}
]
www.devcode.la
query{
tasks{
title,
completed,
category{
title
}
}
}
www.devcode.la
[
{
title: "vistar nicobytes.com",
completed: false,
category:{
title: "category 1"
}
},
{
title: "seguir a @nicobytes",
completed: false,
category:{
title: "category 2"
}
},
{
title: "invitar una cerveza a @nicobytes",
completed: false,
category:{
title: "category 2"
}
}
]
REST vs GRAPHQL
www.devcode.la
datos
innecesarios
solo los datos que
se van a usar
REST vs GRAPHQL
www.devcode.la
multiples
solicitudes
una sola
solicitud
www.devcode.la
www.devcode.la
drift engineering
REST vs GRAPHQL
www.devcode.la
complejo de
mantener
un solo
endpoint
REST vs GRAPHQL
www.devcode.la
dependencia de
equipos
independencia de
equipos
REST vs GRAPHQL
www.devcode.la
Recordemos que GraphQL es una optimización a REST así que los puntos debilidades de REST son los fuertes de GraphQL.
CONCEPTOS CLAVE
www.devcode.la
EL ESQUEMA
www.devcode.la
está compuesto por un conjunto de tipos
www.devcode.la
Agnóstico
www.devcode.la
www.devcode.la
- https://github.com/graphql/graphql-js
- https://github.com/graphql-python
CASOS DE USO
www.devcode.la
Origen
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
Recomendaciones
www.devcode.la
CAMPOS
www.devcode.la
www.devcode.la
{
hero {
name
}
}
www.devcode.la
{
"data": {
"hero": {
"name": "R2-D2"
}
}
}
www.devcode.la
{
hero {
name
# Queries can have comments!
friends {
name
}
}
}
www.devcode.la
{
"data": {
"hero": {
"name": "R2-D2",
"friends": [
{
"name": "Luke Skywalker"
},
{
"name": "Han Solo"
},
{
"name": "Leia Organa"
}
]
}
}
}
GraphiQL
www.devcode.la
Argumentos y alias
www.devcode.la
www.devcode.la
{
human(id: "1000") {
name
height
}
}
www.devcode.la
{
"data": {
"human": {
"name": "Luke Skywalker",
"height": 1.72
}
}
}
www.devcode.la
GraphiQL
Variables
www.devcode.la
www.devcode.la
{
"id": "cGVvcGxlOjE="
}
query HeroNameAndVehicles($id: ID) {
person(id: $id) {
name
vehicleConnection{
vehicles{
name
}
}
}
}
www.devcode.la
{
"data": {
"person": {
"name": "Luke Skywalker",
"vehicleConnection": {
"vehicles": [
{
"name": "Snowspeeder"
},
{
"name": "Imperial Speeder Bike"
}
]
}
}
}
}
Mutaciones
www.devcode.la
www.devcode.la
{
"ep": "JEDI",
"review": {
"stars": 5,
"commentary": "This is a great movie!"
}
}
mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
createReview(episode: $ep, review: $review) {
stars
commentary
}
}
www.devcode.la
{
"data": {
"createReview": {
"stars": 5,
"commentary": "This is a great movie!"
}
}
}
Schema
www.devcode.la
Es un conjunto de tipos, varios tipos forman un esquema (Schema)
www.devcode.la
Son los recursos que van a estar expuestos a los clientes.
www.devcode.la
Vamos a aprender todo el type system de GraphQL para implementar un servidor GraphQL
Scalar Types
www.devcode.la
www.devcode.la
Con los scalars definimos las propiedades de nuestras entidades.
Int = Números enteros
Float = Números decimales
String = Cadena de texto
Boolean = Falso o Verdadero
ID = Id único
www.devcode.la
Object types
www.devcode.la
Es uno de los mas importantes de un esquema de GraphQL, representa un objeto/entidad que puede ser expuesto al cliente
www.devcode.la
www.devcode.la
type Character {
id: ID!
height: Float
name: String!
appearsIn: [Episode]
score: Int
}
www.devcode.la
type Episode {
id: ID!
name: String!
}
www.devcode.la
Lists and Non- Null
www.devcode.la
type Character {
id: ID!
height: Float
name: String!
appearsIn: [Episode]
episode: Episode
score: Int
}
www.devcode.la
type Character {
id: ID!
height: Float
name: String!
appearsIn: [Episode]!
episode: Episode!
score: Int
}
//
appearsIn: [null, null] //([Episode]!)
appearsIn: [{},{}] //([Episode!]!)
www.devcode.la
type Character {
id: ID!
height: Float
name: String!
appearsIn: [Episode!]!
episode: Episode!
score: Int
}
www.devcode.la
myField: [String!]
myField: null // valid
myField: [] // valid
myField: ['a', 'b'] // valid
myField: ['a', null, 'b'] // error
www.devcode.la
myField: [String]!
myField: null // error
myField: [] // valid
myField: ['a', 'b'] // valid
myField: ['a', null, 'b'] // valid
www.devcode.la
myField: [String!]!
myField: null // error
myField: [] // valid
myField: ['a', 'b'] // valid
myField: ['a', null, 'b'] // error
Enumeration types
www.devcode.la
www.devcode.la
Son tipos especiales de scalars que tienen valores limitados o restringidos
www.devcode.la
enum Gender {
MALE
FEMALE
}
www.devcode.la
type Character {
gender: Gender!
appearsIn: [Episode]!
}
Interface
www.devcode.la
Una Interface es una abstracción de ciertos campos que deben ser incluidos en los objetos que la implementen.
www.devcode.la
www.devcode.la
interface Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
}
www.devcode.la
type Human implements Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
starships: [Starship]
totalCredits: Int
}
type Droid implements Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
primaryFunction: String
}
Query
www.devcode.la
Root type
www.devcode.la
Es la manera en que exponemos los datos al cliente, en una REST tenemos enpoints, en GraphQL tendremos un query con recursos expuestos.
www.devcode.la
type Query {
hero(episode: Episode): Character
droid(id: ID!): Droid
heroes: [Character!]!
}
Mutation
www.devcode.la
Root type
www.devcode.la
Son los encargados de hacer modificaciones a ls objetos: editar, crear, eliminar.
www.devcode.la
type Mutation {
addHero(
name: String,
height: Float
): Character
}
Proyecto
www.devcode.la
Dependecias
www.devcode.la
Creando servidor GraphQL
www.devcode.la
Crear Schema
www.devcode.la
Crear Object: Link
www.devcode.la
Documentación
www.devcode.la
Resolvers
www.devcode.la
Mutation
Crear Link
www.devcode.la
Trabajar con inputs
www.devcode.la
Conectar a base de datos
www.devcode.la
www.devcode.la
www.devcode.la
Conectado resolvers a DB
www.devcode.la
Query: AllLinks
www.devcode.la
Mutation: Create Link
www.devcode.la
Mutation: Edit Link
www.devcode.la
Mutation: Delete Link
www.devcode.la
Agregando Users a la DB
www.devcode.la
Resolver Relaciones
www.devcode.la
Mutation
Crear usuario
www.devcode.la
Mutation
Crear Link
www.devcode.la
Errores
www.devcode.la
POSTMAN
www.devcode.la
RESUMEN
www.devcode.la
Módulo 1: ¿Qué es GraphQL?
Módulo 2: GraphQL desde el Client
Módulo 3: Type System
Módulo 4: Construir server
www.devcode.la
Curso de GraphQL
By devcodela
Curso de GraphQL
Curso de GraphQL
- 1,197