No importa cuán grande o pequeña sea su aplicación, tendrá que lidiar con la obtención de datos de un servidor remoto en algún momento. En la interfaz, esto generalmente implica llegar a un punto final REST, transformar la respuesta, almacenarla en caché y actualizar su interfaz de usuario. Durante años, REST ha sido el status quo para las API, pero durante el año pasado, una nueva tecnología de API llamada GraphQL se ha disparado en popularidad debido a su excelente experiencia de desarrollador y su enfoque declarativo para la búsqueda de datos.
En esta publicación, analizaremos un par de ejemplos prácticos para mostrarle cómo la integración de GraphQL en su aplicación resolverá muchos puntos débiles al trabajar con datos remotos. Si es nuevo en GraphQL, ¡que no cunda el pánico! También destacaré algunos recursos para ayudarlo a aprender GraphQL usando la pila Apollo, para que pueda comenzar el 2018 antes de la curva.
GraphQL 101
Antes de profundizar en cómo GraphQL le facilita la vida como desarrollador front-end, primero debemos aclarar qué es. Cuando hablamos de GraphQL, nos referimos al lenguaje en sí oa su rico ecosistema de herramientas. En esencia, GraphQL es un lenguaje de consulta escrito desarrollado por Facebook que le permite describir sus requisitos de datos de forma declarativa. La forma de su resultado coincide con la forma de su consulta: en el siguiente ejemplo, podemos esperar recibir un objeto con un currency propiedad y una rates propiedad que contiene una matriz de objetos con ambos currency y rate teclas.
{
rates(currency: "USD") {
currency
rates {
currency
rate
}
}
}Cuando hablamos de GraphQL en un sentido más amplio, a menudo nos referimos al ecosistema de herramientas que lo ayudan a implementar GraphQL en su aplicación. En el backend, usará Apollo Server para crear un servidor GraphQL, que es un único punto final que analiza una solicitud GraphQL y devuelve datos. ¿Cómo sabe el servidor qué datos devolver? Utilizará GraphQL Tools para crear un esquema (como un plano para sus datos) y un mapa de resolución (solo una serie de funciones que recuperan sus datos de un punto final REST, una base de datos o cualquier otro lugar que elija).
Todo esto suena más complicado de lo que realmente es: con Apollo Launchpad, un patio de juegos de servidores GraphQL, puede crear un servidor GraphQL que funcione en su navegador en menos de 60 líneas de código. 😮 Haremos referencia a este Launchpad que creé que envuelve la API de Coinbase a lo largo de esta publicación.
Conectará su servidor GraphQL a su aplicación con Apollo Client, un cliente rápido y flexible que busca, almacena en caché y actualiza sus datos por usted. Dado que Apollo Client no está acoplado a su capa de vista, puede usarlo con React, Angular, Vue o JavaScript simple. Apollo no solo es multiplataforma, sino que también es multiplataforma, con React Native & Ionic compatible desde el primer momento.
¡Hagamos un intento! 🚀
Ahora que está bien versado en lo que es GraphQL, ensuciemos nuestras manos con un par de ejemplos prácticos que ilustran cómo es desarrollar su interfaz con Apollo. Al final, creo que estará convencido de que una arquitectura basada en GraphQL con Apollo puede ayudarlo a enviar funciones más rápido que antes.
1. Agregue nuevos requisitos de datos sin agregar un nuevo punto final
Todos hemos estado aquí antes: pasas horas creando un componente de interfaz de usuario perfecto cuando, de repente, los requisitos del producto cambian. Rápidamente se da cuenta de que los datos que necesita para cumplir con estos nuevos requisitos requerirían una cascada complicada de solicitudes de API o, lo que es peor, un nuevo punto final REST. Ahora bloqueado en su trabajo, le pide al equipo de backend que cree un nuevo punto final solo para satisfacer las necesidades de datos de un componente.
Esta frustración común ya no existe con GraphQL porque los datos que consume en el cliente ya no están acoplados al recurso de un punto final. En cambio, siempre llega al mismo punto final para su servidor GraphQL. Su servidor especifica todos los recursos que tiene disponibles a través de su esquema y permite que su consulta determine la forma del resultado. Ilustremos estos conceptos usando nuestro Launchpad de antes:
En nuestro esquema, observe las líneas 22 a 26 donde definimos nuestro ExchangeRate escribe. Estos campos enumeran todos los recursos disponibles que podemos consultar en nuestra aplicación.
type ExchangeRate {
currency: String
rate: String
name: String
}Con REST, está limitado a los datos que proporciona su recurso. Si tu /exchange-rates el punto final no incluye el nombre, entonces deberá alcanzar un punto final diferente como /currency para los datos o créelo si no existe.
Con GraphQL, sabemos que ese nombre ya está disponible para nosotros inspeccionando nuestro esquema, por lo que podemos consultarlo en nuestra aplicación. Intente ejecutar este ejemplo en Launchpad agregando el campo de nombre en el panel lateral derecho.
{
rates(currency: "USD") {
currency
rates {
currency
rate
name
}
}
}Ahora, elimine el campo de nombre y ejecute la misma consulta. ¿Ves cómo cambia la forma de nuestro resultado?
Su servidor GraphQL siempre le devuelve exactamente los datos que solicita. Nada mas. Esto difiere significativamente de REST, donde a menudo tiene que filtrar y transformar los datos que obtiene del servidor en la forma que necesitan los componentes de la interfaz de usuario. Esto no solo le ahorra tiempo, sino que también da como resultado cargas útiles de red más pequeñas y ahorros de CPU al cargar y analizar la respuesta.
2. Reducir la repetición de la gestión estatal
La obtención de datos casi siempre implica la actualización del estado de su aplicación. Por lo general, escribirá código para rastrear al menos tres acciones: una para cuando los datos se están cargando, otra si los datos llegan correctamente y otra si los datos fallan. Una vez que llegan los datos, debe transformarlos en la forma que esperan los componentes de la interfaz de usuario, normalizarlos, almacenarlos en caché y actualizar su interfaz de usuario. Este proceso puede ser repetitivo, requiriendo innumerables líneas de repetición para ejecutar una solicitud.
Veamos cómo Apollo Client elimina este tedioso proceso por completo mirando una aplicación React de ejemplo en CodeSandbox. Navega a `list.js` y desplázate hasta la parte inferior.
export default graphql(ExchangeRateQuery, {
props: ({ data }) => {
if (data.loading) {
return { loading: data.loading };
}
if (data.error) {
return { error: data.error };
}
return {
loading: false,
rates: data.rates.rates
};
}
})(ExchangeRateList);En este ejemplo, React Apollo, la integración de React del cliente de Apollo, vincula nuestra consulta de tipo de cambio a nuestro componente ExchangeRateList. Una vez que Apollo Client ejecuta esa consulta, rastrea la carga y el estado de error automáticamente y lo agrega al data apuntalar. Cuando Apollo Client reciba el resultado, actualizará el data prop con el resultado de la consulta, que actualizará su interfaz de usuario con las tasas que necesita para renderizar.
Bajo el capó, Apollo Client normaliza y almacena en caché sus datos por usted. Intente hacer clic en algunas de las monedas en el panel de la derecha para ver la actualización de datos. Ahora, seleccione una moneda por segunda vez. ¿Observa cómo los datos aparecen instantáneamente? ¡Ese es el caché de Apolo en funcionamiento! Obtiene todo esto de forma gratuita simplemente configurando Apollo Client sin configuración adicional. 😍 Para ver el código donde inicializamos Apollo Client, consulte `index.js`.
3. Depurar de forma rápida y sencilla con Apollo DevTools y GraphiQL
¡Parece que Apollo Client hace mucho por ti! ¿Cómo echamos un vistazo al interior para entender qué está pasando? Con características como inspección de la tienda y visibilidad completa de sus consultas y mutaciones, Apollo DevTools no solo responde esa pregunta, sino que también hace que la depuración sea sencilla y, me atrevo a decir, ¡divertida! 🎉 Está disponible como una extensión para Chrome y Firefox, y React Native estará disponible próximamente.
Si desea seguir adelante, instale Apollo DevTools para su navegador preferido y navegue hasta nuestro CodeSandbox del ejemplo anterior. Deberá ejecutar el ejemplo localmente haciendo clic en Descargar en la barra de navegación superior, descomprimiendo el archivo, ejecutando npm install, y finalmente npm start. Una vez que abra el panel de herramientas de desarrollo de su navegador, debería ver una pestaña que dice Apollo.
Primero, echemos un vistazo a nuestro inspector de tiendas. Esta pestaña refleja lo que se encuentra actualmente en la caché de Apollo Client, lo que facilita la confirmación de que sus datos se almacenan correctamente en el cliente.
Apollo DevTools también le permite probar sus consultas y mutaciones en GraphiQL, un editor de consultas interactivo y un explorador de documentación. De hecho, ya usó GraphiQL en el primer ejemplo donde experimentamos agregando campos a nuestra consulta. En resumen, GraphiQL presenta autocompletado a medida que escribe su consulta en el editor y documentación generada automáticamente según el sistema de tipos de GraphQL. Es extremadamente útil para explorar su esquema, sin carga de mantenimiento para los desarrolladores.
Intente ejecutar consultas con GraphiQL en el panel lateral derecho de nuestro Launchpad. Para mostrar el explorador de documentación, puede colocar el cursor sobre los campos en el editor de consultas y hacer clic en la información sobre herramientas. Si su consulta se ejecuta correctamente en GraphiQL, puede estar 100% seguro de que la misma consulta se ejecutará correctamente en su aplicación.
Sube de nivel tus habilidades GraphQL
Si llegaste a este punto, ¡excelente trabajo! 👏 Espero que hayan disfrutado de los ejercicios y hayan probado cómo sería trabajar con GraphQL en la interfaz.
¿Tienes hambre de más? 🌮 Conviértalo en su resolución de Año Nuevo 2018 para aprender más sobre GraphQL, ya que espero que su popularidad crezca aún más en el próximo año. Aquí hay una aplicación de ejemplo para comenzar a presentar los conceptos que aprendimos hoy:
- Reaccionar: https://codesandbox.io/s/jvlrl98xw3
- Angular (iónico): https://github.com/aaronksaunders/ionicLaunchpadApp
- Vue: https://codesandbox.io/s/3vm8vq6kwq
Continúe y GraphQL (y asegúrese de etiquetarnos en Twitter @apollographql por el camino)! 🚀