Maestro seria bueno que nos enseñara como podemos usar React Query para el manejo del estado de la aplicación, podrías hacer una pequeña simulación de una vista login y otra vista dashboard y al momento de iniciar sesión poder capturar el nombre de usuario y el token y poner el nombre de usuario en el dashboard y al momento de refrescar la pagina se mantenga iniciada el nombre de usuario en el dashboard, pero todo esto usando React Query
Como en todos tus tutoriales, tienes una manera de explicar tan clara que haces que todas las materias se hagan sencillas. Muchas gracias por tu contenido, es de gran ayuda. Continuo con las mutaciones. Un saludo desde Valencia.
Excelente video y gracias por tu deseo de compartir tus conocimientos, me gustaría un vídeo sobre Javascript con tu forma de explicar eso sería genial.
Este video es completísimo!! Me quedaron claros todos los conceptos que explicaste y dejame decirte que es justo lo que estaba buscando, muchas gracias!!
Dos meses aprendiendo desarrollo y creo que hay algo raro en mi porque usé la palabra *sexy* para describir esta librería xD Gracias, ¡excelente vídeo!
No acabo de ver la utilidad la verdad, es como usar un custom hook y el tema del cache es un arma de doble filo, no siempre te interesa, eso si muy bien explicado 👍
Magnífico video!!... lo vi varias veces por que lo puse en práctica en el acto, estoy muy agradecido de tu aporte. Me gustaría hacerte una consulta, ¿Cómo convive esto con un manejador de estado? (por ejemplo Zustand), me refiero puntualmente a las buenas prácticas y cómo aplicarlo, muchas gracias, soy un nuevo seguidor!
Usas react-query para manejar los datos que traes del servidor, que muchas veces es todo el estado que quieres compartir en las apps. Zustand en caso que necesites tener un estado global de algo que no sean datos que vienen de las APIs, por ejemplo: el estado en memoria de un carrito de compras o un formulario de varios pasos que quieras compartir con varios componentes.
react-query: estado del servidor (lo que traes de las APIs) Zustand o useState: Estado del cliente, lo que guardas en memoria, como valores de formulario que estás editando, saber si un modal está abierto, etc
@@YoelvisM Muchas gracias por tu aclaración, no te escribí antes por que me puse a poner en práctica lo que me comentas y te podría decir que estoy retirando piezas y piezas de código de mi proyecto reemplazándolas por React Query, estoy super contento!, muchas gracias!! (a todo esto, perpetué el estado usando "getQueryData", espero estar en lo correcto)
Muy buena explicación de react query. Tienes algún ejemplo básico o un link donde se pueda usar react query utilizando CDN, es decir, sin utilizar NPM y cargar la librería directamente con un script CDN. Muchas gracias.
me encanto, podrias hacer uno de ag-grid?? que trabaja con tablas y he visto q facilita mucha la vida de igualmanera , si pudieses hacerlo consultando Apis , te amaria por siempre
Hola, me encanto tu video. Muy bueno en realidad. Tengo una duda, cuando estoy usandolo esta pasando que en los observadores dice que tengo 26, pero no se que es ese numero. Abajo en la devtools al lado de la clave de la posicion del cache
react-query definitivamente, tiene más opciones y me gusta más la forma que se usa. RTK-Query, también está bueno, para proyectos que uses con redux toolkit lo puedes usar ya que viene integrado, también tengo algunos videos en el canal sobre RTK-Query.
Hola Carlos, con react-query puedes crear custom hooks como muestro en el video sobre las mutations, y puedes probarlos de forma aislada como muestran acá: react-query.tanstack.com/guides/testing En caso que quieras probar los componentes, puedes probarlos como probarías si hicieras las llamada a la api en un useEffect, podrías usar @testing-library/react testing-library.com/docs/react-testing-library/intro/
Hermano una consulta, digamos que consultas paises en varias paginas, y no tienes un hook creado para esto, lo haces directo En la pagina 1 haces esto: seQuery([key], getPaises, { staleTime: Infinity, }); En la pagina 2 haces esto,: seQuery([key], getPaises, { }); Que pasara aqui? tomara el staleTime que se configuro cuando se creo la cache o se eliminara esta configuración la segunda vez que se llama a esta consulta ya que no se menciono esta opción ? Osea las configuraciones si se vuelve a llamar a la cache y no se mencionan se eliminan y se ponen las por defeault?
Hey muchísimas gracias por el video, tengo un pequeño problema y es que aunque hago toda la petición de manera correcta, a la hora de leer la data destructurada del useQuery me retorna un [object] [Object] por lo que no se como acceder a los datos del objeto, alguien sabe que puede estar pasando?
Me ha parecido muy interesante el video y desde ya tienes un nuevo suscriptor pero me surgen un par de dudas al respecto que no sé si podrías resolverme... 1) ¿Merece la pena usar React Query con Gatsby a secas?. 2) ¿Merece la pena usar React Query con Gatsby si estamos usando ademas Algolia?. Un slaudo.
Hola amigo, react-query esta bueno para aplicaciones react que se cargan del lado del cliente. Pero no para generadores de web estáticas como Gatsby, con Gatsby tu vas a cargar los datos cuando compiles tu sitio, y se generan las páginas con esos datos pre cargados. Así que en esos casos no se usaría react-query ya que no vas a consultar datos del lado del cliente. Saludos.
@@nihil_um en nextjs si puedes hacer client site rendering y en esos casos si lo usaría 💯. Pero para static site generation o server side rendering no sería necesario.
super bien bro, que pasaria si se agregan mas post a la lista, se hara el render con los nuevos datos y lo guardara a la cache??? o seguira mostrando los mismos datos hasta que venza el tiempo de la cache?????
si, se hace el render con los nuevos posts y se actualiza la caché. Por eso es importante invalidar la chaché al hacer una mutation, para que se vuelvan a buscar los datos al servidor y te actualize el listado y la caché.
@@marcospoot5951 si pero en tus aplicaciones no solo tienes queries, también hay mutations, cuando cambias los datos, te recomiendo veas el siguiente video donde lo explico
Maestro una pregunta, si tenemos una vista donde se va ir mostrando post que va creando las personas esa vista la queremos hacer en tiempo real para que cuando las personas creen su post vaya apareciendo en tiempo real los post y todas las personas lo puedan ver en tiempo real, entonces mi pregunta es si usamos reat query para esto no hace falta usar una librería de socket.io oh si es mejor usar socket.io ?
Hola Marcos, react-query solo recibe una promise, por lo que no tiene opiniones en cuanto a la librería que uses para acceder a los datos, puedes usar axios, fetch, o socket.io. Con react-query puedes hacer un long polling que es consultar los datos cada cierto tiempo usando la opción refetchInterval. Pero los web sockets no son tan fácil de manejar con react-query, aunque hay algunas soluciones para usarlos mientras que tu te encargues de manejar la caché manualmente usando el queryClient, ejemplo: tkdodo.eu/blog/using-web-sockets-with-react-query
Hola una pequeña duda, cuando utilizo react query (useQuery) con el mismo id, en distintos componentes, cada vez que el componente se monta vuelve a hacer feching de los datos sin utilizar la cache. Sabes cual es el problema en el caso que quiera coger los mismo datos en distintos componentes sin volver a llamar al servidor?. Saludos.
Hola, si los datos están en caché y usas el mismo id, react query va a usar los datos que están en caché inmediatamente, y va a hacer la consulta en background para revalidar que los datos sean iguales a lo que tienes en el servidor. Podrías configurar el staleTime para que react query no revalide tan seguido la información y considere lo que está en caché fresco por más tiempo.
Una consulta, si tengo 2 componentes hermanos, que cuando hago click en uno, almaceno informacion en el estado global y se renderiza en su hermano, como hago para desde el componente hermano suscribirme a ese estado, para que cada vez que cambie dicho estado se vea reflejado. En redux usaba mapStateToProps.
Hola muy bien explicado, congratulations! Tengo una duda: si tengo que hacer un signin y enviar los datos, de username y pwd, a una petiocion post de axios, como lo hago? El onClick de un button tiene los datos del form cuando se hace el submit. Como puedo pasarlo al useQuery? Gracias!! // signin.js page const { data, error, isLoading } = useQuery("auth", signin); const onSubmitForm = (data) => { console.log(data); // aqui tengo mis datos }; // petición axios desde el archivo peticiones.js export async function signin(data) { try { const response = await axios.post(`${baseUrl}/auth`, data, { headers: headers, }); return response.data; } catch (error) { console.log(error); } }
Buenas noches amigo me interesa aprender un poco mas de este hook, consulta si tengo una barra de busqueda donde la busqueda empezaria cuando el usuario deje de escribir en la caja de texto estilo dbounce como se podria implementar con este hook
Hola amigos, espero les haya gustado el video. Nota: La clave de las queries actualmente puede ser un String o un Array, pero en la próxima versión de react-query, será obligatorio usar array, por eso estoy usando Arrays en este tutorial. referencia: github.com/tannerlinsley/react-query/blob/alpha/docs/src/pages/guides/migrating-to-react-query-4.md#query-keys-and-mutation-keys-need-to-be-an-array (La clave de las queries se usa para identificar los datos que se guardan en caché)
Muchísimas gracias por tu gran ayuda!!! Menudo descubrimiento!!!
Wuau te felicito explicas demasiado bien en poco tiempo abarcaste todo lo importante te voy a seguir
Gracias por compartir tus conocimientos Grande Yoe
woooo react query es lo máximo.
Maestro seria bueno que nos enseñara como podemos usar React Query para el manejo del estado de la aplicación, podrías hacer una pequeña simulación de una vista login y otra vista dashboard y al momento de iniciar sesión poder capturar el nombre de usuario y el token y poner el nombre de usuario en el dashboard y al momento de refrescar la pagina se mantenga iniciada el nombre de usuario en el dashboard, pero todo esto usando React Query
Jajajajajaj joder no puedo creer que tengo todo ese código que mostraste, literal es todo el código. Brutal hoy mismo me migro todo xD .
Es exactamente lo que estaba buscando. Gracias
es agradable ver la emoción que demuestras cuando estas explicando como funciona la librería, excelente video
Muy clara la explicación, gracias!
Vendita sea la hora en que encontré este canal. Muchas gracias por todo lo que hace. DIOS lo bendiga siempre.
Eres la bestia!!!! Súper mega padre!!!!
Gracias
Esto esta super genial, voy a compartirla con el equipo de trabajo de seguro les va a encantar, gracias por dar a conocer esta maravilla.
Yo lo propuse en mi trabajo y hace más de un año que lo comenzamos a usar y todos felices con la librería 😁
Como en todos tus tutoriales, tienes una manera de explicar tan clara que haces que todas las materias se hagan sencillas. Muchas gracias por tu contenido, es de gran ayuda. Continuo con las mutaciones. Un saludo desde Valencia.
Madre mia, el mejor tutorial que he visto, tu manera de explicar es fantastica! y ademas se nota que tienes un gran conocimiento de esta libreria!
Muy bien explicado, fue la primera vez que vi algo sobre la librería y aprendí mucho
Excelente explicación!!!
Excelente video y gracias por tu deseo de compartir tus conocimientos, me gustaría un vídeo sobre Javascript con tu forma de explicar eso sería genial.
nunca loa habai escuchado a ver si aprendo algo y me facilita la vida en react
Muy buenooo!! te lo agradezco mucho, hace rato quería ver alguien que lo explicara en español !
Buen video! sería genial otro video donde explique errores comunes y buenas prácticas de react query jeje. graciaas
Este video es completísimo!! Me quedaron claros todos los conceptos que explicaste y dejame decirte que es justo lo que estaba buscando, muchas gracias!!
Excelente clase, muy bien explicado, hacía un tiempo quería profundizar al respecto y el profe fue durecto y muy claro, Muchas gracias.
Que bueno que te sirvió, próximamente publico el video sobre las mutations
El mejor video que he visto este año, explicas muy bien. Gracias!
Excelente video !! Tu forma de explicar es muy clara. Gracias !!
Magnífico video: conciso y claro. Me sirvió mucho y me quedó muy claro como usar react query y los casos de uso. Muchas gracias 😊
Muchas gracias por compartir tus conocimientos, muy claro como conciso.
Excelente! gracias!
Muy buen video, explica god.
una verdadera bomba
que bien lo explicaste. me suscribi
Excelente Profe que Don maravilloso tiene para explicar.. Muchas Bendiciones En el canal
Muchas gracias por el tiempo que te tomaste para hacer el video. Saludos :)
Muchas gracias!
Maestro muy bien explicado!!!! asi deberian ser todos los tutoriales !!! gracias!!! cuando uno de nestjs para crear un multitenant jeje
Dos meses aprendiendo desarrollo y creo que hay algo raro en mi porque usé la palabra *sexy* para describir esta librería xD
Gracias, ¡excelente vídeo!
bueno estare atento a tu contenido, gracias
Excelente vídeo, muy bien explicado todo. ¡Muchas gracias por compartirlo!
Muy bueno!!
Está genial! Gracias por explicarlo!
Brooooo, buen video, muchas gracias
suscrito!! buen video !!!🙌🙌
Excelente video, subiras mas material de React query o zustand? un saludo!
Excelente video, gracias por compartir.
Eres duro
Excelente, a la espera de la segunda parte!
gracias, acá te dejo la parte 2: ruclips.net/video/X1qo8qEaWLg/видео.html
Cualquiera se fía. Con aws un crack.
Jaja gracias!
No acabo de ver la utilidad la verdad, es como usar un custom hook y el tema del cache es un arma de doble filo, no siempre te interesa, eso si muy bien explicado 👍
Gracias c:
❤❤❤❤❤
Magnífico video!!... lo vi varias veces por que lo puse en práctica en el acto, estoy muy agradecido de tu aporte. Me gustaría hacerte una consulta, ¿Cómo convive esto con un manejador de estado? (por ejemplo Zustand), me refiero puntualmente a las buenas prácticas y cómo aplicarlo, muchas gracias, soy un nuevo seguidor!
Usas react-query para manejar los datos que traes del servidor, que muchas veces es todo el estado que quieres compartir en las apps. Zustand en caso que necesites tener un estado global de algo que no sean datos que vienen de las APIs, por ejemplo: el estado en memoria de un carrito de compras o un formulario de varios pasos que quieras compartir con varios componentes.
react-query: estado del servidor (lo que traes de las APIs)
Zustand o useState: Estado del cliente, lo que guardas en memoria, como valores de formulario que estás editando, saber si un modal está abierto, etc
@@YoelvisM Muchas gracias por tu aclaración, no te escribí antes por que me puse a poner en práctica lo que me comentas y te podría decir que estoy retirando piezas y piezas de código de mi proyecto reemplazándolas por React Query, estoy super contento!, muchas gracias!! (a todo esto, perpetué el estado usando "getQueryData", espero estar en lo correcto)
Muy buena explicación de react query. Tienes algún ejemplo básico o un link donde se pueda usar react query utilizando CDN, es decir, sin utilizar NPM y cargar la librería directamente con un script CDN. Muchas gracias.
me encanto, podrias hacer uno de ag-grid?? que trabaja con tablas y he visto q facilita mucha la vida de igualmanera , si pudieses hacerlo consultando Apis , te amaria por siempre
No he usado esa librería pero la voy a revisar, saludos
Hola buenas muy buen video, esto serviría para firebase Authentication ?
Hola, me encanto tu video. Muy bueno en realidad. Tengo una duda, cuando estoy usandolo esta pasando que en los observadores dice que tengo 26, pero no se que es ese numero. Abajo en la devtools al lado de la clave de la posicion del cache
si quieres consultar la cache desde otro componente, debes volver a escribir const {data} = useQuery(["data"], getData) o hay otra forma de hacerlo?
que piensas de RTK Query vs react Query? en tu opinión cual ocuparias?
react-query definitivamente, tiene más opciones y me gusta más la forma que se usa. RTK-Query, también está bueno, para proyectos que uses con redux toolkit lo puedes usar ya que viene integrado, también tengo algunos videos en el canal sobre RTK-Query.
Excelente video, algún consejo de cómo testear los componentes que usan react query ?
Hola Carlos, con react-query puedes crear custom hooks como muestro en el video sobre las mutations, y puedes probarlos de forma aislada como muestran acá: react-query.tanstack.com/guides/testing
En caso que quieras probar los componentes, puedes probarlos como probarías si hicieras las llamada a la api en un useEffect, podrías usar @testing-library/react testing-library.com/docs/react-testing-library/intro/
Hermano una consulta, digamos que consultas paises en varias paginas, y no tienes un hook creado para esto, lo haces directo
En la pagina 1 haces esto:
seQuery([key], getPaises, {
staleTime: Infinity,
});
En la pagina 2 haces esto,:
seQuery([key], getPaises, {
});
Que pasara aqui? tomara el staleTime que se configuro cuando se creo la cache o se eliminara esta configuración la segunda vez que se llama a esta consulta ya que no se menciono esta opción ?
Osea las configuraciones si se vuelve a llamar a la cache y no se mencionan se eliminan y se ponen las por defeault?
Hola, me ha servido mucho esta clase, pero me quede con la duda, que función tiene la key en useQuery ?
Saludos y gracias
Es para guardar los datos en la caché, deben tener una clave única
El cache se puede usar como persistencia de datos como lo hace redux-persist??
Saludos!
Hey muchísimas gracias por el video, tengo un pequeño problema y es que aunque hago toda la petición de manera correcta, a la hora de leer la data destructurada del useQuery me retorna un [object] [Object] por lo que no se como acceder a los datos del objeto, alguien sabe que puede estar pasando?
Disculpa tengo un problema, cuando lo hago tal cual el video pero la consulta se repite casi infinitas veces, pero no se por que
Me ha parecido muy interesante el video y desde ya tienes un nuevo suscriptor pero me surgen un par de dudas al respecto que no sé si podrías resolverme...
1) ¿Merece la pena usar React Query con Gatsby a secas?.
2) ¿Merece la pena usar React Query con Gatsby si estamos usando ademas Algolia?.
Un slaudo.
Hola amigo, react-query esta bueno para aplicaciones react que se cargan del lado del cliente. Pero no para generadores de web estáticas como Gatsby, con Gatsby tu vas a cargar los datos cuando compiles tu sitio, y se generan las páginas con esos datos pre cargados. Así que en esos casos no se usaría react-query ya que no vas a consultar datos del lado del cliente. Saludos.
@@YoelvisM Entiendo que en Nextjs tampoco es necesario usarlo, no?.
@@nihil_um en nextjs si puedes hacer client site rendering y en esos casos si lo usaría 💯. Pero para static site generation o server side rendering no sería necesario.
@@YoelvisM Muy bien. Aclarado queda. Muchísimas gracias por despejar mis dudas.
maestro como puedo capturar los codigo de status por cada peticion que haga el react query ?
como se puede seguir consultando la Api, si la app esta en segundo plano o cerrada
Buen contenido bro!
Gracias!
super bien bro, que pasaria si se agregan mas post a la lista, se hara el render con los nuevos datos y lo guardara a la cache??? o seguira mostrando los mismos datos hasta que venza el tiempo de la cache?????
si, se hace el render con los nuevos posts y se actualiza la caché. Por eso es importante invalidar la chaché al hacer una mutation, para que se vuelvan a buscar los datos al servidor y te actualize el listado y la caché.
@@YoelvisM muchas gracias mate!! asumo que el mismo query hace esa mutacion, para actualizar la cache,
@@marcospoot5951 si pero en tus aplicaciones no solo tienes queries, también hay mutations, cuando cambias los datos, te recomiendo veas el siguiente video donde lo explico
@@marcospoot5951 ruclips.net/video/X1qo8qEaWLg/видео.html
Las deficiencias de no usar React- Query: 5:04
Porque tu spinner se tarda un poco mas cargando le tienes algun delay ?
Hola, si todas las consultas tienen delay pero React-Query te trae lo que tiene en caché de forma inmediata
Que tema tienes en vs code?
Maestro una pregunta, si tenemos una vista donde se va ir mostrando post que va creando las personas esa vista la queremos hacer en tiempo real para que cuando las personas creen su post vaya apareciendo en tiempo real los post y todas las personas lo puedan ver en tiempo real, entonces mi pregunta es si usamos reat query para esto no hace falta usar una librería de socket.io oh si es mejor usar socket.io ?
Hola Marcos, react-query solo recibe una promise, por lo que no tiene opiniones en cuanto a la librería que uses para acceder a los datos, puedes usar axios, fetch, o socket.io. Con react-query puedes hacer un long polling que es consultar los datos cada cierto tiempo usando la opción refetchInterval.
Pero los web sockets no son tan fácil de manejar con react-query, aunque hay algunas soluciones para usarlos mientras que tu te encargues de manejar la caché manualmente usando el queryClient, ejemplo: tkdodo.eu/blog/using-web-sockets-with-react-query
Hola una pequeña duda, cuando utilizo react query (useQuery) con el mismo id, en distintos componentes, cada vez que el componente se monta vuelve a hacer feching de los datos sin utilizar la cache. Sabes cual es el problema en el caso que quiera coger los mismo datos en distintos componentes sin volver a llamar al servidor?.
Saludos.
Hola, si los datos están en caché y usas el mismo id, react query va a usar los datos que están en caché inmediatamente, y va a hacer la consulta en background para revalidar que los datos sean iguales a lo que tienes en el servidor. Podrías configurar el staleTime para que react query no revalide tan seguido la información y considere lo que está en caché fresco por más tiempo.
Una consulta, si tengo 2 componentes hermanos, que cuando hago click en uno, almaceno informacion en el estado global y se renderiza en su hermano, como hago para desde el componente hermano suscribirme a ese estado, para que cada vez que cambie dicho estado se vea reflejado. En redux usaba mapStateToProps.
Usa el mismo useQuery hook en los 2 componentes, react-query se encarga de que no se dupliquen las llamadas y te va a funcionar bien
Hola muy bien explicado, congratulations! Tengo una duda: si tengo que hacer un signin y enviar los datos, de username y pwd, a una petiocion post de axios, como lo hago? El onClick de un button tiene los datos del form cuando se hace el submit. Como puedo pasarlo al useQuery? Gracias!!
// signin.js page
const { data, error, isLoading } = useQuery("auth", signin);
const onSubmitForm = (data) => {
console.log(data); // aqui tengo mis datos
};
// petición axios desde el archivo peticiones.js
export async function signin(data) {
try {
const response = await axios.post(`${baseUrl}/auth`, data, {
headers: headers,
});
return response.data;
} catch (error) {
console.log(error);
}
}
Hola amigo, para eso debes usar las mutations como explico en el segundo video
ruclips.net/video/X1qo8qEaWLg/видео.html
Eso mismo se puede aplicar también a React Native
Así es, funciona perfecto con React Native y crea una experiencia muy buena rn las app móviles gracias al uso de la caché
Buenas noches amigo me interesa aprender un poco mas de este hook, consulta si tengo una barra de busqueda donde la busqueda empezaria cuando el usuario deje de escribir en la caja de texto estilo dbounce como se podria implementar con este hook
usa la función refetch que te retorna el hook, la llamas al hacer el debounce. Saludos
@@YoelvisM gracias
Hola amigos, espero les haya gustado el video.
Nota: La clave de las queries actualmente puede ser un String o un Array, pero en la próxima versión de react-query, será obligatorio usar array, por eso estoy usando Arrays en este tutorial.
referencia: github.com/tannerlinsley/react-query/blob/alpha/docs/src/pages/guides/migrating-to-react-query-4.md#query-keys-and-mutation-keys-need-to-be-an-array
(La clave de las queries se usa para identificar los datos que se guardan en caché)
Excelente explicación!