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

Rate this content
Bookmark

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

Ondrej Polesny
Ondrej Polesny
102 min
12 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in English

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

Building Blazing-Fast Websites with Next.js and Sanity.io
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
Crash course into Astro and Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 
In this workshop, we will quickly take a dive into the Headless World and Architecture. 
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless
Crash Course into Remix & Storyblok
Remix Conf Europe 2022Remix Conf Europe 2022
162 min
Crash Course into Remix & Storyblok
WorkshopFree
Facundo Giuliani
Arisa Fukuzaki
2 authors
You may read already about Remix. You probably already used it, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why Storyblok in combination with Remix is the best combo for your next project. Stop by and try it yourself!
Table of content: - Introduction to Remix, atomic design & the headless world- Environment setup- Creating pages and understanding how the dynamic routing splat routes works- Future tips and Q&A
Prerequisite(s): Node.js installed, GitHub account.
Localizing Your Remix Website
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Harshil Agrawal
Harshil Agrawal
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps
Crash Course Into Astro, Kontent.ai and Portable Text
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
Node Congress 2022Node Congress 2022
134 min
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
WorkshopFree
Shedrack Akintayo
Chad Carlson
2 authors
Node.js has become an increasingly popular language to build and deploy backend APIs. In a world of legacy CMSs adopting decoupled implementations, plenty of frameworks have sprung up to classify themselves as "headless" CMSs, designed from the start to provide an easy way to personalize content models, administer permissions and authentication, and serve a content API quickly.
Strapi, one of the leaders in this space, has recently released their v4 version of the framework, and with Platform.sh it can be deployed alongside a number of frontends within the same project, giving a drastically simplified development experience working with decoupled sites. In this workshop, we'll deploy a Strapi demo application, which has been configured to serve a restaurant review site.
Piece piece you will add database services, tests, and frontends, all within the safety of isolated development environments. At the end, each user will have a functioning decoupled site, and some greater understanding of working with decoupled sites in production.

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

How to properly handle URL slug changes in Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
Top Content
If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.

Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022 
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
React Summit 2022React Summit 2022
21 min
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.
Large scale projects challenges (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
NextJS is an excellent full stack framework. Contentful is a well-known flexible headless CMS. Together are a great match, but when we talk large scale projects the challenges are completely different than the ones you may face in a small to medium scale project. Leonidas will try to raise your awareness on such challenges based on Greece's experience on redesigning Vodafone's site to create beautiful self-serve and guided journeys for Vodafone customers.
Exploring the WordPress Graph with Next.js & WPGraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance.
With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.

Slides & more
Contentful and headless
React Finland 2021React Finland 2021
19 min
Contentful and headless
How Contentful helps you to manage all the data in a headless e-commerce website.
React Bricks: a CMS with visual editing based on React components
React Finland 2021React Finland 2021
24 min
React Bricks: a CMS with visual editing based on React components
Headless CMSs are great for developers, but not for content creators.
React Bricks is the first CMS that is super-great for Developers (it's just React, backed solid APIs), for Content Creators (it keeps the visual editing experience of no-code tools like Wix) and for Designers (you can express your exact design system and be sure nobody will break it). I'll show you how it works!