CursosEmpresasBlogLiveConfPrecios

Consumiendo el API desde un frontend simple

Clase 24 de 25 • Curso Práctico de GraphQL con JavaScript

Clase anteriorSiguiente clase
Resumen

¿Cómo usar un cliente GraphQL en un proyecto sencillo?

Embarcarse en el uso de GraphQL puede ser una experiencia transformadora en el desarrollo web, mejorando tanto la eficiencia como la flexibilidad. Para este ejercicio, vamos a utilizar un sencillo proyecto de JavaScript que incorpora un cliente GraphQL. A continuación, sigue un desglose detallado del mismo.

¿Cuáles son los archivos y dependencias necesarias?

Para iniciar, necesitamos algunas dependencias clave y un par de archivos base:

  • Dependencias:
    • grazie: este es el cliente GraphQL que usaremos.
    • handlebars: un popular motor de plantillas que nos ayudará a generar el resultado de las consultas.
  • Dependencias de desarrollo:
    • browserify: se utiliza para empaquetar las diferentes dependencias en un solo archivo.
    • uglify-js: minimiza el archivo empaquetado para optimizarlo.

El sistema de bundling se realiza a través de una tarea en package.json, que transforma el código desde main.js y lo comprime en un bundle ejecutable.

¿Cómo se estructura el HTML del proyecto?

El HTML es bastante sencillo, consistiendo principalmente en un formulario de búsqueda que permite al usuario ejecutar consultas a través de nuestro cliente GraphQL:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GraphQL Client Example</title>
</head>
<body>
    <form id="searchForm">
        <input type="text" id="queryInput" placeholder="Ingresa tu búsqueda">
        <button id="searchButton">Search</button>
    </form>
    <div id="results"></div>
</body>
</html>

Este formulario incluye un campo de texto para la búsqueda y un botón para ejecutar la consulta. Los resultados se renderizan en un div con el id "results".

¿Cómo se configura la lógica en JavaScript?

Toda la magia sucede en nuestro archivo main.js, donde se implementa la lógica principal del proyecto:

  1. Inicializar el entorno y las variables:

    • Importamos nuestras dependencias y configuramos las variables necesarias, incluyendo el motor de plantillas y el cliente GraphQL.

  2. Crear el template de Handlebars:

    • Se construye un template básico que se encargará de mostrar los resultados o mensajes de error.

  3. Definir la consulta GraphQL:

    • Aquí se define la consulta que deseamos realizar, junto con los parámetros requeridos:
const query = `
    query getSearchResults($keyword: String!) {
        items(keyword: $keyword) {
            title
            description
        }
    }
`;
  1. Función de búsqueda e interacción con el cliente:
    • En esta parte, se pone en acción la consulta GraphQL y el procesamiento de su resultado o posibles errores.
async function search() {
    const keyword = document.getElementById('queryInput').value;
    const variables = { keyword };

    try {
        const response = await grazie.request(endpoint, query, variables);
        document.getElementById('results').innerHTML = template(response.items);
    } catch (error) {
        document.getElementById('results').innerHTML = `Error: ${error.message}`;
    }
}

Con esta estructura, al presionar el botón de búsqueda se envía la consulta y los resultados se muestran en el área designada.

¿Cómo construir y ejecutar el proyecto?

Finalmente, la ejecución del proyecto requiere compilar el JavaScript utilizando browserify y uglify-js para generar el archivo bundle. Esto se logra desde la línea de comandos con el siguiente comando:

npm run bundle

Este proceso genera el archivo finalizado, que puede ser cargado en un navegador para ser probado.

Recomendaciones

  • Siempre verifica que la configuración del entorno de desarrollo esté correcta antes de ejecutar operaciones complejas.
  • Utiliza herramientas de depuración y logs para entender mejor el comportamiento del código.
  • Asegúrate de que tu servidor GraphQL está correctamente configurado para recibir las consultas desde tu cliente.

Con esta guía y los ejemplos proporcionados, podrás implementar un cliente GraphQL de manera efectiva en tus proyectos, aprovechando las ventajas que esta tecnología ofrece para optimizar la gestión y comunicación de datos. ¡Sigue explorando y aprendiendo, el mundo del desarrollo web está lleno de oportunidades emocionantes!