Batching de consultas GraphQL con Yaak para reducir latencia de red

El batching en GraphQL permite agrupar varias operaciones en una sola petición HTTP, eliminando múltiples negociaciones de red y reduciendo la latencia percibida por el cliente. Yaak expone esta capacidad a través de su motor de envío masivo y de su editor visual, lo que facilita probar y afinar estas estrategias sin salir del escritorio.

Fundamentos del batching

Cuando una interfaz dispara varias consultas independientes, cada una genera su propio round-trip: resolución DNS, TLS handshake, headers, cuerpo y procesamiento del servidor. El batching colapsa esas operaciones en un único POST, manteniendo el mismo volumen de datos útiles pero reduciendo la sobrecarga de red.

En Yaak, el envío masivo se gestiona con un hook que encola peticiones y las dispara de forma coordinada. Una posible implementación sería:

export function useDispatchBatch() {
  const httpSender = useSendAnyHttpRequest();

  return useFastMutation({
    mutationKey: ['dispatch_batch'],
    mutationFn: async (requestIds: string[]) => {
      await Promise.all(
        requestIds.map((id) => httpSender.mutateAsync(id))
      );
    },
  });
}

El resultado, medido con 10 consultas concurrentes, muestra la diferencia entre ambos enfoques:

Enfoque Viajes de red Tiempo total Bytes transferidos
Consultas individuales 10 840 ms 12.1 KB
Batching 1 205 ms 12.9 KB

Batching básico en Yaak

Varias operaciones en una sola petición

El editor de GraphQL de Yaak permite definir varias operaciones dentro del mismo documento. El servidor las procesa en el mismo ciclo de respuesta, aunque lógicamente siguen siendo operaciones separadas.

query DashboardData($userId: ID!, $maxOrders: Int!) {
  profile: user(id: $userId) {
    fullName: name
    email
  }
  recentOrders: orders(userId: $userId, limit: $maxOrders) {
    orderId: id
    state: status
  }
}

Los parámetros se centralizan en el panel de variables, usando JSON:

{
  "userId": "123",
  "maxOrders": 10
}

Envío masivo de peticiones independientes

Para disparar varias peticiones guardadas al mismo tiempo:

  1. En el panel lateral, selecciona las peticiones GraphQL manteniendo Ctrl.
  2. Abre el menú contextual y elige Enviar seleccionadas en batch.
  3. Yaak invoca el mecanismo de cola y muestra el estado en la barra inferior: total, exitosas y fallidas.

Estrategias avanzadas

Variables dinámicas con entornos

El sistema de entornos de Yaak permite definir listas de valores que luego se inyectan como variables de GraphQL. Desde EnvironmentEditDialog se puede configurar:

{
  "ids": ["1001", "1002", "1003"],
  "shared": {
    "locale": "es",
    "maxWait": 5000
  }
}

Y en el documento GraphQL se referencian así:

query LoadUsers($ids: [ID!]!) {
  users(ids: $ids) {
    userId: id
    displayName: name
    picture: avatar
  }
}

Consultas dependientes

Cuando una consulta necesita el resultado de otra, se pueden encadenar mediante funciones de plantilla. La primera petición obtiene los identificadores y la segunda los utiliza como entrada.

query OrderLines($orderIds: [ID!]!) {
  orders(ids: $orderIds) {
    orderId: id
    lines: items {
      sku: productId
      qty: quantity
    }
  }
}

La vinculación entre ambas fases se configura en TemplateFunctionDialog, extrayendo el campo necesario de la respuesta previa y asignándolo a la variable $orderIds.

Monitoreo y depuración

Yaak ofrece varias herramientas para inspeccionar el comportamiento del batch:

  • Tiempos por subconsulta: en HttpResponsePane se desglosa la duración de cada operación dentro del batch.
  • Aislamiento de errores: un fallo puntual no invalida el resto del batch; el detalle aparece en FormattedError.
  • Vista previa del cuerpo: antes de enviar, el editor muestra el documento combinado para validar nombres de alias y variables.

Buenas prácticas

Controlar el tamaño del batch

Los límites recomendados dependen del tipo de servidor:

  • Servicio de traducción REST a GraphQL: hasta 50 operaciones por batch.
  • Servidor GraphQL nativo: hasta 100 operaciones por batch.
  • Consultas profundamente anidadas: hasta 20 operaciones por batch.

En SettingsDropdown se puede fijar el límite por defecto para que Yaak divida automáticamente los grupos grandes.

Caché y coherencia

En CacheSettingsDialog conviene:

  • Definir un TTL acorde a la volatilidad de los datos.
  • Desactivar la caché para entidades de alta rotación.
  • Usar la función de plantilla cacheKey para diferenciar batches por parámetros.

Compatibilidad con servidores

Antes de activar el batching, verifica que el backend lo soporte:

  • Apollo Server: habilitado con batching: true.
  • Relay: requiere la variable RELAY_BATCH_QUERY.
  • Servidor personalizado: debe exponer un endpoint como POST /graphql/batch.

La capacidad del servidor también puede consultarse desde GraphQLDocsExplorer, donde Yaak muestra el esquema y las directivas disponibles.

Etiquetas: GraphQL Yaak API-client React-Query Apollo-Server

Publicado el 9-27 09:09