APRENDE React Query DESDE CERO: Paginación, Infinite Scroll, DevTools

En este video aprenderas más que solo hacer paginación e infinite Scroll, sino que también a manejar errores, mutaciones, actualizar cache con React Query o también llamado TanStack Query y conocerás sus DevTools

0:00 Que aprenderas
0:38 A MOVER LAS MANITAS ✋🙂✋
1:14 1. Proyecto de prueba técnica
5:56 Estado de carga
9:07 Loading
14:01 Infinite Scroll / Paginación + Query Params
23:03 infinite Scroll sin Botón
24:03 Refactorización
26:01 React Query / TanStack Query
30:11 Comó usar TanStack Query
35:13 Haciendo el Infinite Scroll con TanStack
44:37 fetchParam
49:49 Método FlatMap()
52:46 Indicarle un límite a la paginación
54:51 Creando un Custom Hook para el Scroll Infinite
1:02:00 Desactivar Refetching
1:03:42 DevTools
1:09:30 2. Proyecto Comments-react-query
1:11:11 Mutaciónes con React-Query / TanStack-Query
1:16:24 Mostrar los mensajes en tiempo real
1:18:19 1. Actualizar el caché de react-query manualmente
1:20:31 12. Hacer otra vez un Refetch de la Query
1:21:54 3. Actualizaciones optimistas
1:27:48 3.1 Manejo de errores

[midulive]

1:17:50 Deberes/Tarea/Actividad en 🏠:
1. Manejar errores

[dialmonsalve]

34:45 Desde hace poco se actualizó a la v5 tanstak-query, ahora se debe pasar como un objeto los parámetros que recibe la función useQuery. Quedaría así:
const { isLoading, isError, data: users } = useQuery<User[]>({
queryKey: ['users'],
queryFn: async () => await fetchUsers(1)
})

[crisanger]

Este canal tiene muy buen contenido, pocos explican como él

[cristhiamjara]

midu eres una maquina, no podria terminar de agradecerte por todo lo que e aprendido de ti. espero que puedas alcanzar todas tus metas, te deseo lo mejor bro. eres grande.

[gianlucasoremcasualzate]

Ya sé con que voy a gastarme las horas libres de hoy. Gracias Midu por ayudarnos tanto

[SonGoku-pcjl]

todo este curso de react ha sido genial, y react query repasarlo y aprender nuevas cosas ha sido genial :), gracias!

[carlosantonioarchagamartin]

Que grande midu justo lo que ocupaba con lo del infinity scroll yo pensaba complicarme con lo del boton pero gracias a esto veo q era más sencillo, gracias tu contenido es geniaaal

[santiherrera]

Termine de hacer proyectitos con react query y esto me viene de 10, gracias Midu

[jeremiasarriondo]

Absolutamente todo lo que nos enseñas en cada video tiene demasiado valor, así que infinitas gracias Midu!

[jagneralves]

MIDU, muchas gracias por el vídeo!! Eres súper didáctico.

[jordanrothschild]

Gran video, Midu. Sin embargo, tengo algunas dudas acerca de las actualizaciones optimistas que discutes en el minuto 1:22:04 . Específicamente, en la sección donde hablas de crear nuevos elementos, no entiendo por qué una actualización optimista sería más rápida en este caso.

En el flujo que presentas, primero invalidas la caché y luego haces una solicitud GET para obtener los datos nuevamente. Después, realizas una mutación, lo cual implica una solicitud POST.

En mi opinión, simplemente invalidar la caché después de la mutación podría ser una mejor estrategia. De esta manera, harías una solicitud POST para la mutación y, sólo si el componente sigue montado, se realizaría una solicitud GET al invalidar la caché.

En resumen, en tu escenario, donde los componentes están en la misma página, terminas haciendo las mismas solicitudes. Pero al optar por invalidar la caché, garantizas que los datos mostrados son actuales y minimizas el riesgo de problemas en el servidor.

Espero que esto aclare mi punto de vista. De hecho no se me viene a la mente ningún caso práctico en el que vea una ventaja en la actualización optimista

[aviliobruno]

Muy bueno midu, tenia algunas dudas sobre react query y esto me aclaro bastante el panorama. Gracias por resubirlo!

[manuelfernandez]

Por si alguno tiene el mismo problema del linter que tuvo Midu al principio del video, a mi me funciono crear una carpeta '.vscode' en el root del proyecto con un archivo settings.json dentro, en donde defino los directorios de trabajo. En mi caso tenia un proyecto con una carpeta "frontend" y otra "backend" con lo cual mi configuracion quedo como {"eslint.workingDirectories": ["frontend", "backend"]}. Esto deberian adaptarlo a su carpetas. Ojala les sirva y un saludo Midu, gracias por tanto!

[NagadGames]

Justo lo que buscaba, que grande midu!

[your_dev_joselow]

Me quiedé con la duda de como podriamos hacer el borrado de los datos simulado ahi con tanstack

[santisalasb]

Midu tengo una App que renderiza un grid de miles de imágenes, cuando se cargan muchas imágenes (cards de imagenes con mas elementos html) el navegador peta. ¿Cómo puedo manejar las peticiones on demand con el scroll hacia arriba también? (Para que haya un limite de elementos que el navegador cargue)

[ragknar]

pense que me había petado el pc cuando salío esa pantalla azul jajajaaj

[santiagousca]

consulta el useInfinitiQuery sirve para hacer paginacion infinita, perosi quiero hacer una paginacion normal tambien sirve?

[reisengroup]

Recomiendas utilizar React Query en lugar de Apollo Client en Next js?

[gustavoatencia]

q buen video miduCrack, tengo una duda, si le agregas el paginado como lo hiciste, al momento de realizar la búsqueda solo te arrojarian resultados de las paginas cargadas cierto?, y para poder obtener en realtime asumo que tendrías que agregar un código de observer en el backend, bueno supongo que lo mas sencillo seria agregar un onclick y que esta a travez de un query o params llegue al backend para arrojas la consulta para realizar las busquedas.
pero como seria el otro caso ?