Fetch, useEffect, React Query, SWR, ¿qué más?

Rate this content
Bookmark
Esta masterclass cubre estrategias de obtención de datos en JavaScript, centrándose en Fetch API, Axios, SWR y React Query. Proporciona ejemplos y orientación sobre cómo implementar estas estrategias en una aplicación React. También se abordan problemas de solución de problemas y despliegue, como CORS. La masterclass concluye destacando las ventajas y los casos de uso de SWR y React Query, y anima a los participantes a elegir la mejor estrategia en función de las necesidades de su proyecto.

From Author:

En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.


Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.


Aprenderás:

- Qué diversas opciones de obtención de datos hay en React

- Cuáles son las ventajas y desventajas de cada una

- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras

This workshop has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.

FAQ

Netlify proporciona varias funciones implementadas para manejar datos de vuelos desde un headless CMS y están configuradas para ser accesibles a través de API.

Todos los datos están almacenados en un headless CMS y no se trabaja directamente con el CMS, sino a través de funciones de API proporcionadas por Netlify.

Es necesario clonar el repositorio de GitHub provisto en la masterclass, abrirlo con Visual Studio Code, e instalar los paquetes necesarios usando npm.

Los datos de vuelos son manejados a través de funciones API desarrolladas en Netlify que interactúan con un headless CMS para obtener y procesar los datos de vuelos.

No debe sorprenderse si el código tiene algo de código faltante o no compila inicialmente; esto es parte del proceso de aprendizaje de la masterclass para trabajar en completar y depurar el código.

Se discuten estrategias de obtención de datos utilizando Fetch API y Axios, y se exploran técnicas avanzadas como la paginación y la gestión del estado con React Query y SWR.

Para ejecutar las funciones localmente, es necesario configurar un archivo de ambiente con el ID del ambiente proporcionado, y utilizar Netlify CLI para ejecutar las funciones.

Para contribuir, se debe empezar con la rama de inicio de la masterclass, clonar el repositorio, y seguir las instrucciones del README que aunque no es relevante para la masterclass, proporciona una guía de cómo construir la aplicación.

Ondrej Polesny
Ondrej Polesny
102 min
12 Oct, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Introducción a las Estrategias de Obtención de Datos

Short description:

¡Hola a todos! Comencemos con los conceptos básicos e introducciones. No duden en hacer preguntas en la ventana de chat. La masterclass de hoy trata sobre las estrategias de obtención de datos en JavaScript. Cubriremos FetchAPI, características avanzadas, procesamiento de datos, revalidación y paginación. Es una masterclass de nivel introductorio con muchos ejemplos. Recibirán todas las diapositivas y códigos. Si necesitan asistencia o más tiempo para los ejercicios, háganmelo saber. Ahora, echemos un vistazo a la muestra de la aplicación, una tabla de vuelos en un aeropuerto.

Entonces, hola a todos. Creo que es un buen momento para comenzar ahora. Es un minuto después de la hora, algunos minutos más para unirse, pero ya podemos comenzar con los conceptos básicos e introducciones. Estamos aquí en una llamada de Zoom. Si hay algo, ya saben, que necesitan preguntar o si necesitan más tiempo para cualquier cosa, no duden en usar la ventana de chat. De hecho, logré tenerlo funcionando en mi siguiente pantalla, así que espero ver todos sus mensajes. Así que, siéntanse libres de saludar. Díganme de dónde vienen. Espero que el clima sea mucho más agradable de lo que es aquí en Brno, República Checa para mí. Ya está un poco oscuro, pero en realidad es un buen momento para hacer una masterclass y pasar tiempo en línea, ¿saben? En general, espero que todos puedan ver mi pantalla. Actualmente muestra una presentación de PowerPoint. Si pueden hacerme saber si la ven porque probablemente sea el requisito más importante para esta masterclass. Sí. Hola a India. Eso es agradable. Viniendo de Francia, perfecto. De la misma otra manera. Christof, estoy llenando para ti. Es octubre. ¿Qué podemos hacer? Si vienes a Londres la próxima semana, estará a punto de comenzar. Y hay mucha gente allí. Eso es genial. Entonces, sí, allá vamos. Y también tenemos a Praga aquí. Genial. Es un placer conocerlos a todos ustedes. Espero que se diviertan. Van a aprender algo nuevo hoy. Y el mayor logro que haré hoy es simplemente divertirme. Aprender algo nuevo y ver lo que podemos hacer en el tiempo asignado. Ahora, mi objetivo es hacer la masterclass en menos de dos horas para que no perdamos la concentración. Para la mayoría de nosotros, es después del horario de trabajo ahora mismo. Así que vamos a ello. Y veamos qué podemos hacer. Entonces, en primer lugar, soy Andrey. Soy un evangelista de desarrolladores para Content.AI. Somos un proveedor de headless CMS. Pero la masterclass de hoy no va a ser sobre headless CMS en absoluto. Así que esta es solo una diapositiva para que sepan de dónde vengo. En general, vamos a hablar sobre las estrategias de obtención de data. Y la agenda para hoy será la siguiente. Entonces, en primer lugar, quiero mostrarles o quiero hablarles sobre las opciones reales de obtención de data que tenemos en JavaScript. Eso será sobre FetchAPI. Luego vamos a hablar sobre las características advanced en la obtención de data. eso significa cómo manejamos los errores, cómo podemos interceptar solicitudes. ¿Cómo puedes implementar o configurar la política de reintento? Y luego vamos a hablar sobre el procesamiento de la data en el lado de la aplicación. Entonces, ahora lo llamamos obtención de data. Pero las bibliotecas que realmente nos permiten hacer todo eso, también tienen un mecanismo de caché y otras características en su lugar que lo hacen más fácil para nosotros. Entonces, vamos a ver algunos casos de uso advanced también. Vamos a ver los casos de revalidación, eso significa que cuando tienes data en caché, necesitas revalidarla ya sea automáticamente o manualmente, o quieres prevenirla, en realidad, ese también es uno de los casos de uso. Y el último será la paginación, que está casi en cada proyecto que necesita trabajar con algunas listas de data. Eso es todo. Creo que esa es una agenda bastante completa para hoy. Ahora, solo para darles una idea, esto va a ser a nivel introductorio. Si eres un experto en React, tal vez esto sea un poco aburrido para ti, pero habrá muchos ejemplos, muchos casos de muestra, por lo que puedes probarlo por tu cuenta. Si tienes Visual Studio preparado, eso es un buen comienzo. Solo para que sepan, no entraré en los grandes o excelentes detalles de React query o de USEr's VR y así sucesivamente, porque podríamos estar aquí todo el día. Sí, entonces, solo para darles una idea de cómo va a funcionar esto, ahora, por supuesto, esto se está grabando, por lo que si necesitan volver a cualquier punto del webinar o masterclass, pueden hacerlo más tarde, y también compartiré la presentación. Sí, entonces, recibirán todas las diapositivas. Recibirán todos los códigos. No se preocupen en absoluto. Y si hay algo que pueda hacer por ustedes, si necesitan que responda algo o si necesitan más tiempo para hacer los ejercicios, háganmelo saber en la ventana de chat. Hice los ejemplos para que puedan seguirlos. Entonces, les daré los códigos y les daré tiempo para trabajar en los ejemplos. Es muy fácil, nada de qué preocuparse. Es prácticamente solo para que pongan sus manos en el código real, para que no solo miren lo que estoy haciendo sino que también lo prueben por su cuenta. Así que eso es todo sobre la agenda y en primer lugar, lo que quería mostrarles es la muestra de la aplicación, la aplicación con la que trabajaremos porque obviamente para todo lo que hacemos en la masterclass necesitamos tener algún tipo de front-end. Entonces, esto es lo que realmente creé. Es solo una bonita imagen de un avión suizo aterrizando en Zurich pero es solo para hacer que el sitio web se vea bien. Esto está un poco desviado pero eso es porque creo que hay una mezcla de etiquetas HTML en algún lugar pero esta es solo una tabla de vuelos que podría estar en un aeropuerto.

2. Introducción a la obtención de datos

Short description:

Se trata de los datos y la solicitud de red que vamos a hacer. Nos centraremos en la parte del frontend. La parte del backend está ahí solo para apoyarnos. Los datos provienen de un CMS sin cabeza. Las funciones ya están desplegadas en Netlify. Puedes ejecutarlo localmente si quieres. La primera parte es sobre las funciones y el índice TSX.

Contiene números de vuelo, orígenes, destinos y así sucesivamente. Realmente no importa lo que la tabla muestre. Se trata de los data y la solicitud de red que vamos a hacer. Solo para que sepas, todos los data están almacenados en un headless CMS. El contenido, como dije, trabajo para ellos pero no vamos a trabajar con el CMS en absoluto. Preparé funciones de Netlify que realmente nos darán los data de los manejadores de API, así que solo para que sepas, nos va a dar data sobre vuelos y esta tabla es algo que queremos lograr tener listado aquí. Habrá más cosas como la página siguiente y anterior y así sucesivamente. Llegaremos a eso pero solo para que sepas, este es el frontend y veremos cómo podemos hacer que funcione. Así que eso es lo más importante ahora.

Otra cosa y esa será la primera tarea para ustedes. Hay un repositorio de GitHub con la URL que está ahora mismo en la pantalla. Voy a enviarles el enlace a él en la ventana de chat para que no tengan que anotarlo de la presentación de powerpoint. Así que si quieren ir allí, hay dos ramas. Una es el inicio de la masterclass, una es los resultados de la masterclass. Así que obviamente querrán empezar con el inicio de la masterclass. El readme es solo una muestra de la creación de la aplicación React, así que no es realmente relevante para esta masterclass. Pero lo que quiero que hagan es simplemente clonar todo el repositorio en algún lugar donde puedan ejecutar código. En algún lugar que podamos abrir con Visual Studio Code. Contiene todos los archivos que necesitaremos. Así que les daré unos minutos para que realmente hagan eso. Así que les daré unos minutos para hacer eso. Y el inicio no va a funcionar. Tampoco va a compilar. Así que no se sorprendan porque tiene algo de código faltante. Pero trabajaremos en eso. Así que les daré unos minutos para hacer eso. El enlace está ahí así que deberíamos estar listos para empezar en unos momentos. Repasemos el repositorio para que estén al día con todo. Así que hay dos partes de lo que vamos a hacer hoy. Nos centraremos mucho en la parte del frontend. Así que la parte del backend está ahí solo para apoyarnos. Y para entender cómo funciona hay una carpeta llamada funciones que tiene cuatro funciones implementadas. Lo que hacen, oh, por cierto, mientras están en eso podrían también ejecutar npm i para instalar todos los paquetes. Ya los tengo aquí así que no tengo que hacerlo, pero podrían querer instalar los módulos de node mientras hablamos del repositorio. Así que, como mencioné los data provienen de un Headless CMS. Ahora el Headless CMS tiene un proyecto en algún lugar, tiene un id de ambiente en algún lugar. Nos da data sobre los vuelos. Ahora, no tenemos que ejecutar esto. Si tienen el CLI de Netlify ejecutándose localmente, puedo darles un id de ambiente que van a tener que pasar a su archivo de ambiente si quieren ejecutar las funciones localmente. Eso también es posible, pero no tienen que hacerlo. Las funciones ya están desplegadas en Netlify. Permítanme darles la dirección de eso. Y eso es en realidad aquí. Así que esta es la URL de todas las funciones. Ya están desplegadas allí. Así que deberíamos ser capaces de obtener resultados similares a los que estoy obteniendo. Esto en realidad está obteniendo todos los vuelos. Esta sería otra función que a veces me dará resultados, a veces me dará 500. Así que parece estar funcionando bien, así que de nuevo pueden ejecutarlo localmente si quieren. Puedo darles el ID del ambiente. Si no quieren ejecutar localmente entonces esta será la dirección que usarán en las llamadas fetch. Así que esa es la primera parte, esas son las funciones. Están configuradas para ser accesibles vía slash API slash nombre de la función. Ven que hay un par de ellas. Todas hacen lo mismo pero la primera en realidad te da todos los vuelos. La lenta en realidad te dará todos los vuelos después de cinco segundos. Así que esto es solo un simulador que podemos reintentar o simular tiempos de espera. Hay una que se llama poco fiable que te dará los resultados solo una vez en cinco intentos. Así que basado en un número aleatorio. Y hay una que aparte de la te dará el número total de vuelos que están disponibles. Así que podemos hacer paginación más tarde. Así que estas son todas las funciones. Es todo bastante igual. Y de nuevo, no tienen que ejecutarlo localmente. Les daré la URL para que puedan ejecutarlo. Podemos trabajar todos con él desde el punto final remoto. Y así es la primera parte. Estas son las funciones. Luego, por supuesto, está el índice TSX.

Watch more workshops on topic

Repensando el Estado del Servidor con React Query
React Summit 2020React Summit 2020
96 min
Repensando el Estado del Servidor con React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
La distinción entre el estado del servidor y el estado del cliente en nuestras aplicaciones puede ser un concepto nuevo para algunos, pero es muy importante entenderlo cuando se entrega una experiencia de usuario de primera calidad. El estado del servidor viene con problemas únicos que a menudo se cuelan en nuestras aplicaciones sorpresa como:
- Compartir datos entre aplicaciones- Caché y Persistencia- Deduplicación de Solicitudes- Actualizaciones en segundo plano- Gestión de Datos "Obsoletos"- Paginación y Recuperación Incremental- Memoria y Recolección de Basura- Actualizaciones Optimistas
Los gestores tradicionales de "Estado Global" pretenden que estos desafíos no existen y esto finalmente resulta en que los desarrolladores construyan sus propios intentos sobre la marcha para mitigarlos.
En esta masterclass, construiremos una aplicación que expone estos problemas, nos permite entenderlos mejor, y finalmente los convierte de desafíos a características usando una biblioteca diseñada para gestionar el estado del servidor llamada React Query.
Al final de la masterclass, tendrás una mejor comprensión del estado del servidor, el estado del cliente, la sincronización de datos asíncronos (un bocado, lo sé), y React Query.
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
React Summit 2023React Summit 2023
71 min
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos.
En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel.
Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.
Curso intensivo sobre Astro y Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Curso intensivo sobre Astro y Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.
En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.
Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.
- Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza
Curso Intensivo de Astro, Kontent.ai y Portable Text
React Summit 2023React Summit 2023
91 min
Curso Intensivo de Astro, Kontent.ai y Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En este curso intensivo, crearemos un nuevo proyecto en el CMS sin cabeza, crearemos el modelo de contenido y los datos utilizando la CLI de Kontent.ai. Luego, utilizaremos el contenido para construir un sitio web de Astro que incluya componentes front-end y resolución de texto enriquecido utilizando Portable Text.
Este será un taller práctico, necesitarás VS Code, Git, NPM y conocimientos básicos de JavaScript. No te preocupes, explicaré todos los pasos a medida que avancemos en el taller y podrás hacer preguntas directamente.
Curso Intensivo de Remix y Storyblok
Remix Conf Europe 2022Remix Conf Europe 2022
162 min
Curso Intensivo de Remix y Storyblok
WorkshopFree
Facundo Giuliani
Arisa Fukuzaki
2 authors
Tal vez ya hayas leído sobre Remix. Probablemente ya lo hayas usado, y recientemente hayas escuchado mucho sobre los CMS sin cabeza. En este curso rápido, pondremos todas las piezas juntas y te mostraré por qué Storyblok en combinación con Remix es la mejor opción para tu próximo proyecto. ¡Pasa y pruébalo tú mismo!
Tabla de contenido:- Introducción a Remix, diseño atómico y el mundo sin cabeza- Configuración del entorno- Creación de páginas y comprensión de cómo funcionan las rutas dinámicas con splat routes- Consejos futuros y preguntas frecuentes
Prerrequisitos: Node.js instalado, cuenta de GitHub.
Localizando tu sitio web de Remix
React Summit 2023React Summit 2023
154 min
Localizando tu sitio web de Remix
WorkshopFree
Harshil Agrawal
Harshil Agrawal
El contenido localizado te ayuda a conectarte con tu audiencia en su idioma preferido. No solo te ayuda a hacer crecer tu negocio, sino que también ayuda a tu audiencia a comprender mejor tus ofertas. En este masterclass, obtendrás una introducción a la localización y aprenderás cómo implementar la localización en tu sitio web de Remix alimentado por Contentful.
Tabla de contenidos:- Introducción a la localización- Introducción a Contentful- Localización en Contentful- Introducción a Remix- Configuración de un nuevo proyecto de Remix- Renderización de contenido en el sitio web- Implementación de la localización en el sitio web de Remix- Recapitulación- Próximos pasos

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

React Query: ¡Es hora de romper con tu "Estado Global"!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: ¡Es hora de romper con tu "Estado Global"!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
React Day Berlin 2023React Day Berlin 2023
16 min
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
Top Content
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
React Query y Auth: ¿Quién es responsable de qué?
React Advanced Conference 2021React Advanced Conference 2021
19 min
React Query y Auth: ¿Quién es responsable de qué?
Top Content
This talk introduces React Query and Auth, discussing how React Query maintains server state on the client and handles mutations and data updates. The day spa app example demonstrates the use of React Query to fetch data and handle user authentication. React Query is also useful for managing user data and ensuring accurate data from the server. The talk highlights the importance of addressing the three main players in user data: React Query, Auth Functions, and persistence across sessions.
Pensando en React Query
React Summit 2023React Summit 2023
22 min
Pensando en React Query
Top Content
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.