Me está encantando el curso, finalmente estoy comprendiendo Graphql.
Introducción
¿Qué es GraphQL?
Proyecto: tienda online con GraphQL
Análisis de la API REST (sin GraphQL)
Fundamentos de GraphQL
Tu primera API GraphQL
GraphQL desde Insomnia y Postman
Tipado en GraphQL
Sistema de tipado
Scalar types
Listas y non-null types
Object types and fields
Archivos .graphql (mejor developer experience)
GraphQL en la Tienda con Express.js
Product resolvers
Conectado a ProductService
Mutations and Inputs
Variables y alias
Update and Delete
Anidamiento
Autenticación con GraphQL y JSON Web Tokens
Login
Crear categoría
GraphQL con JWT
Validar roles
Custom Scalars
Bonus
Anidamiento dinámico
Conclusiones
GraphQL vs. API REST
Toma el Curso Avanzado de Node.js con GraphQL
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
GraphQL es una herramienta poderosa que permite a los desarrolladores realizar consultas y manipulaciones de datos de manera eficiente y flexible. Cuando se trata de consumir datos, uno de los aspectos más valiosos de GraphQL es su capacidad para manejar variables y alias. Ambas funcionalidades son herramientas útiles que permiten optimizar y personalizar consultas de acuerdo a las necesidades específicas de cada cliente o aplicación.
Los alias en GraphQL permiten cambiar el nombre de los campos retornados por una consulta sin modificar el backend. Esto significa que el consumidor del servicio puede decidir cómo se llamarán los campos en el cliente final, ofreciendo gran flexibilidad y personalización.
Por ejemplo, supongamos que una consulta devuelve un array de productos que, por defecto, viene nombrado como products
. Si una aplicación web o móvil quisiera que este array llegase con otro nombre, como my_products
, esto se puede lograr usando un alias.
{
my_products: products {
id
name
}
}
Con esto, el consumidor no necesita cambiar nada en el backend ya que los alias permiten renombrar el retorno directamente en la consulta de GraphQL, permitiendo organizar la estructura conforme a los requerimientos específicos del cliente.
Un poderoso atributo de GraphQL es su capacidad para realizar múltiples consultas en un solo request. Esto mejora significativamente la eficiencia, ya que evita realizar múltiples llamadas separadas, como sería el caso en un entorno REST tradicional.
Supongamos que necesitamos obtener tanto un producto específico como una lista de productos. En una sola operación de GraphQL, podemos hacerlo fácilmente:
{
product(id: 1) {
id
name
}
my_products: products {
id
name
}
}
Esto simplifica el proceso de desarrollo y hace que las aplicaciones sean más rápidas, ya que obtienen todos los datos necesarios con un solo golpe al servidor.
Las variables en GraphQL permiten enviar parámetros a las consultas y mutations, haciendo que la sintaxis sea más limpia y las operaciones más reutilizables. Esto se logra al definir variables dentro de la consulta y luego usar una interfaz llamada Query Variables
para proporcionar los valores.
Por ejemplo, cuando se desea crear un nuevo producto, se puede estructurar de esta manera:
mutation createProduct($DTO: CreateProductDTO!) {
createProduct(input: $DTO) {
id
name
}
}
En la sección de variables, podemos definir los valores que se pasarán a la consulta:
{
"DTO": {
"name": "Nuevo Producto",
"description": "Descripción del producto"
}
}
Al permitir a los clientes utilizar alias y variables, se libera al equipo de backend de la carga de crear endpoints adicionales para cada caso de uso nuevo. Esto mejora la independización de los equipos, permitiendo que las aplicaciones móviles y web ajusten la forma en la que reciben y nombran los datos, sin requerir modificaciones directas a la API.
A su vez, dicho enfoque facilita la validación de datos y la reducción de la carga en el backend al procesar consultas que pueden ser complejas de manera más eficiente y segura.
En conclusión, el uso de alias y variables en GraphQL no solo optimiza el consumo de datos, sino que también permite una personalización profunda y una autonomía significativa para los desarrolladores que trabajan en aplicaciones móviles y web. Implementar estas características te puede ayudar a mejorar la calidad y flexibilidad de tus servicios en el desarrollo de software.
Aportes 5
Preguntas 0
Me está encantando el curso, finalmente estoy comprendiendo Graphql.
En GraphQL, podemos utilizar variables y alias para mejorar la organización y manejo de nuestras consultas desde el lado del cliente. Veamos cómo utilizar estas funcionalidades:
El alias nos permite asignar un nombre personalizado a una consulta y utilizarlo para referenciar el resultado obtenido. Esto es útil cuando deseamos realizar múltiples consultas al mismo servicio y distinguir sus resultados.
Para utilizar un alias, debemos seguir la siguiente sintaxis:
{
aliasQueDeseamosUsar: servicio {
name
id
description
}
}
El resultado obtenido estará bajo el nombre del alias que hemos asignado:
Ejemplo:
{
myProduct: products {
name
description
}
}
# datos retornados
{
"data": {
"myProduct": [
{
"name": "Product 1",
"description": "bla bla bla"
},
# ...
]
}
}
Es importante destacar que los alias deben ser únicos para evitar conflictos al realizar la consulta.
Las variables nos permiten parametrizar nuestras consultas y facilitar el manejo de datos. Supongamos que deseamos utilizar nuestro endpoint de creación de un nuevo producto, pero con una gran cantidad de información. Para simplificar la consulta, podemos utilizar variables.
Primero, debemos modificar nuestra consulta de la siguiente manera:
mutation {
addProduct(dto: {
name: "nuevo producto",
description: "la la la",
price: 100,
image: "img.jpg",
categoryId: 1
}){
id
name
description
}
En esta consulta, hemos definido una variable $dto
del tipo CreateProductDto
, que será utilizada como parámetro en la mutación addProduct
.
# tendremos que nombrar la mutación
# recibiremos una variable "$dto" que tiene que ser del tipo "CreateProductDto"
# se la enviamos al "addProduct" como parámetro
mutation createProduct($dto: CreateProductDto!){
addProduct(dto: $dto){
id
name
description
}
}
Luego, desde nuestro cliente, ya sea Postman u otra herramienta similar, podemos utilizar la sección de “GraphQL Variables” para definir y enviar los valores de las variables. Por ejemplo:
{
"dto": {
"name": "nuevo producto",
"description": "la la la",
"price": 100,
"image": "img.jpg",
"categoryId": 1
}
}
Es importante destacar que la definición de las variables debe estar en formato JSON.
Afortunadamente, gracias a estas funcionalidades en GraphQL, el backend puede proporcionar una API flexible y adaptable, ya que es indiferente cómo el usuario consuma los datos. La utilización de variables y alias permite una mayor organización y personalización en las consultas, simplificando la lógica del cliente y mejorando la experiencia de desarrollo.
Si les sale este error en Apollo server Preventing Cross-Site Request Forgery (CSRF) al usar la mutation desde el playground se resuelve de la siguiente manera:
const server = new ApolloServer({
typeDefs: await loadFiles('./src/**/*.graphql'),
resolvers,
playground: true,
plugins: [ApolloServerPluginLandingPageGraphQLPlayground],
csrfPrevention: false,
});
también podemos añadir variables a los Querys, no solo a las mutaciones
Query variables:
{
"id1": 1,
"id2": 2
}
Consulta:
query myProducts($id1: ID!, $id2: ID!) {
p1: product(id: $id1){
name,
price
}
p2: product(id: $id2){
name,
price
}
products: allProducts{
id,
name,
price
}
}
tendríamos como respuesta
{
"data": {
"p1": {
"name": "Product 1",
"price": 100
},
"p2": {
"name": "Product 2",
"price": 200
},
"products": [
{
"id": "1",
"name": "Product 1",
"price": 100
},
{
"id": "2",
"name": "Product 2",
"price": 200
},
{
"id": "3",
"name": "Product 3",
"price": 300
},
{
"id": "4",
"name": "Product 4",
"price": 400
},
{
"id": "5",
"name": "product 5",
"price": 500
},
{
"id": "6",
"name": "product 6",
"price": 600
},
{
"id": "7",
"name": "product 7",
"price": 700
}
]
}
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?