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.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

Apollo Client es una biblioteca completa de manejo de estado para aplicaciones JavaScript que permite la gestión de datos tanto locales como remotos con GraphQL. Se utiliza para facilitar la integración de datos de una API a la interfaz de usuario, optimizando las consultas y la gestión del cache.

React Suspense es una funcionalidad de React que permite a los desarrolladores definir cómo se comporta la interfaz de usuario mientras se carga el contenido. Apollo Client lo utiliza para manejar el estado de carga de las consultas GraphQL, permitiendo una transición suave y una mejor experiencia de usuario al esperar los datos.

Use Suspense Query es un hook en Apollo Client 3.8 diseñado para integrar soporte de React Suspense en consultas GraphQL. Permite a los componentes esperar datos de manera más eficiente, mejorando la gestión de los estados de carga y las transiciones entre estados en la aplicación.

La combinación de Suspense y Apollo Client en una aplicación permite una gestión más eficiente de los estados de carga y las transiciones de usuario. Esto resulta en una experiencia de usuario más fluida y agradable, reduciendo la visibilidad de cargas inútiles y coordinando mejor las actualizaciones de la interfaz.

Los React Server Components permiten renderizar componentes de React en el servidor, mejorando el rendimiento y la eficiencia de las aplicaciones. No se discutieron en la charla porque el enfoque estaba en el manejo cliente-lado de Apollo Client y React Suspense, no en la renderización del lado del servidor.

Mejorar la experiencia de usuario se logra mediante la implementación de límites de Suspense apropiados y el uso de la directiva 'defer' en GraphQL. Esto permite que la interfase maneje de forma eficiente los estados de carga y muestre datos de manera progresiva sin recargar toda la interfaz.

La directiva 'defer' en GraphQL permite posponer la carga de partes específicas de una consulta hasta que sean necesarias. Esto es útil para mejorar la velocidad de carga inicial de una página al cargar primero los datos más críticos y cargar el resto de los datos de manera asíncrona.

Jerel Miller
Jerel Miller
Alessia Bellisario
Alessia Bellisario
27 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

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

De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
Aplicaciones sólidas de React y GraphQL para personas con prisa
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Aplicaciones sólidas de React y GraphQL para personas con prisa
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.
Adoptando GraphQL en una Empresa
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
Adoptando GraphQL en una Empresa
Today's Talk is about adopting GraphQL in an enterprise. It discusses the challenges of using REST APIs and the benefits of GraphQL. The Talk explores different approaches to adopting GraphQL, including coexistence with REST APIs. It emphasizes the power of GraphQL and provides tips for successful adoption. Overall, the Talk highlights the advantages of GraphQL in terms of efficiency, collaboration, and control over APIs.
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.

Workshops on related topic

Aventuras de Renderizado Concurrente en React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
Comenzando con Suspense y Renderizado Concurrente en React
React Summit 2020React Summit 2020
125 min
Comenzando con Suspense y Renderizado Concurrente en React
Featured Workshop
Maurice de Beijer
Maurice de Beijer
React sigue evolucionando y haciendo que las cosas difíciles sean más fáciles para el desarrollador promedio.
Un caso en el que React no era particularmente difícil pero muy repetitivo, es trabajar con solicitudes AJAX. Siempre hay una trinidad de estados de carga, éxito y posibles errores que deben manejarse cada vez. Pero ya no, ya que el componente `<Suspense />` facilita mucho la vida.
Otro caso es el rendimiento de aplicaciones más grandes y complejas. Por lo general, React es lo suficientemente rápido, pero con una aplicación grande, la renderización de componentes puede entrar en conflicto con las interacciones del usuario. El renderizado concurrente se encargará de esto, en su mayoría de forma automática.
Aprenderás todo sobre cómo usar <Suspense />, mostrar indicadores de carga y manejar errores. Verás lo fácil que es comenzar con el renderizado concurrente. Harás que el suspense sea aún más capaz combinándolo con el renderizado concurrente, el gancho `useTransition()` y el componente <SuspenseList />.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
En este masterclass, obtendrás una visión de primera mano de lo que es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React.
Prerrequisitos: - Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) utilizar VS Code para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript
GraphQL para Desarrolladores de React
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL para Desarrolladores de React
Featured Workshop
Roy Derks
Roy Derks
Hay muchas ventajas en utilizar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la obtención de datos y la gestión del estado, sino que también obtendrás una mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.