Módulo profesional.

1º DAM 18/19

Lenguajes de marcas y sistemas de gestión de información

GraphQL: Introducción

✔ Queries
✔ Mutations
✔ Subscriptions
✔ Esquema SDL
✔ Arquitectura
✔ Selectores múltiples

Profesor: Francisco J García

 GraphQL

INTRODUCCIÓN

Sintaxis para definir types, enviar queries y mutaciones

 GraphQL

Core concepts

GraphQL tiene su propio sistema de tipos que es utilizado para definir el “esquema de
una API”.
Las reglas de sintaxis para escribir el esquema son llamadas Schema Definition
Language (SDL)

https://blog.graph.cool/graphql-sdl-schema-definition-language-6755bcb9ce51
 GraphQL

Core concepts

Un ejemplo de como usamos el SDL para definir un type simple llamado Person

type Person { Este tipo tiene dos campos, llamados nombre y

name: String! edad, string el primero e int el segundo.
age: Int! La exclamación significa que el campo es
} requerido.
 GraphQL

Core concepts
También se pueden definir relaciones entre tipos, por ejemplo, en un blog tendríamos una
relación entre los Post y la Persona que lo ha escrito

type Post {
title: String! Aquí tenemos definida una relación One-to-
author: Person! many (uno a muchos) entre Person y Post ya
} que en Person el campo posts es un array de
Posts
type Person {
name: String!
age: Int!
posts: [Post!]!
}
 GraphQL

Core concepts: Queries

Debido a que la estructura de datos que devuelve graphQL no es fija solo se utiliza un
único endpoint (al contrario que en los servicios REST).
La desventaja es que al tener un único endpoint el cliente debe enviar más
información al servidor para especificar los datos que necesita, esto se consigue
mediante queries
 GraphQL

Core concepts: Queries

Ejemplo de una query

{
allPersons { Root field: campo raiz de la query
name Payload: todo lo que sigue al root
}
}
 GraphQL

Core concepts: Queries

Ejemplo de una query y su respuesta

{
{ "allPersons": [
allPersons { { "name": "Johnny" },
name { "name": "Sarah" },
} { "name": "Alice" }
} ]
}
 GraphQL

Core concepts: Queries

Una de las grandes ventajas de GraphQL sobre REST es que nos provee de la
capacidad de hacer querys sobre información relacionada (relaciones one-to-many por
ejemplo).
Si buscamos cargar los datos de todos los post que una persona ha escrito tan solo
tienes que seguir la estructura de tus tipos (SDL) para solicitar la información
 GraphQL

Core concepts: Queries

{
allPersons { En esta query solicitamos información sobre
name el nombre de todas las personas y los títulos
age de los Post que ha escrito.
posts {
title Como habíamos definido en nuestra SDL
}
}
}
 GraphQL

Core concepts: Queries con argumentos

En GraphQL cada campo puede tener cero o más argumentos (especificado en el

esquema SDL). Por ejemplo, el campo allPersons puede tener un parámetro “last” para
especificar un número de personas

{
allPersons(last: 2) {
name
}
}
 GraphQL

Core concepts: Queries con argumentos

{
"data": {
"allPersons": [
{ {
allPersons(last: 2) { "name": "Sarah"
name },
} {
} "name": "Alice"
}
]
}
}
 GraphQL

Core concepts: Datos y mutaciones

Hasta aquí hemos visto como solicitar datos pero la mayor parte de las
aplicaciones también necesitan realizar cambios en los datos del backend.
En GraphQL esto se logra con las mutaciones, existen tres tipos:

✔ (Create) Crear nuevo dato

✔ (Update) Actualizar un dato existente
✔ (Delete) Borrar un dato existente
 GraphQL

Core concepts: Datos y mutaciones

La mutaciones siguen la misma estructura sintáctica que las queries, pero siempre
necesitan comenzar con la palabra clave “mutation”.
Un ejemplo para Person:

mutation { "createPerson": {
createPerson(name: "Bob", age: 36) { "name": "Bob",
name "age": 36,
age }
}
}
 GraphQL

Core concepts: Datos y mutaciones

¡ UN MOMENTO ! ¿Recibimos datos con la respuesta?

mutation {
createPerson(name: "Bob", age: 36) { Root field
name Payload
age Payload
}
}
Las mutaciones también admiten payloads: es posible solicitar datos a la vez que
realizamos una mutación
 GraphQL

Core concepts: Datos y mutaciones

En el ejemplo anterior no resultaba muy útil recibir los mismos datos que
habíamos creado, puesto que ya sabíamos cuales eran.
Un ejemplo de aplicación útil → Cuando creamos un registro se suele crear con un
id, podemos utilizar un payload para recibir este id que antes no teníamos

type Person { mutation {

id: ID! createPerson(name: "Alice", age: 36) {
name: String! id
age: Int! }
} }
 GraphQL

Core concepts: Actualizaciones en tiempo real con suscripciones

Para algunas aplicaciones es importante tener una conexión en tiempo real con el
servidor para estar informado sobre eventos. Para esto GraphQL ofrece el concepto de
“suscripciones (subscriptions)”
Cuando un cliente se suscribe a un evento se inicia una conexión con el servidor y
cuando el evento se dispara (ocurre) el servidor envía los datos correspondientes al
client. Esto no sigue un ciclo típico de request-response, las suscripciones representan
un stream de datos enviados hacia el cliente.
Las suscripciones se escriben siguiendo la misma sintaxis que las queries y mutations.
 GraphQL

Core concepts: Actualizaciones en tiempo real con suscripciones

Cuando se
subscription { {
produzca una
newPerson { "newPerson": {
mutación el
name "name": "Jane",
servidor enviará la
age "age": 23
información sobre
} }
este cambio al
} }
servidor
 GraphQL

Core concepts: Definición de un esquema

El esquema es una de las partes más importantes cuando trabajamos con graphQL.
En el esquema se especifican las capacidades del API y se define la forma en que los
clientes pueden preguntar por los datos. Es un contrato entre el servidor y el cliente.
Un escquema es una colección de tipos graphQL. Cuando escribimos el esquema hay
algunos tipos especiales que son raiz (root) ya vistos en la presentación.

type Query { ... }

type Mutation { ... }
type Subscription { ... }
 GraphQL

Core concepts: Definición de un esquema

Este será el esquema completo para las peticiones de Person y Post de las páginas
anteriores

type Query { type Person {

allPersons(last: Int): [Person!]! name: String!
} age: Int!
type Mutation { posts: [Post!]!
createPerson(name: String!, age: Int!): Person! }
} type Post {
type Subscription { title: String!
newPerson: Person! author: Person!
} }
 GraphQL

Arquitectura

https://www.howtographql.com/basics/3-big-picture/
GraphQL

Arquitectura
GraphQL

Arquitectura
GraphQL

Arquitectura
 GraphQL

Clients

GaphQl proporciona facilidades del lado del cliente de forma que nos podremos
concentrar en lo que realmente importa

✔ Enviar queries y mutations sin tener que construir HTTP request

✔ Integración con la capa de vista
✔ Validar y optimizar queries basadas en el esquema
✔ Cacheo de peticiones

https://www.howtographql.com/advanced/0-Client/
 GraphQL

Cliente

En el momento de escribir esta presentación existen 2 clientes disponibles:

✔ Apollo Client : Desarrollado por la comunidad

https://github.com/apollographql/apollo-client

✔ Relay : Desarrollado por facebook

https://facebook.github.io/relay/

https://www.howtographql.com/advanced/0-Client/
 GraphQL

Cliente: Envio de queries

Si no utilizamos graphQL debemos escribir peticiones HTTP para cargar datos

Con el cliente de graphQL todo lo que debemos hacer es escribir la query tal y como la
hemos definido en el esquema y dejar que el sistema se encargue de enviar la petición y
manejar la respuesta.
Esto es lo que el cliente hace por ti.

https://www.howtographql.com/advanced/0-Client/
 GraphQL

Cliente: Integración con la vista

Dependiendo de la plataforma que utilicemos para generar la interfaz de usuario UI

debemos actuar de una forma u otra
GraphQL se lleva especialmente bien con React (librería de facebook) aunque se puede
utilizar cualquier otra: Vue, Angular...

https://www.howtographql.com/advanced/0-Client/
 GraphQL

Cliente: Cacheo de resultados

El sistema de caché de graphQL normaliza y guarda los resultados de las peticiones en

un almacén con un id único con el que más tarde podemos acceder a dichos datos
En el blog del proyecto Apollo podemos obtener más información sobre la cache

https://dev-blog.apollodata.com/the-concepts-of-graphql-bc68bd819be3

https://www.howtographql.com/advanced/0-Client/
 GraphQL

Cliente: Validaciones y optimizaciones en tiempo de compilación

Debido al diseño de graphQL, con un esquema que contiene toda la información sobre lo
que el cliente puede demandar, se puede validar y optimizar todas las peticiones en el
momento de la compilación
Cuando el entorno de desarrollo (IDE) tiene acceso al esquema puede parsear todo el
código del proyecto y compararlo contra la información del esquema.
Se pueden detectar errores antes de que la aplicación llegue al cliente

https://www.howtographql.com/advanced/0-Client/
 GraphQL

Más conceptos

✔ Reusabilidad con fragments

✔ Parametrizando campos con argumentos
✔ Alias para los resultados de las peticiones
✔ SDL avanzado
✔ Tipos escalar y objeto
✔ Enumeraciones
✔ Interfaces
✔ Tipos Union

https://www.howtographql.com/advanced/2-more-graphql-concepts/
 GraphQL

Servidor

https://dev-blog.apollodata.com/graphql-explained-5844742f195e
 GraphQL

Herramientas

https://graphql.org/community/

GraphQL Playground: GraphQL IDE

https://github.com/graphcool/graphql-playground

Introspección: Solicitar datos sobre el esquema

 GraphQL

ENLACES

https://graphql.org/
https://www.howtographql.com/
https://graphql.org/code/