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

Rate this content
Bookmark

Para muchos desarrolladores de aplicaciones, GraphQL es fundamental para construir grandes experiencias de usuario. Con la introducción de React Suspense, los desarrolladores tienen una forma ergonómica de orquestar estados de carga para mejorar el status quo.


En esta charla, el equipo de Apollo Client te mostrará cómo construimos una aplicación no trivial utilizando las nuevas características de Suspense de Apollo Client, características de GraphQL como la directiva @defer, y cómo combinarlas para construir grandes experiencias de usuario en tus propias aplicaciones.

27 min
15 Nov, 2023

AI Generated Video Summary

La charla de hoy trata sobre el uso de suspense y GraphQL con Apollo Client para crear experiencias de usuario fluidas. La charla cubre la introducción y el poder de suspense, el nuevo hook de consulta de Suspense utilizado en Apollo Client, la actualización de componentes con suspense, el uso de límites de suspense y compensaciones, la optimización de la obtención de listas de reproducción con GraphQL, la carga de más pistas y el uso de transiciones, y las conclusiones y desarrollos futuros.

1. Introducción a Suspense y Apollo Client

Short description:

Hoy hablaremos sobre cómo usar suspense y GraphQL con Apollo Client para construir excelentes experiencias de usuario. Comenzaremos con una visión general de los conceptos de React Suspense y luego exploraremos una aplicación real renderizada por el cliente utilizando los nuevos hooks de suspense de Apollo Client. No cubriremos los Componentes del Servidor de React y Streaming SSR, pero puedes consultar nuestro paquete experimental para obtener más información. El tweet de Andrew Clarke sobre las transiciones de iOS establece la relevancia del suspense. Suspense ayuda a coordinar las transiciones en nuestra aplicación para una experiencia de usuario más fluida. También discutiremos el hook de consulta en Apollo Client.

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.

2. Entendiendo el Poder de Suspense

Short description:

Nuestro componente de álbumes renderiza la interfaz de usuario de carga hasta que los datos se devuelven de la solicitud de red. Suspense es más que solo mostrar una interfaz de usuario de fallback diferente. Proporciona herramientas poderosas para administrar transiciones y crear una experiencia de usuario suave.

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.

3. Introduciendo la Consulta de Suspense Utilizada

Short description:

Hoy estamos introduciendo la Consulta de Suspense Utilizada, un nuevo hook en Apollo Client 3.8 que añade soporte de suspense a tu aplicación. Recupera datos integrados con Suspense de React 18 y soporta transiciones de React 18. Exploraremos esta API a través de un clon de Spotify, donde diferentes áreas de la interfaz de usuario cargan datos. Actualmente, la interfaz de usuario tiene un efecto de palomitas de maíz, con componentes que aparecen a medida que cargan datos. Actualizaremos la aplicación de use query a use suspense query, comenzando con un componente. Vamos a sumergirnos y escribir algo de código juntos.

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í.

4. Uso de Suspense con Menú de Usuario y Otros Componentes

Short description:

Vamos a sumergirnos en el menú de usuario y reemplazar la importación desde Apollo client con use suspense query. Añadiremos un límite de suspense alrededor del menú de usuario para mostrar la interfaz de usuario de fallback. Luego añadiremos límites de suspense a nuestros otros tres componentes: barra lateral, barra de reproducción y ruta.

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.

5. Actualizando Componentes con Suspense

Short description:

Vamos a actualizar los componentes para ser integrados con suspense. Reemplaza la importación para usar query con use suspense query, elimina el Booleano de carga y el estado de carga. El uso de suspense query está diseñado para ser familiar para aquelos que han utilizado use queries. Ahora volvamos a la aplicación y veamos los cambios.

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.

6. Uso de Límites de Suspense y Compromisos

Short description:

Ahora que todos nuestros componentes dependen del suspense para mostrar la alternativa de carga, podemos usar la API componible de React que nos da el suspense para agrupar estas actualizaciones. Al reemplazar todos los límites de suspense con uno solo alrededor de toda nuestra aplicación, podemos lograr una única actualización en la pantalla. Sin embargo, hay un compromiso con la granularidad de los límites de suspense, lo que hace que React elimine toda la interfaz de usuario en cada componente en el árbol de React, suspendiendo toda la aplicación en cualquier variedad de interacciones. Queremos mantener la carcasa de nuestra aplicación en la pantalla, incluyendo la barra lateral, la barra de reproducción y el menú de usuario, a medida que el usuario navega.

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.

7. Introduciendo Otro Límite de Suspense

Short description:

Vamos a introducir otro límite de suspense para solucionar el problema. Al envolver un límite de suspense alrededor del componente de ruta, podemos mantener la interfaz de usuario existente en la pantalla mientras navegamos. Esto añade otra actualización a la carga inicial pero mejora la experiencia del usuario en general. Suspense nos obliga a considerar compromisos y ser intencionales sobre la colocación de los límites.

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.

8. Optimizando la Obtención de Listas de Reproducción con GraphQL

Short description:

¿Pero qué pasa si la solicitud de la lista de reproducción es más rápida que otras obtenciones? Eliminemos los tiempos de espera sintéticos para una ejecución más rápida. Una actualización en la carga inicial, en el peor de los casos da dos actualizaciones. Elimine todos los tiempos de espera sintéticos para un mejor rendimiento. Explore los conceptos de GraphQL para mejorar la experiencia del usuario. Integre una nueva directiva para cargar campos más tarde cuando estén listos. Añada una interfaz de usuario de carga adicional para los detalles de la lista de reproducción. Dos estados de carga en el mejor de los casos.

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.

9. Cargando Más Pistas y Usando Transiciones

Short description:

En el peor de los casos, tendremos tres actualizaciones si los detalles de la lista de reproducción tardan más en cargar. Cargar más pistas puede resultar en una experiencia de usuario no tan buena. La API fetch more de Apollo Client resuspende el componente mientras se carga, pero podemos usar transiciones en React para mantener la interfaz de usuario existente en pantalla. Al envolver la llamada fetch more en una transición, logramos una mejor experiencia de usuario.

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.

10. Comentarios Finales y Desarrollos Futuros

Short description:

Comenzamos con Use Query y Use Suspense Query para manejar los estados de carga. Exploramos los límites de suspense y la directiva defer en GraphQL. También discutimos las próximas características en Apollo Client 3.9, incluyendo una versión suspenseful del hook use fragment y una versión lazy de UseBackgroundQuery. Consulta nuestra documentación para más detalles. Echa un vistazo a nuestro repositorio de Spotify Showcase para una experiencia práctica. ¡Gracias!

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
In this talk, we'll look at some of the modern options for building a full-stack React and GraphQL app with strong conventions and how this can be of enormous benefit to you and your team. We'll focus specifically on RedwoodJS, a full stack React framework that is often called 'Ruby on Rails for React'.
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
WorkshopFree
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.