Cómo integrar WunderGraph con su aplicación frontend

Share on X (Twitter)Share on FacebookShare on LinkedInShare on Email

Unificar componentes en uno reduce la complejidad. Puedes adoptar este enfoque en GraphQL combinando APIs REST, APIs de bases de datos y APIs de GraphQL para obtener un mejor rendimiento al consultar supergrafos y microservicios de gran tamaño.

Sin embargo, gestionar big data y escalarlo es una tarea compleja. Para simplificar el proceso, las empresas emplean herramientas que ayudan a gestionar y unificar las API, como Apollo Federation y WunderGraph. Estas plataformas ayudan a gestionar y unificar las API.

En este artículo, aprenderemos a integrar la popular biblioteca WunderGraph en una aplicación frontend. Además, compararemos Apollo Federation y WunderGraph para encontrar la mejor plataforma para unificar API.

Las desventajas de usar múltiples API sin unificarlas

Trabajar con Múltiple API presenta muchas complejidades que dificultan la optimización del código y la gestión de los puntos finales y secretos de las API. Cada API tiene sus propios protocolos, formatos de datos y mecanismos de autenticación, lo que hace que la configuración sea un proceso lento.

Al trabajar con múltiples API, pueden producirse redundancia y llamadas de datos superpuestas, lo que conlleva un aumento de la transmisión de datos y mayores costos. Además, llamar a una aplicación con Múltiple API se convierte en un proceso engorroso, ya que requiere gestionar varias API simultáneamente.

¿Qué es WunderGraph?

WunderGraph es el competidor definitivo de Apollo GraphQL. WunderGraph es un framework que unifica el esquema GraphQL y las API para crear un único punto final. WunderGraph unifica sus API y le proporciona métricas y capacidad de observación sobre su rendimiento. Unificar las API simplifica la ejecución de tareas que requieren la interacción de diferentes servicios de software.

WunderGraph es de código abierto bajo la licencia Apache, y se agradecen las contribuciones a futuras versiones a través de su repositorio de GitHub. WunderGraph también ofrece una biblioteca accesible mediante npm que proporciona SDK de JavaScript para diversos frameworks. Para reducir la complejidad, WunderGraph trata los servicios distribuidos y dinámicos como un monolito, lo que facilita su acceso. Esto se logra combinando Múltiples API en una sola, de forma similar a cómo los monolitos unifican muchos servicios en una sola aplicación de gran tamaño.

WunderGraph es gratuito para aficionados y tiene tres niveles de pagos: Lanzamiento, Escala y Empresa.

WunderGraph también actúa como gestor de paquetes para API, lo que permite instalar dependencias de API. El gestor de paquetes de API permite a los desarrolladores integrar y gestionar fácilmente las dependencias de API, de forma similar a como se gestionan las dependencias de bibliotecas en proyectos de software. Es compatible con los siguientes frameworks:

• Next.js
• Remezcla
• Relé
• Nuxt.js
• Kit de esbelto
• Astro
• Exposición

Unificar las API elimina la necesidad de codificación adicional y simplifica la integración y la gestión de múltiples API. WunderGraph aprovecha dos patrones para unificar las API: el framework Backend for Frontend (BFF) y la puerta de enlace API.

El framework BFF se centra en la creación de componentes y servicios backend para su aplicación frontend, que abordan las necesidades específicas de su aplicación. Este marco mejora el rendimiento y simplifica el código del cliente. El framework BFF busca resolver problemas donde una sola API no satisface todas las necesidades de su aplicación, ya sea por una captura insuficiente o excesiva de datos. El enfoque de “una API universal” no siempre funciona de manera efectiva.

La puerta de enlace API actúa como un único punto de entrada y proxy para que los clientes externos accedan a los servicios de la aplicación. Las puertas de enlace API son eficaces para el equilibrio de carga y la composición de servicios, y ayudan a simplificar la complejidad de los microservicios. Esta compatibilidad permite a los desarrolladores conectar fácilmente sus aplicaciones a diferentes soluciones de almacenamiento de datos, lo que facilita la recuperación, manipulación y gestión eficiente de datos directamente desde la interfaz de WunderGraph.

WunderGraph permite convertir consultas en consultas activas, lo que facilita las suscripciones GraphQL. Para ello, exporte WundergraphOperationscon la siguiente declaración:

exportar configuración predeterminadaWunderGraphOperations OperationsConfiguration ({ operaciones : {  

A continuación se muestra una comparación que muestra lo rápido que es convertir una consulta regular en una consulta en vivo que sondea cada tres segundos:

consulta BestBooks { bestBooks { autor título precio } }

exportar predeterminado configureWunderGraphOperations OperationsConfiguration ({ operaciones : { consultas : { BestBooks : ( config ) = ({ liveQuery : { habilitar : verdadero , pollingIntervalSeconds : 3 , }, }), }, }, });                                   

También puede usar JWT y OAuth2 para obtener acceso detallado. Wundergraph utiliza plantillas JWT de Clerk API. Clerk API es excelente para administrar JWT y claves API. A continuación, se muestra un ejemplo de una plantilla JWT de Clerk que puede usar:

{ "id" : "{{usuario.id}}" , "correo electrónico" : "{{usuario.dirección_de_correo_principal}}" , "nombre_de_usuario" : "{{usuario.nombre_de_usuario}}" , "nombre" : "{{usuario.nombre_de_usuario}}" }            

Para aumentar la seguridad, puede habilitar tokens que permitan a los usuarios realizar solicitudes autorizadas y evitar ataques de repetición. Además, puede agregar proveedores externos de autenticación a WunderGraph, como:

• Auto0
• Google
• GitHub

Cómo unificar API usando WunderGraph en Next.js

El SDK de WunderGraph proporciona todas las funciones necesarias para unificar su API. WunderGraph se puede instalar mediante el gestor de paquetes de Node.

Instale WunderGraph SDK usando el siguiente comando:

npm y @wundergraph / sdk

Después de instalar WunderGraph, use el comando para crear un nuevo proyecto seguido del nombre del proyecto. Si ya tiene un proyecto Next.js en su directorio y desea agregar WunderGraph, ejecute el siguiente comando:npx create-wundergraph-app

npx create - wundergraph - aplicación - init

Unificación de API

WunderGraph simplifica la unificación y la gestión de API al proporcionar muchas funciones que integran varias API sin problemas, lo que le permite crear un punto final unificado a partir de diferentes marcos.

Comience por conectar y examinar su base de datos PostgreSQL usando la función de la biblioteca WunderGraph. Esto le permitirá recuperar información de la base de datos que proporcionó mediante la URL proporcionada. Su URL debe indicar las credenciales y localhost. actúa como un identificador único para su API:introspect.postgresqlapiNamaspace

const mibase de datos = introspección. postgresql ({ apiNamespace : "mydatabase" , DatabaseURL : "[ingrese la URL de la base de datos aquí]" , });  

Al agregar detalles sobre su API, ya sea que desee unificar su API GraphQL o API REST, use el mismo fragmento de código que usamos anteriormente. A continuación, proporcione la URL de su API GraphQL mientras sigue usando la función. Esto ayudará a WunderGraph a comprender su esquema GraphQL:introspect.postgresql

const mygraph = introspect .graphql ({ apiNamespace : "mygraph" , url : " [ingrese la API GraphQL aquí ]" , });  

Después de especificar y analizar las API que desea combinar, utilice el siguiente código para unificarlas añadiéndolas a la aplicación WunderGraph. Puede agregar más de dos API a la aplicación según las necesidades de su proyecto Next.js:

const myApplication = new Application ({ nombre : "api" , apis : [ mydatabase , mygraph , ], });        

Soluciones Apollo GraphQL vs.WunderGraph

Las soluciones GraphQL de Apollo existen desde hace seis años. Es una de las más exitosas y confiables, utilizada por grandes empresas como The New York Times, PayPal y Netflix.

Apollo GraphQL ofrece muchas características y soluciones para mejorar el rendimiento de GraphQL, pero hay dos soluciones que compiten con WunderGraph: Apollo Federation y GraphOS.

Al unificar varias API de GraphQL con Apollo Federation, los esquemas de GraphQL se combinan para crear un supergrafo. Los supergrafos se pueden gestionar y escalar con Apollo GraphOS, que los aloja en la nube y mantiene un registro de esquemas de todos los subgrafos que los componen.

GraphOS proporciona una capa de seguridad unificada para los subgrafos del supergrafo y un enrutador para cada supergrafo. Este enrutador actúa como punto de acceso para las solicitudes de los clientes y las dirige al subgrafo específico del supergrafo. Apollo GraphOS y Apollo Federation trabajan en coordinación para gestionar esquemas y API unificados. Apollo Federation se encarga de escalar las API unificadas, mientras que Apollo Graph OS se encarga de escalar los supergrafos.

Apollo Federation, similar a WunderGraph, unifica las API de GraphQL en un único punto final. Apollo Federation es ideal para microservicios, ya que permite acceder y consultar múltiples API con una sola solicitud. Cuando un cliente realiza una solicitud, el enrutador la gestiona y consulta las API conectadas para ofrecer un resultado unificado.

A continuación se presentan los factores clave que comparan Apollo Federation y WunderGraph:

• Obtención de datos y federación de esquemas: Para mejorar la eficiencia de la obtención de datos, Apollo ofrece consultas persistentes automáticas , que optimizan el tiempo de respuesta y reducen la sobrecarga. Por otro lado, WunderGraph permite obtener datos de múltiples fuentes e implementar consultas en tiempo real en cualquier sistema, lo que habilita servicios en tiempo real. Sin embargo, Apollo ofrece una mejor federación de esquemas gracias a sus numerosas funciones que permiten gestionar supergrafos, como GraphOS.
• Implementación y escalabilidad : WunderGraph mejora la implementación al ofrecer almacenamiento en caché perimetral y escalado automático para optimizar el rendimiento. Además, puede implementar su proyecto en WunderGraph Cloud, y WunderGraph se centrará en la gestión de la infraestructura de su proyecto mientras usted se centra en su desarrollo. Apollo GraphQL ofrece flexibilidad en cuanto a implementaciones. Puede implementar su proyecto con diversos proveedores, como Heroku y Netlify.
• Rendimiento: Apollo GraphQL ofrece numerosas funciones, como la gestión de consultas por lotes, las consultas persistentes y el almacenamiento en caché, que optimizan el rendimiento de los gráficos. WunderGraph ofrece almacenamiento en caché de consultas y de la capa HTTP para mejorar el rendimiento.
• Seguridad: Tanto WunderGraph como Apollo ofrecen proveedores de autenticación de terceros como Auth0 y utilizan tokens para administrar solicitudes.

Conclusión

WunderGraph es una herramienta y plataforma unificadora de API que proporciona las funciones necesarias para unificar las API en diferentes frameworks. Por otro lado, Apollo GraphOS y Federation se encuentran entre los numerosos servicios y soluciones de Apollo GraphQL.

Apollo GraphQL se esfuerza por ser versátil, ofreciendo todos los servicios o soluciones GraphQL necesarios, mientras que WunderGraph se centra en una sola tarea: combinar diferentes API. Lo mejor es que estas plataformas pueden utilizarse conjuntamente. Apollo GraphOS permite gestionar supergrafos, mientras que WunderGraph unifica API. WunderGraph destaca en la unificación de API, ya que permite no solo la unificación de las API GraphQL, sino también la inclusión de API REST.

Monitorear solicitudes GraphQL fallidas y lentas en producción

Si bien GraphQL cuenta con algunas funciones para depurar solicitudes y respuestas, garantiza que GraphQL proporcione recursos de forma confiable a tu aplicación de producción es donde la tarea se complica. Si te interesa garantizar que las solicitudes de red al backend oa servicios de terceros se ejecuten correctamente, prueba LogRocket. https://logrocket.com/signup/

Si quieres conocer otros artículos parecidos a Cómo integrar WunderGraph con su aplicación frontend puedes visitar la categoría Aplicaciones.