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.

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.

Available in English

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

From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
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!
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
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.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
The Guild has recently released Envelop - a new, modern GraphQL Server Framework and plugin system. In this talk I’ll share a brief overview of Envelop and why you should probably upgrade your existing GraphQL server to it.
Rock Solid React and GraphQL Apps for People in a Hurry
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'.
Step aside resolvers: a new approach to GraphQL execution
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

Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
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
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
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 for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
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.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
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.
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
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
Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
Nader Dabit
Nader Dabit
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.