Cómo usar Suspense y GraphQL con Apollo para construir grandes experiencias de usuario

Hola a todos. Así que hoy hablaremos sobre cómo usar suspense y GraphQL con Apollo Client para construir excelentes experiencias de usuario. Pero primero, permítanos presentarnos rápidamente. Así que soy Gerald Miller. Soy un ingeniero de software principal en Apollo GraphQL, trabajando como mantenedor en Apollo Client. Y puedes encontrarme en línea como Gerald Miller. Y mi nombre es Alessia Bellacerio. También soy ingeniera de software y trabajo en Apollo Client, y puedes contactarme en AlessBell.

Así que primero comenzaremos con lo que trata esta charla. Y comenzaremos con una breve visión general de los conceptos de React Suspense. Luego veremos una aplicación real renderizada por el cliente que está utilizando los nuevos hooks de suspense de Apollo Client, lanzados oficialmente en agosto de este año, para ver qué se puede obtener al combinar estas tecnologías. Y también es importante hablar de lo que no vamos a tratar hoy, que son los React Server Components y Streaming SSR. Aunque son super geniales, y hay muchas cosas geniales ocurriendo allí, simplemente no es algo que tengamos tiempo para tocar. Si estás interesado en esos, te recomendamos que eches un vistazo a nuestro paquete experimental en Apollo Experimental of XJS App Support. Un saludo a nuestro co-mantenedor, Lenz, quien ha hecho gran parte del trabajo en esto. Además, no vamos a hablar sobre la implementación del soporte de suspense en una biblioteca de obtención de data, porque créanos, es un poco más complicado de lo que parece.

Bueno, volvamos a enero de 2018 cuando Andrew Clarke tuiteó esto. Andrew Clarke es miembro del equipo central de React, que actualmente trabaja en Percel. Y este tweet fue enviado al universo en enero de 2018, como dije, más de un mes antes de que Dan Abramoff diera su charla en JSConf Iceland titulada, Más allá de React 16, con algunas de las primeras demostraciones públicas de suspense. Y creo que este es un buen lugar para comenzar, porque lo que Andrew está hablando aquí es muy relevante para suspense y lo que te mostraremos. Andrew dijo, una razón por la que iOS se siente mucho mejor que la web, menos estados de carga innecesarios. Mira lo que sucede cuando tocas una opción en la aplicación de configuración en iOS. En lugar de hacer la transición de la vista de inmediato y mostrar un spinner de respaldo por un segundo, se detiene por un momento, prepara la vista. Cuando la vista está lista, se desliza. Y simplemente se siente mucho más suave que si vieras un flash de un spinner. Entonces, esto es una de las cosas que Suspense nos ayuda a hacer, coordinar estas transiciones en nuestra aplicación para una experiencia de usuario realmente agradable. Primero, hablemos un poco sobre el status quo hoy. Entonces, para aquellos de ustedes que han usado Apollo Client durante algún tiempo, deberían estar familiarizados con el hook de consulta. Así que vamos a empezar a ver solo un ejemplo que usa use query, que debería parecer familiar a todos nosotros aquí. Entonces, con un hook como use query, estás obteniendo una lista de álbumes, y lo importante que debes notar aquí es que el hook de consulta te va a dar este booleano de carga.

Y entonces, nuestro componente de álbumes que se va a renderizar cuando hagamos clic en este botón aquí será responsable de renderizar la interfaz de usuario de carga hasta que los data se devuelvan de nuestra solicitud de red, y vemos ese temido flash de un spinner aquí.

Una cosa antes de que veamos algunos ejemplos prácticos, nos adentremos en una demostración, que queríamos señalar aquí es que vamos a hablar mucho sobre los estados de carga en esta charla. Pero reducir suspense a solo, ya sabes, esta noción de que suspense se trata solo de mostrar y una forma diferente de mostrar tu interfaz de usuario de fallback en tu aplicación, perdería el valor central de suspense por completo.

Y eso es otra conclusión que esperamos que tengan hoy. Que suspense nos da estas herramientas realmente poderosas para administrar y coordinar transiciones en nuestra aplicación, más allá de solo la experiencia de carga inicial o la UX en la navegación, etc., pero son realmente estas transiciones las que son tan fundamentales para cómo el usuario está experimentando tu aplicación y hacerlas lo más agradables, lo más suaves posible.

Así que hoy, estamos felices de anunciar... Consulta de Suspense Utilizada. Así que este es nuestro nuevo hook lanzado en Apollo Client 3.8 que es principalmente responsable de añadir soporte de suspense en tu aplicación. Entonces, ¿qué es la Consulta de Suspense Utilizada? Es esencialmente una consulta de uso suspense que recupera algunos datos que están integrados con React 18 Suspense, que incluye soporte para las transiciones de React 18.

Así que durante el resto de esta masterclass, vamos a explorar esta API, lo que Apollo te ofrece, a través de la lente de este clon de Spotify que hemos construido. Esto está totalmente integrado con las características de suspense de Apollo, junto con React, para darte una idea de cómo funciona trabajar juntos con esta tecnología. Quiero señalar un par de cosas clave que vamos a estar mirando aquí, que son estas diferentes secciones. Así que cada una de estas áreas de color representa una diferente área de nuestra interfaz de usuario que carga algunos datos. Así que ves que tenemos la barra lateral allí. Tenemos nuestra área de ruta principal, que es esa lista de reproducción. En la esquina superior derecha, tenemos ese menú de usuario verde. Abajo en la parte inferior, tenemos la barra de reproducción allí. Así que de nuevo, cada una de estas áreas representa un área de nuestra aplicación que carga algunos datos.

Así que vamos a echar un vistazo y ver cómo se ve esto a través de la lente de use query tal como está hoy, si fuera a cargar esta página de nuevo. Sí, y aquí podemos ver el punto de partida de nuestra interfaz de usuario. Así que con las áreas resaltadas alrededor de cada una de las cuatro fronteras que vemos en nuestra aplicación que son cada una responsables de buscar sus propios datos, podemos ver este efecto de palomitas de maíz a medida que todas se cargan y dejan de renderizar su interfaz de usuario de fallback y devuelven una interfaz de usuario poblada con datos. Así que vemos que la barra lateral entra primero, luego la barra de reproducción en la parte inferior. El menú de usuario en algún momento también es capaz de comenzar a renderizar con datos, y luego finalmente nuestro componente de ruta. Y así, este es un efecto bastante brusco con cada componente apareciendo, ya sabes, cuando es capaz de empezar a mostrar al usuario algunos datos. Así que lo que vamos a hacer es que vamos a actualizar esta aplicación de use query a use suspense query. Así que vamos a sumergirnos y escribir algo de código juntos. Así que de nuevo, aquí está mi aplicación. Sólo voy a refrescar para mostrarles que estamos en ese mismo estado que acabamos de ver con ese efecto de palomitas de maíz. Esto se renderiza usando use query en este momento. Pero vamos a empezar convirtiendo uno de nuestros componentes a use suspense query. Así que sólo para darles una pequeña idea de lo que estamos viendo aquí. Aquí está nuestro diseño principal. Puedes ver esas áreas. De nuevo, cada una de esas eran áreas de color. Mira la barra lateral, el menú de usuario o el componente de ruta y nuestra barra de reproducción allí.

Pero vamos a sumergirnos primero en el menú de usuario aquí. Así que esto es un uso bastante típico de use query. Como puedes ver, estamos llamando al hook use query en nuestro componente de menú de usuario con ese Booleano de carga y para convertir. Voy a empezar aquí simplemente reemplazando mi importación desde Apollo client para use query a use suspense query. Voy a bajar a mi uso de use query. Asegurémonos de que se llama a use suspense query. Vamos a ver algo inmediatamente, que es que este Booleano de carga no es realmente algo que se exporta de este hook cuando lo conviertes a esto. Y de nuevo, esto es porque en el mundo de suspense, no estamos gestionando ese estado de carga directamente en este componente. Así que lo que voy a hacer es simplemente eliminar ese Booleano de carga. Voy a eliminar ese estado de carga por completo de este componente. Y con eso, vamos a nuestra aplicación y echamos un vistazo a ver qué hizo ese cambio aquí.

Bueno, estamos viendo una pantalla negra al principio, en lugar de la interfaz de usuario de fallback para el menú de usuario en el componente de la esquina superior derecha allí. Y eso es porque aún no hemos añadido un límite de suspense. Así que react sabe qué interfaz de usuario de fallback mostrar para ese componente. Así que vamos a añadir un límite de suspense alrededor del menú de usuario para renderizar esa interfaz de usuario de fallback. Genial. Para hacerlo, voy a entrar en mi diseño aquí. Y para empezar, voy a importar suspense de react. Y con eso, suspense nos da un componente que podemos envolver alrededor de un poco de nuestra interfaz de usuario. Y esto toma una única prop llamada fallback, que es la interfaz de usuario que quiero mostrar mientras el componente está cargando. Así que aquí voy a usar el estado de carga del menú de usuario como mi interfaz de usuario de fallback mientras este componente está suspendiendo. Así que con eso en su lugar, vamos a ver qué hizo eso a nuestra aplicación aquí. OK, y vimos el cuadro resaltado en verde y ya no más pantalla en blanco en la carga inicial. Así que ahora estamos usando suspense para renderizar el fallback sólo para el menú de usuario allí. Pero aparte de eso, aún no hemos cambiado nuestra experiencia de usuario. Así que vemos que, ya sabes, suspense no es una varita mágica que podemos agitar en nuestras aplicaciones. Pero antes de que podamos mirar la componibilidad de nuestros límites de suspense y el verdadero poder que obtenemos al usar suspense, vamos a añadir límites de suspense alrededor de nuestros otros tres componentes para que podamos explorar algunos de estos conceptos un poco más. Genial. Así que, ya que estamos en el diseño aquí, voy a empezar aquí. Vamos a empezar envolviendo cada una de estas áreas que cargan algunos datos con nuestros componentes de suspense, vamos a hacer nuestra barra lateral, nuestra barra de reproducción, y luego asegurémonos de hacer también la ruta.

Y para cada uno de estos, asegurémonos de que estamos utilizando el estado de carga correcto aquí, y nosotros usamos el estado de carga de la barra lateral para aquí, el estado de carga de la ruta para la ruta y la barra de reproducción estado de carga para la barra de reproducción. Y vayamos a cada uno de estos, estos componentes también. Queremos actualizar estos para ser integrados con suspense. Así que voy a venir aquí a mi importación, voy a reemplazar la importación para usar query con use suspense query, voy abajo al uso aquí, asegurándome de que estoy usando use suspense query. De nuevo, ya no necesitamos ese Booleano de carga. Así que puedo eliminar eso. Y luego mi estado de carga, puedo deshacerme de él. Hago lo mismo para la barra de reproducción, actualizo use query para usar suspense query, lo llamo, me deshago del Booleano de carga, me deshago del estado de carga. Espero que estés empezando a ver un patrón aquí, y esto es algo que quiero señalar también que es importante cuando estamos diseñando use suspense query, queríamos que se sintiera familiar para aquellos que han utilizado use queries para que esperemos en la gran mayoría de los casos de uso, debería ser tan fácil como actualizar esta importación y hacer esto. Por supuesto, obviamente, tendrás que tener un estado de carga al que volver, pero ahí vamos. Así que con esa actualización, vamos a seguir adelante y volver a nuestra aplicación y ver qué cambios hicieron.

Genial. Gracias, Gerald. Entonces, aún no hemos solucionado el problema de UX que teníamos con use query. Y prometo, estamos mucho más cerca de poder mejorar esta experiencia de carga. Pero el suspense nos está dando un superpoder ahora. Ahora que todos nuestros componentes dependen del suspense para mostrar esa alternativa de carga, podemos usar esta API, esta API muy componible de React que nos da el suspense para agrupar estas actualizaciones. Vamos a reemplazar todos estos límites de suspense con uno solo alrededor de toda nuestra aplicación para ver qué sucede.

Impresionante. Así es donde empezamos a ver lo que nos da esta API. Así que lo que voy a hacer es empezar envolviendo mi contenedor de diseño con ese límite de suspense. Asegurémonos de que estoy escribiendo código React válido. Empecemos con eso. Voy a eliminar estos otros límites de suspense, suspense, suspense. Asegurémonos de que estoy usando el estado de carga correcto aquí. Así que, por supuesto, tampoco debería quitar mi barra lateral, volvamos a ponerla en su lugar. Pero con esa actualización, vamos a ver y ver qué tenemos.

Ta-da. Así que ahora tenemos una única actualización en la pantalla, y el suspense hace esto trivial. Pudimos lograr esto simplemente moviendo algunos límites de suspense en nuestro diseño. Así que ahora vamos a echar un vistazo a una lista de reproducción diferente y navegar un poco más por nuestra aplicación. Impresionante. Así que mi hija estaría emocionada si todos escucháramos su lista de reproducción juntos, así que voy a ir y navegar hasta la suya. Vamos a ir a Ivy Dance aquí. Y bueno, no diría que esta es una gran experiencia. Al navegar, estamos viendo que estoy obteniendo mis alternativas de carga de nuevo. ¿Qué podría estar pasando aquí?

Sí, así que aquí estamos viendo nuestro primer compromiso con la granularidad de los límites de suspense que estamos usando. Así que, como dijo Gerald, al mover el límite de suspense al borde de nuestra aplicación, todas las solicitudes para obtener más data que están causando que cualquier componente en nuestro árbol de React se suspenda están burbujeando hasta este límite de suspense exterior, haciendo que React elimine toda la interfaz de usuario en cada uno de los componentes en el árbol de React, suspendiendo toda la aplicación en cualquier variedad de interacciones en nuestra aplicación. Y sabemos que eso no es una gran UX. Sabemos que queremos mantener la carcasa de nuestra aplicación en la pantalla para una aplicación como nuestro Spotify showcase aquí. Definitivamente queremos tener nuestra barra lateral, nuestra barra de reproducción en la parte inferior, y nuestro menú de usuario persistiendo en la pantalla mientras el usuario navega.

Así que vamos a introducir otro límite de suspense para solucionar este problema. Genial. Así que voy a volver aquí, y como sabemos que el componente de ruta es lo que se suspende mientras navego, voy a envolver un límite de suspense alrededor de ese componente de ruta. Asegurémonos de que estamos usando el estado de carga correcto aquí. Y así que ahora tenemos este límite de suspense anidado aquí. Pero vamos a ver qué cambio hizo esta modificación en nuestra aplicación. Así que voy a refrescar. Vamos a empezar de nuevo en nuestra, en este caso, lista de reproducción Ivy Dance. Y volvamos a nuestra lista de reproducción original de React Summit US. Genial. Así que vimos que en la carga inicial, tuvimos dos actualizaciones en la pantalla en lugar de una. Y eso fue otro impacto en la experiencia del usuario final que añadir otro límite de suspense más granular tuvo en nuestra UX. Pero ahora cuando navegamos por la aplicación, somos capaces de mantener toda esa interfaz de usuario existente en la pantalla, esa interfaz de usuario persistente en el menú del usuario, etc. Así que, de nuevo, suspense realmente nos va a obligar a pensar en estos compromisos en nuestra aplicación mientras diseñamos y realmente somos intencionales sobre la colocación de estos límites.

Pero tengo una pregunta, Gerald, porque vimos que, en este caso, la consulta de la lista de reproducción es un poco más lenta y por lo tanto tenemos dos actualizaciones en la carga inicial, pero ¿qué pasa si la lista de reproducción, la solicitud para obtener los data para nuestra ruta de lista de reproducción es más rápida que las otras obtenciones que estamos haciendo para poblar los data en nuestra interfaz de usuario?

Esa es una gran pregunta. Así que para responder a eso, vamos a volver a esto, nuestra ruta de lista de reproducción aquí. Y para aquellos que, con un ojo agudo, probablemente han notado estos añadidos sintéticos alrededor de él. Estas directivas simplemente nos ayudan a ralentizar artificialmente partes de nuestra consulta para que podamos demostrar algunas de estas cosas. Así que en este caso aquí, vamos a, vamos a eliminar este tiempo de espera sintético para la lista de reproducción porque queremos que esto se ejecute un poco más rápido. Así que volvamos aquí y veamos qué tipo de user experience obtenemos con este cambio.

Vale, y ahora volvemos a tener una actualización en la carga inicial. Si hacemos clic en otra lista de reproducción, vamos a, vamos a confirmar que todavía tenemos el comportamiento esperado de nuestros componentes de fila interna todavía suspendiendo y siendo encapsulados por ese límite de suspense interno. Así que es realmente agradable que ahora si nuestro componente de fila, nuestra obtención de data de la lista de reproducción es rápida en el mejor de los casos, vamos a tener una actualización en la pantalla en la carga inicial. Pero si es un poco más lento y React esencialmente no puede esperar por él, entonces el peor de los casos nos va a dar dos actualizaciones en la pantalla. Y para nuestra aplicación aquí, definitivamente es el compromiso correcto en términos de número de límites de suspense y su ubicación. Pero vamos a eliminar todos los otros tiempos de espera sintéticos en nuestra aplicación aquí para que se sienta un poco más rápido. Genial. Sí, porque obviamente, sería una terrible user experience si lo enviamos a nuestros clientes. Genial para una charla, malo para una aplicación real. Así que vamos a volver aquí a cada uno de estos y vamos a simplemente eliminar cada una de esas directivas sintéticas. Y aquí vamos a ver, como recargamos esto, probablemente algo un poco más como esperamos en términos de rendimiento de carga aquí. Pero mientras cargo esto, si ves esa lista de reproducción cargándose, podemos ver que todavía está tomando un poco demasiado tiempo para mi gusto aquí. Y eso es porque he tomado algo de tiempo para averiguar, como, hay un campo lento aquí en algún lugar que simplemente está haciendo que mi consulta tarde mucho tiempo en terminar aquí. Así que esto no sería una charla de GraphQL si exploramos algunos conceptos de GraphQL para averiguar cómo podemos ayudarnos aquí para actualizar esta experiencia. Así que tenemos una nueva directiva que está casi lista en la especificación, la especificación de GraphQL, que podemos integrar con la que nos permite marcar parte de nuestra consulta como algunos campos que pueden cargarse más tarde cuando estén listos. Así que vamos a volver a la ruta de la lista de reproducción aquí. Y sin sorpresa para el ojo agudo, tenemos nuestro campo de pistas aquí que tiene un tiempo de espera sintético también. Pero si esta fuera una aplicación de producción, asumiríamos que has hecho algunas investigaciones para determinar que, hey, son estas pistas las que realmente están tomando mucho tiempo. Así que lo que realmente me gustaría en mi user experience es poder mostrar algunos de esos detalles de la lista de reproducción primero, y luego a medida que las pistas están listas y se cargan, poder mostrar esas cuando estén listas. Así que de nuevo, tenemos una nueva directiva que podemos usar que funciona en fragmentos, voy a incluir eso aquí añadiendo un fragmento en línea con defer, simplemente voy a envolver mis pistas allí con él. Y vamos a ver qué hace eso con mi aplicación aquí. Vale, así que hemos añadido una capa adicional de interfaz de usuario de carga aquí. Así que en el mejor de los casos, volvemos a tener dos estados de carga. Pero para ilustrar el peor de los casos, veamos qué pasa si los detalles de la lista de reproducción tardan un poco más.

Genial. Así que voy a añadir nuestra confiable directiva sintética de nuevo aquí. Añadiré un segundo aquí, sólo para tener una idea. Y vamos a refrescar para que podamos verlo fresco. Y ahora vemos que en el peor de los casos, tendremos tres actualizaciones. Si los detalles de la lista de reproducción tardan más que el resto en cargar, y luego estamos aplazando un subconjunto de los campos en nuestra consulta de lista de reproducción allí.

Finalmente, hablemos de un aspecto más de nuestra aplicación, que es cargar más pistas. Genial, así que voy a desplazarme hacia abajo aquí. Aquí, vamos a empezar de nuevo para que no haya ninguna superposición. Lo siento. Bien, así que voy a desplazarme hacia abajo aquí, porque esto no sería una lista de reproducción a menos que pudiera escuchar algo hacia el final también. Y veamos. Y ahora, de nuevo, tenemos una no tan buena user experience.

Así que para aquellos de ustedes que han trabajado con Apollo Client durante algún tiempo, ustedes saben que cualquier cosa que tenga que ver con la paginación normalmente usa esa API fetch more que exportamos desde nuestros hooks para poder cargar la siguiente página de data. Así que no es ninguna sorpresa aquí, también tenemos una llamada fetch more. Pero en el mundo del suspense, fetch more va a resuspender nuestro componente mientras se está cargando. Entonces, ¿qué podemos hacer para ayudar a mitigar esto? Porque obviamente esto no es una gran user experience. A medida que cargo hacia abajo, veo mi retroceso de carga para toda la ruta. No muy genial. Así que vamos a echar un vistazo a un aspecto más que React nos da para poder manejar esto. Así que como mencionamos al principio, React tiene esta idea de transiciones que puedes usar. Así que Apollo Client se ha integrado con ellas, y vamos a usar una transición aquí, que le va a decir a React que marque esto como una actualización de baja prioridad porque queremos mantener nuestra interfaz de usuario existente en pantalla mientras ese componente se está cargando en segundo plano. Así que para hacer eso, voy a importar Start Transition de React. Sólo para mantener esto un poco más rápido, voy a eliminar nuestros sintéticos aquí también. Vamos a ir a nuestro Fetch More y voy a envolver Fetch More en una transición. Así que para hacerlo, vamos a hacer Start Transition aquí, y esto sólo toma un callback que puedo marcar una actualización aquí como una transición, en este caso, el Fetch More. Así que volvamos aquí, voy a refrescar y veamos qué pasa mientras me desplazo hacia abajo ahora. Mucho mejor. Eso es exactamente lo que esperaríamos de nuestra consulta paginada de desplazamiento infinito aquí. Así que recapitulemos.

Comenzamos con Use Query y permitiendo que los componentes manejen sus propios estados de carga en nuestro Spotify Showcase aquí, y luego actualizamos cada uno de ellos para usar Use Suspense Query y exploramos cómo mover los límites de suspense impactaría la UX en nuestra aplicación.

Luego mostramos cómo podemos diferir partes de nuestra interfaz de usuario con la directiva defer en GraphQL, y finalmente cómo usar Start Transition para marcar nuestra solicitud de paginación Fetch More como una transición para decirle a React que mantenga nuestra interfaz de usuario existente en la pantalla mientras esa solicitud de red se completa en segundo plano.

Y eso es nuestra demostración. Entonces, desafortunadamente no tuvimos todo el tiempo del mundo para repasar todas las partes de la historia de suspense que lanzamos en 3.8, así que te animo a que vayas a nuestra documentación para echar un vistazo a UseBackgroundQuery y UseQuery, que te dan las herramientas para ayudar a evitar cascadas de solicitudes pero también utilizar suspense.

Y mirando hacia el futuro, no hemos terminado de iterar en nuestra historia de suspense en Apollo Client. La próxima versión menor, 3.9, está actualmente en desarrollo, donde estaremos trabajando en una versión suspenseful de nuestro hook use fragment, del cual hemos recibido muchos comentarios positivos y también una versión lazy de UseBackgroundQuery, otro de nuestros hooks compatibles con suspense para precargar, prefetching data en alguna interacción del usuario, lo cual nos emociona mucho.

Si te gustó lo que viste hoy y quieres aprender un poco más sobre cómo se armó esta demostración tenemos un repositorio que puedes ir a ver, clonar y ejecutar tú mismo en nuestro ApolloGraphQL.org, el repositorio de Spotify Showcase. Así que te animo a que vayas a echar un vistazo. Queremos usar esto como una herramienta de enseñanza, y nosotros como mantenedores vamos a usar esto como un medio para poner a prueba nuevas APIs y demás. Así que de nuevo, te animo a que vayas a echar un vistazo a eso.

Con eso, muchas gracias. Gracias.