DEV Community

Cover image for GraphQL: Una introducción para nuevos desarrolladores.
Ramses Mata
Ramses Mata

Posted on • Edited on

GraphQL: Una introducción para nuevos desarrolladores.

¿Qué es GraphQL?

GraphQL es una herramienta con la cual aplicaciones pueden comunicarse entre ellas, estableciendo de manera concreta, reglas y patrones que le permiten saber a las dos partes (cliente y servidor) qué información puede ser transferida, en qué formato, tipos de datos, etc.

Este lenguaje de consultas lo desarrolló Meta (antes Facebook) originalmente, aunque ahora es totalmente Open Source, es desarrollado y ampliamente usado por una gran comunidad de desarrolladores.

La solución tradicional: REST APIs

Una API (Application Programming Interface) es la parte de una aplicación que le permite comunicarse con otra diferente. REST (Representational State Transfer) es una manera de diseñar APIs y ha sido un estándar por más de una década. En REST todo se trata como si fuera un recurso (un usuario, un post o un producto) y utilizamos métodos HTTP (GET, POST, PUT, DELETE) para interactuar con esos recursos.

Por ejemplo, imagina que estuvieras construyendo una red social y necesitaras la siguiente información:

  • Detalles del usuario (nombre, foto de perfil)
  • Sus últimas 3 publicaciones
  • De cada publicación los top 2 comentarios
  • Por cada comentario, el nombre y la foto de perfil del usuario que comenta

Para obtener esta información (generalmente y dependiendo de la implementación) tendríamos que hacerlo en múltiples pasos.

1. Primero, obtener la información del usuario

  1. Petición: GET /api/usuarios/123
  2. Respuesta:

REST API Response 1

2. Después obtendríamos sus publicaciones:

  1. Petición: GET /api/usuarios/123/publicaciones?limit=3
  2. Respuesta:

REST API Response 2

3. Por cada publicación tendríamos que obtener sus comentarios:

  1. GET /api/publicaciones/456/comentarios?limit=2
  2. GET /api/publicaciones/457/comentarios?limit=
  3. GET /api/publicaciones/458/comentarios?limit=2

4. Por cada comentario tendríamos, que obtener la información de cada usuario para desplegar su foto y su nombre

  1. GET /api/usuarios/456
  2. GET /api/usuarios/789
  3. ...

El problema de este ejemplo es conocido como el problema n + 1 y es un reto clásico cuando se trabaja con REST APIs. El hacer muchas peticiones no solo puede traer problemas de rendimiento, sino también de documentación.

Ahora veamos cómo GraphQL funciona y cómo puede ayudar a resolver estos problemas.

Entendiendo GraphQL

Podemos decir que GraphQL es una manera más precisa de comunicarse con APIs, en el ejemplo de un restaurante en lugar de ordenar platillos en la carta, tú le dices al chef exactamente que ingredientes quieres en tu platillo.

Conceptos clave

1. Esquema (Schema): Toda GraphQL API empieza con un esquema, el esquema lo podemos ver como un contrato que define qué datos están disponibles y cómo están estructurados.

Defining GraphQL Schema

2. Querys: Las Querys de GraphQL lucen muy parecido a la información que tú esperas recibir, por ejemplo si hicieras la siguiente query:

Simple GraphQL Query

Esto regresaría el siguiente JSON con exactamente esa información:

GraphQL Query Response

3. Querys dentro de otras querys: Un súper poder de GraphQL es su habilidad para pedir información de tipos de datos que están dentro de otros tipos.

Nested Queries Example 1

Esto es lo que hace a GraphQL poderoso cuando lo comparamos con REST, ¿recuerdas el ejemplo que veíamos anteriormente en el cuál hacíamos un montón de peticiones usando REST? ese ejemplo se podría ver de la siguiente manera en una simple query de GraphQL:

Nested GraphQL Queries Example 2

4. Un solo Endpoint: A diferencia de REST que utiliza muchísimos endpoints GraphQL usualmente solo utiliza uno, usando múltiples Querys con la información necesaria.

5. Suscripciones: GraphQL no solo nos permite pedir información si no también recibir actualizaciones en tiempo real, usando algo llamado Suscripciones.

En nuestra red social de ejemplo, si los usuarios estuviesen leyendo alguna publicación, podríamos suscribirnos a esa publicación, para saber cuándo, un usuario hace un nuevo comentario, de esta manera podemos actualizar la pantalla en tiempo real.

GraphQL Subscription Example

Conclusión

En conclusión ahora sabes qué es GraphQL y qué intenta solucionar; no solo es hacer menos peticiones, sino que también el esquema (Schema) actúa como una manera de documentar el alcance de tu API. A pesar de que en este ejemplo mostramos las ventajas de GraphQL sobre REST, lo cierto es que no existe una herramienta que resuelva absolutamente todo, cada una tiene su uso y la persona responsable de seleccionar estas herramientas debe tomar en cuenta los pros y contras de cada una según la situación.

Muchas veces los desarrolladores nos emocionamos con nuevas tecnologías y queremos implementarlas en donde sea con tal de poner en practica lo que aprendemos, pero, lo que he aprendido con el tiempo es que, primero debemos entender el problema que queremos resolver y al final elegir la herramienta que mejor lo resuelva.

Link al siguiente artículo.

Top comments (0)