GraphQL: Una introducción para nuevos desarrolladores.

Source: Dev.to

¿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.

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.

Ejemplo clásico con REST

Imagina que estás construyendo una red social y necesitas 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

Con una API REST típica tendrías que hacer múltiples peticiones:

GET /api/usuarios/123

GET /api/usuarios/123/publicaciones?limit=3

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

GET /api/usuarios/456
GET /api/usuarios/789

Este patrón genera el conocido problema n + 1, que afecta tanto al rendimiento como a la documentación de la API.

Cómo funciona GraphQL

GraphQL permite describir exactamente los datos que necesita el cliente, evitando peticiones redundantes y simplificando la documentación mediante un esquema.

Esquema (Schema)

Todo GraphQL API empieza con un esquema, que actúa como un contrato que define qué datos están disponibles y cómo están estructurados.

Queries

Las queries de GraphQL lucen muy parecidas a la información que esperas recibir. Por ejemplo, una query que solicite los datos del ejemplo anterior podría ser:

{
  usuario(id: "123") {
    nombre
    fotoPerfil
    publicaciones(limit: 3) {
      titulo
      comentarios(limit: 2) {
        texto
        autor {
          nombre
          fotoPerfil
        }
      }
    }
  }
}

La respuesta sería un JSON con exactamente esa información:

{
  "data": {
    "usuario": {
      "nombre": "Juan Pérez",
      "fotoPerfil": "url-a-foto.jpg",
      "publicaciones": [
        {
          "titulo": "Mi primer post",
          "comentarios": [
            {
              "texto": "¡Gran publicación!",
              "autor": {
                "nombre": "Ana Gómez",
                "fotoPerfil": "url-a-foto-ana.jpg"
              }
            },
            {
              "texto": "Me gusta",
              "autor": {
                "nombre": "Luis Martínez",
                "fotoPerfil": "url-a-foto-luis.jpg"
              }
            }
          ]
        }
        // …
      ]
    }
  }
}

Queries dentro de otras queries

Un poder clave de GraphQL es su habilidad para anidar consultas, solicitando datos de tipos que están dentro de otros tipos en una sola petición. Esto elimina la necesidad de múltiples llamadas como en el ejemplo REST anterior.

Un solo Endpoint

A diferencia de REST, que suele requerir muchos endpoints diferentes, una API GraphQL normalmente expone un único endpoint (por ejemplo, /graphql). Todas las consultas se envían a ese endpoint, especificando en el cuerpo de la petición la query y, opcionalmente, variables.

Suscripciones

GraphQL también permite suscripciones, que son mecanismos para recibir actualizaciones en tiempo real. En la red social de ejemplo, podrías suscribirte a una publicación para ser notificado cuando un usuario añada un nuevo comentario:

subscription OnNuevoComentario($publicacionId: ID!) {
  nuevoComentario(publicacionId: $publicacionId) {
    texto
    autor {
      nombre
      fotoPerfil
    }
  }
}

El cliente recibiría los datos del nuevo comentario tan pronto como se publique, permitiendo actualizar la UI en tiempo real.

Conclusión

GraphQL ayuda a reducir el número de peticiones, provee una documentación automática mediante su esquema y permite obtener datos anidados en una sola llamada. Sin embargo, no es una solución universal; cada herramienta tiene sus pros y contras y debe elegirse según el problema a resolver.

Los desarrolladores a menudo se entusiasman con nuevas tecnologías y quieren implementarlas de inmediato. Es fundamental primero comprender el problema que se quiere solucionar y, solo entonces, seleccionar la herramienta que mejor se ajuste a esa necesidad.