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({ queryKey: ['users'], queryFn: async () => await fetchUsers(1) })
@@carlosluis6553 yo lo hice con esto pero si que tengo un error por ts creo porque en el "queryFn" me subraya con rojito pero igual funciona: const { data, error, refetch, fetchNextPage, hasNextPage, // isFetching, // isFetchingNextPage, // status, } = useInfiniteQuery({ queryKey: ['users'], queryFn: fetchUsers, initialPsageParam: 1, getNextPageParam: (lastPage, pages) => lastPage.nextCursor, })
dejo un pequeño aporte a este codigo const { isLoading, isError, data: users = [] } = useQuery({ queryKey: ['users'], queryFn: async () => await fetchUsers(1) }) tiene que seguir siendo users = [] por que sino te marca error o por lo menos a mi :)
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.
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
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!
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
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)
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 ?
Me salio todo mejor y mas rapido haciendo la paginacion y los estados importandoselos de un componente padre que envuelva todo a tener que instalar esa dependencia de query y usar 500 propiedades y hacer una mezcla de codigo. Pero estuvo bueno el vidio igual me estaba durmiendo, y ahora me espabile.
una pregunta, ibas hacer un clon de Twitter orientado a desarrollados en nextjs, no el antiguo proyecto si no otro, pero no lo veo o lo estas preparando?
1:17:50 Deberes/Tarea/Actividad en 🏠:
1. Manejar errores
Este canal tiene muy buen contenido, pocos explican como él
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({
queryKey: ['users'],
queryFn: async () => await fetchUsers(1)
})
Gracias pariente!
como aplicaste el infinitequery con la v5
@@carlosluis6553 yo lo hice con esto pero si que tengo un error por ts creo porque en el "queryFn" me subraya con rojito pero igual funciona:
const {
data,
error,
refetch,
fetchNextPage,
hasNextPage,
// isFetching,
// isFetchingNextPage,
// status,
} = useInfiniteQuery({
queryKey: ['users'],
queryFn: fetchUsers,
initialPsageParam: 1,
getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
})
dejo un pequeño aporte a este codigo
const { isLoading, isError, data: users = [] } = useQuery({
queryKey: ['users'],
queryFn: async () => await fetchUsers(1)
})
tiene que seguir siendo users = [] por que sino te marca error o por lo menos a mi :)
@@facundodominguez1063 bro, te marca error en queryFn con 'no overload matches' de TypeScript
Ya sé con que voy a gastarme las horas libres de hoy. Gracias Midu por ayudarnos tanto
Pero no te olvides que en un rato estamos en directo en twitch.tv/midudev
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.
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
todo este curso de react ha sido genial, y react query repasarlo y aprender nuevas cosas ha sido genial :), gracias!
Termine de hacer proyectitos con react query y esto me viene de 10, gracias Midu
Excelente!
MIDU, muchas gracias por el vídeo!! Eres súper didáctico.
Absolutamente todo lo que nos enseñas en cada video tiene demasiado valor, así que infinitas gracias Midu!
Muy bueno midu, tenia algunas dudas sobre react query y esto me aclaro bastante el panorama. Gracias por resubirlo!
52:00 uffff lo explica tan simple 🫶
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!
Excelente, este video value oro
Gracias. Saludos
El mejor curso de React en YT
Gracias! 🤗
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
Justo lo que buscaba, que grande midu!
gracias midu ! buen contenido
Q bien príncipe genialll 🎉🎉🎉🎉
Gracias crack!
Increible Midu ❤
El buen midu, nada le gana
Recomiendas utilizar React Query en lugar de Apollo Client en Next js?
Quiero ser como tu midudev :)
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)
midu te amo
Y yo a ti! ❤️
jaja
Que extensión de VS utilizas para los errores de typescript?
Es error lens
consulta el useInfinitiQuery sirve para hacer paginacion infinita , perosi quiero hacer una paginacion normal tambien sirve?
GRACIASSSSSSSSSS!!!
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 ?
Me salio todo mejor y mas rapido haciendo la paginacion y los estados importandoselos de un componente padre que envuelva todo a tener que instalar esa dependencia de query y usar 500 propiedades y hacer una mezcla de codigo. Pero estuvo bueno el vidio igual me estaba durmiendo, y ahora me espabile.
Midu como esta
En el momento tengo que hacer un Dashboard utilizando API para analisis de dato y graficas
Me puedes recomendar algunas APIs o consejos
Donde puedo conseguir ejercicios de entrevistas para react? hay alguna pagina?
pense que me había petado el pc cuando salío esa pantalla azul jajajaaj
En nextjs 13 server components. React query ya no sirve?
Puedo usar react query junto con redux?
❤
se uso la version 4 verdad? o la 5? no logré pillar en las dependencias la version en el video
una pregunta, ibas hacer un clon de Twitter orientado a desarrollados en nextjs, no el antiguo proyecto si no otro, pero no lo veo o lo estas preparando?
1:03:32
1:05:12 ? xd
Que groso este midu
Gracias majo!
La paginación se hace en el backend??
Si una API no devuelve Page, ni nada para hacer paginación ??
En el curso de node veremos paginación @midulive
Hola @midudev , vas a seguir utilizando react? que hay de Next.js?