GraphQL + Apollo + Next.js: Un Trío Encantador

Hola, y bienvenidos a GraphQL Apollo Next.js, un trío encantador, conmigo, Josh Goldberg. Esta será una charla rápida, así que me gusta pensar en esto como una visión general. El objetivo es emocionarte. Esta es una tecnología realmente genial. Vamos a generar automáticamente tipos y ver introspección y cosas geniales.

El público objetivo de todas estas cosas ingeniosas son personas que son nuevas en Next.js, tal vez conocen GraphQL y quieren una introducción sobre cómo usar Next.js con GraphQL. Un poco sobre mí, esto es algo que me apasiona porque lo hago en mi trabajo. Soy desarrollador de front-end en el equipo de plataforma web en Codecademy, un gran lugar para aprender a programar. Trabajo en nuestras herramientas compartidas en todas nuestras aplicaciones de front-end, como nuestro reciente y continuo cambio de nuestra arquitectura personalizada de React, Rails y webpack a Next.js, que hace mucho más por nosotros y nos ayuda a usar cosas como Apollo y GraphQL. Además, también estoy trabajando en un libro tipo kit de O'Reilly. Así que contáctame si estás interesado en eso. Puedes encontrarme en Twitter en Joshua K Goldberg o en mi sitio web, JoshuaKGoldberg.com.

Sumergámonos. Next.js, un marco encantador de React. En pocas palabras, Next.js proporciona la carga de datos y el enrutamiento para las páginas del sitio web de React. Hace muchas otras cosas geniales para nosotros, como construcciones y optimizaciones realmente excelentes, pero para los propósitos de esta charla general, solo nos importa la carga de datos y el enrutamiento. Hay una gran herramienta, Create Next App, que los chicos de Next hicieron, similar a Create React App. Ya lo han hecho por nosotros en GitHub.com/Joshua K. Goldberg/GrapQL. Una galaxia, un trío encantador. Nuevamente, un saludo a mi sitio web, JoshuaKGoldberg.com. Si quieres obtener estas cosas, voy a pasar rápidamente por estas diapositivas. Así que para empezar, ya he clonado el repositorio y he ejecutado yarn. Si ejecutamos yarn dev, Next.js se inicia muy rápidamente y cuando visitamos por primera vez una URL, comienza a cargar la página, lo cual puede llevar un poco de tiempo al principio. Así que simplemente voy a ver la página. Páginas/index. Cada archivo en el directorio de páginas, que puede estar en tu raíz o en la carpeta source, exporta por defecto un componente para la página. En el caso que estamos viendo en la diapositiva aquí, no tienes que devolver mucho, solo un poco de JSX, y luego Next.js construirá la página para ti en función de esa ruta. El contenido de la página depende completamente de ti. Puedes usar cualquier contenido HTML, cualquier estilo que desees, siempre y cuando sea un componente de React.

¡Voilà, aquí vamos, podemos ver que este hermoso componente inicial de Next ahora se está renderizando de repente! ¡Bueno para nosotros! Una pequeña característica genial de Next para comenzar es su lógica de enrutamiento. Next admite navegaciones de estilo SPA (aplicación de una sola página). En lugar de hacer que el navegador cargue una página HTML completamente nueva cada vez que quieres navegar, Next proporciona un componente de enlace que envuelve y toma el control del comportamiento de enlace de tus etiquetas de anclaje normales. Vamos a una página rápida, pages/link, lo que significa que si vamos a /link, obtenemos la página correspondiente en nuestro navegador para este componente y archivo. Ahora, este utiliza el componente de enlace como se muestra en la diapositiva, lo que significa que si hago clic en home, que es una etiqueta de anclaje, nota cómo la página no se actualiza, no hay un nuevo archivo HTML, simplemente me lleva directamente rápidamente al componente de inicio. ¡Impresionante! Y si retrocedo y avanzo en la barra de URL del navegador, puede realizar navegaciones estilo spot sin una actualización completa. Fantástico, fantástico, gracias Next.

He visto rumores en línea y cierta confirmación de esta idea de que Next realmente precargará datos para los enlaces que aparecen dentro de tu área visible, si es un enlace a una página de Next utilizando este enlace, lo cual creo que es la característica más genial del mundo. La forma en que Next puede hacer eso no es solo controlando la generación de tu página y el enlace, sino también los datos que se utilizan para alimentar esas páginas. Si tienes una página estática, es decir, una página que se genera en un archivo HTML estático que se puede servir de inmediato, muy bueno para el rendimiento, lo recomiendo encarecidamente cuando sea posible. Next te permite exportar una función GetStaticProps desde ese archivo, que puede ser asíncrona, y de alguna manera encuentra los datos para esa página, luego devuelve los datos como props para pasarlos al componente predeterminado de esa página. En desarrollo, esta función GetStaticProps se llamará cada vez que intentes cargar la página, pero en producción, la página se genera previamente con HTML y luego estos datos se almacenan en caché para que no tengas que consultarlos una y otra vez. Echemos un vistazo rápido a una página pages/static-props. Aquí vemos la función GetStaticProps, que llama a una configuración de API ficticia que espera 2.5 segundos y luego devuelve algunos datos. Y luego el componente en sí mismo simplemente los utiliza como una prop y luego los mapea para renderizar una lista. Veamos con static props, esperamos 2.5 segundos para simular la llamada a la API y ¡voilà, tenemos nuestros datos estáticos! ¡Impresionante! Eso es todo lo que tienes que hacer para pasar datos a los componentes de Next. Ahora acabo de abrir las DevTools y recomiendo encarecidamente que si aún no has instalado las DevTools del navegador React, te brindan este increíble panel de componentes que muestra una vista en árbol de todos tus componentes. Y lo voy a usar solo para mostrar que React está obteniendo el array exacto que esperábamos de la API de ColSum. ¡Me encanta! Gracias Next JS. Puede que hayas notado en el código que en realidad tenía este miembro de revalidación aquí. No tienes que construir todas tus páginas estáticas de antemano con Next JS. Puedes usar la regeneración estática incremental o ISR. Dice que en lugar de construir estas cosas de antemano, cada vez que alguien solicite una página que aún no esté construida, durante los próximos X segundos, usa un determinado conjunto de datos que luego buscarás ahora.

En otras palabras, una vez que se obtiene una página no recuperada o no almacenada en caché, se obtienen los datos para esa página y luego se almacenan en caché durante ese número de segundos. Es complicado de explicar verbalmente, pero es genial porque significa que en lugar de construir todas las páginas de antemano, puedes esperar a construirlas hasta que las necesites. Esto ahorra mucho tiempo, especialmente en sitios de comercio electrónico o sitios con muchas localizaciones y traducciones. Además, la carga de datos se almacena en caché y se deduplica entre las solicitudes. Next.js se encarga de toda esa magia por ti, solo tienes que definir tu lógica de ejecución y Next se encargará del resto. ¡Yay Next.js!

Algunas páginas necesitan datos del lado del servidor, es decir, datos que se obtienen en cada solicitud. Aquí hay una desventaja, ya que si necesitas obtener datos en cada solicitud, por ejemplo, un panel de aprendizaje para una herramienta de aprendizaje o una línea de tiempo para una aplicación de redes sociales, tu página debe esperar a que se realice esa solicitud cada vez que se llame. Sin embargo, obtienes datos frescos en cada solicitud, por lo que hay pros y contras. Visualmente se ve muy similar, solo que en lugar de usar get-static-props, se utiliza get-server-side-props. En resumen, Next.js maneja la infraestructura del back-end de tus páginas front-end, lo cual es una forma muy interesante de ver cómo están surgiendo estas nuevas herramientas front-end como Next.js y Gatsby. Dentro del ámbito del front-end, hay una sección de infraestructura del back-end que está siendo abordada por estos frameworks.

Cambiando un poco de tema, hablemos de Code Gen antes de volver a cómo se integra con Next.js. Vamos a utilizar los tipos fuertes y los esquemas impresionantes de GraphQL para generar código automáticamente. Es posible que ya hayas utilizado GraphiQL, una herramienta increíble que te permite previsualizar consultas y puntos finales de GraphQL. Voy a abrir rápidamente mi segundo repositorio aquí, ejecutando 'yarn start'. Ya lo he clonado y ejecutado 'yarn'. Este repositorio utiliza la biblioteca Express GraphQL para configurar un pequeño servidor GraphQL que tiene dos consultas, todo en un orden aleatorio. Si consulto 'random', me devuelve un chiste aleatorio de gatos. Soy una persona triste y esto me hace feliz. Puedes ver esto en mi GitHub, 'graphql-galaxy', un servidor GraphQL encantador, o el estándar con muchas más características, 'swappy-graphql'. En resumen, lo que me entusiasma aquí es que la seguridad de tipos de la API de GraphQL significa que herramientas como GraphQL y GraphiQL pueden generar código automáticamente a partir de los esquemas. Cuando digo generar código, no me refiero solo a darte un poco de IntelliSense, me refiero a que el contenido del sitio web graphqlcodegenerator.com genera literalmente tu código a partir de tus consultas de GraphQL. Increíble. Para empezar, echemos un vistazo rápido a un archivo YAML muy simple. Ahí está, codegen.yaml. Esto está en mi repositorio y lo he configurado.

Veamos cada una de sus líneas. En este archivo, estoy diciendo que tome del esquema, este que acabamos de ver, mi GraphQL y genere mi archivo TS generado por origen utilizando el script de tipo graphql-codegen-plugin. En mi paquete de JSON, he tomado este graphql-codegen-cli y el complemento para TypeScript y he generado este script GQL.

Entonces, cuando ejecuto en una nueva terminal, yarn gql, va a generar este archivo source-generated graphql.ts. Toma un poco de tiempo, así que lo he pre-creado. Y aquí tenemos la primera instancia en esta charla de algunos tipos de TypeScript que se crean para nuestro endpoint de GraphQL. Si recuerdas el endpoint, viste que había una consulta que tenía dos cosas, dos all, que es una matriz de cadenas, y un random, que es una sola cadena. Estos tipos son un poco más complicados de lo que esperaba, pero está bien. Y eso es increíble. Podemos generar tipos completos de TypeScript para nuestros esquemas de GraphQL con un solo comando, yarn gql. Y ese es solo uno de los complementos que tenemos disponibles, el de TypeScript. Estos complementos son increíblemente configurables, y tengo enlaces a la documentación al final de estas diapositivas. Puedes generar hooks, componentes, componentes de orden superior, todo tipo de cosas locas para tu código.

Ahora, aquellos de ustedes que usan archivos .graphql pueden haber experimentado esto, pero para aquellos que no lo hacen, pueden crear un archivo .graphql para sus consultas de GraphQL y obtener un bonito resaltado de sintaxis y características de ejecución del editor IDE en él. Me gusta hacer esto, porque facilita que mi generación de código GraphQL cree funciones, componentes y tipos para mí. En este archivo queries.graphql, he dicho que en mi aplicación me gustaría tener dos consultas disponibles. Obtengo la consulta all, que devuelve todo, y la consulta random, que devuelve aleatorio. He configurado un archivo gql operations para mi archivo code gen dash operations yaml, que examina estos documentos, estas consultas.graphql, y agrega este complemento de operaciones de TypeScript. Entonces, si hago yarn gql, olvidé el comando, gql operations, ahí lo tenemos, y echo un vistazo a mi archivo de operaciones GraphQL, aquí vemos que no solo tengo tipos para todas mis consultas, similares a antes, ahora tengo tipos para mis consultas específicas, estas muy específicas que he definido en mi archivo GraphQL. Mi consulta random está específicamente tomando una cadena aleatoria, o mejor dicho, devolviendo una cadena aleatoria. Sus variables son, esta es otra forma de decir nada. Eso es asombroso. Ahora, si tengo código que necesita interactuar con mis consultas de GraphQL, puedo tener tipos generados automáticamente para los tipos de retorno de esas consultas, lo cual es súper útil. Puede que estés pensando, está bien, eso es agradable, has generado tipos para cosas, podrías haberlos escrito a mano. ¿Cómo son realmente útiles estos archivos .graphql? ¿Cómo se utilizan realmente en algo bueno? Para mostrarte eso, ahora presentaré Apollo, que es un conjunto fantástico de herramientas y CLIs y trucos para GraphQL. Apollo proporciona un conjunto de herramientas para administrar GraphQL, y en particular hoy vamos a ver sus áreas de generación de código, la forma en que interactúa e integra con GraphQL code-gen. Y no quiero engañarte, hay muchas cosas geniales en Apollo. Cada una de las cuales honestamente podría tener una gran lista de charlas de conferencias, cosas de servidor, paneles de control para tus implementaciones, federación para unificar múltiples puntos finales de GraphQL. Es increíble la cantidad de cosas que han hecho, y muy doloroso poder hablar en este tiempo limitado solo de una. Pero así es la vida.

Apollo Client es una biblioteca de estado que se integra estrechamente con las solicitudes de GraphQL. Aquí tengo un ejemplo de código rápido. Si quieres crear un nuevo cliente de Apollo, le proporcionas una URI y aquí también le he dado una caché en memoria para sus solicitudes. Luego, podrás utilizar client.query para enviar consultas a esa URI de GraphQL y almacenar los resultados en la caché para que se almacenen y se dedupliquen correctamente. Debo mencionar que requiere que las consultas se pasen a través de este formateador de cadena GQL, que realiza algunas tareas detrás de escena y también permite que las extensiones de VS Code y otras versiones de IDE te brinden un resaltado de sintaxis agradable. Con estas pocas líneas de código, puedes enviar una consulta a un punto final de GraphQL, obtener los resultados y almacenarlos en caché en memoria de manera sencilla. Pero la verdadera magia de Apollo Client se muestra cuando comienzas a utilizar sus herramientas para otros frameworks, como Apollo Provider, que configura un contexto de React para que Apollo Client esté disponible en las consultas internas. Para comenzar, puedes utilizar el gancho useApolloClient en tus componentes, y aquí estoy empezando a hacerlo. Echemos un vistazo a mis componentes, componente Apollo, ¡no, el equivocado! Aquí está. En mi función GetServerSideProps, ni siquiera he utilizado el proveedor todavía, solo estoy creando un nuevo cliente Apollo y esperando la consulta del cliente. Aquí obtengo los resultados en mi componente como chistes, aquí los tenemos, devuelvo los chistes de las props, que pueden ser un error o los datos, y luego vuelvo a los componentes, y aquí tenemos mi bonito GQL GetRandomJoke. Pero hay algunas herramientas realmente útiles, componente Apollo, oops, componente Apollo. Hay algunas herramientas realmente útiles que se generan para ti. Por ejemplo, si quieres escribir una consulta, puedes hacerlo de la siguiente manera: const result = Apollo.UseQuery y luego pasar tu consulta GQL. O puedes utilizar Apollo Code.Gen para generar las funciones de Apollo, los ganchos de Apollo que utilizan tus consultas de GraphQL. Aquí tengo el código generado por Apollo Client Code.Gen, que te mostraré el esquema. Es realmente pequeño y hermoso. Este complemento TypeScript React Apollo para tu Code.Gen, que luego genera estos ganchos que utilizan Apollo Client, que luego están disponibles en los componentes envueltos por Apollo Provider. Y ahora tengo un componente que, en una sola línea de código, ejecuta esta consulta aleatoria, que está definida en mi código generado automáticamente a partir de mi archivo .graphql. En resumen, juntando todo, he definido en mi archivo .graphql una consulta aleatoria que luego se genera automáticamente en una variable constante y un gancho que devuelve datos, error o carga, uno de los cuales se completará en cualquier momento dado. Y si voy a las páginas de origen con la consulta de Apollo, espero a que se construya la página, ¡voilà! Ahora en mi página obtengo un chiste aleatorio de un gato cada vez que cargo la página. Solo echa un vistazo a las herramientas de red para ver cómo se ve, boop-ba-boop, aquí tenemos mi solicitud de GraphQL que tiene una carga útil con la consulta y luego la respuesta de datos que me envían. Increíble. Utilizando este proveedor de Apollo, podemos crear estos ganchos de consulta de Apollo que devuelven datos, error o carga en tres estados y generar una lista completa de cosas que podemos utilizar a partir de nuestro archivo .graphql. Desafortunadamente, solo puedo mostrarte estos ejemplos rápidos de useQuery, useLazyQuery, useMutation, useSubscription, hay muchas cosas y solo se muestra useQuery, pero créeme, hay muchas cosas geniales y tengo documentación en las diapositivas para obtener más información si estás interesado. GraphQL code gen puede generar componentes y ganchos de Apollo a partir de archivos de GraphQL, y creo que es una forma increíble de vivir tu vida. Tomas tus consultas de GraphQL y se genera todo este código para ti, para que no tengas que escribir código repetitivo, y te recomiendo encarecidamente que lo pruebes si tienes la oportunidad. ¡Alucinante! Ahora hablemos un poco sobre dónde puedes obtener más información. Tengo todas estas cosas y un poco más en los repositorios complementarios, GraphQL galaxy, un trío encantador y un servidor GraphQL encantador. Los recursos técnicos principales, nextjs.org, GraphQL code generator.com y Apollo GraphQL.com, son excelentes. Y si quieres ver algunas adiciones interesantes, Blitz.js es un framework que se basa en Next.js y RemixRun es una especie de competidor de Next.js que se lanzó recientemente como código abierto. Y por último, mi favorito, TypeScriptBlind.org, simplemente un gran lenguaje para escribir tus cosas. Gracias a todos, en particular a los organizadores de GraphQL galaxy. Soy Josh Goldberg, puedes encontrarme en Twitter como JoshuaKGoldberg y en la web en joshuakgoldberg.com. ¡Gracias y adiós!