React-Query Tutorial | Consultar APIs, caché y sincronización de forma simple y eficiente 🚀

Подписаться 38 тыс.

Просмотров 21 тыс.

50% 1

Curso de react-query desde cero. Parte 2: mutations.
Hace más de 1 año vengo usando la librería react-query y me ha simplificado y mejorado muchísimo la forma en la que manejo los datos del servidor desde React.
📺 Videos relacionados:
React Query Tutorial - Parte 2: • React-Query Mutations ...
✅ Contenido:
0:00 Setup
6:27 Instalar react-query
7:50 useQuery hook
12:51 dev tools
13:49 patrón stale-while-revalidate
16:46 Refetch en background
18:25 staleTime y cacheTime
21:19 configuración global
22:17 consultas deshabilitadas
25:59 useQueryClient hook
👀 Les sugiero pongan el video en 1080p para que puedan ver el contenido con nitidez.
🔔 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
ru-vid.com?sub_...
🐦 Sígueme en twitter:
/ ymulenll
📌Enlaces:
código inicial: github.com/ymulenll/react-que...
documentación: react-query.tanstack.com/
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/reac...
Muchas gracias por ver este video, espero le haya sido útil.
#reactjs

Опубликовано:

23 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 106

@caelum16007 Год назад

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 .

@YoelvisM 2 года назад

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é)

@AlberthEmperador 2 года назад

Vendita sea la hora en que encontré este canal. Muchas gracias por todo lo que hace. DIOS lo bendiga siempre.

@colommbiano 2 года назад

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

@hacking-multiboot904 Год назад

es agradable ver la emoción que demuestras cuando estas explicando como funciona la librería, excelente video

@guillermofrasquetcasas2694 Год назад

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.

@agustingomez7137 Год назад

Muchísimas gracias por tu gran ayuda!!! Menudo descubrimiento!!!

@aebmyasz 2 года назад

Excelente vídeo, muy bien explicado todo. ¡Muchas gracias por compartirlo!

@rayito845 2 года назад

Excelente Profe que Don maravilloso tiene para explicar.. Muchas Bendiciones En el canal

@misaelpereira9679 2 года назад

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!

@raferdev 2 года назад

Muchas gracias por compartir tus conocimientos, muy claro como conciso.

@davidmora5249 2 года назад

Muy bien explicado, fue la primera vez que vi algo sobre la librería y aprendí mucho

@eknath3813 2 года назад

Muy buenooo!! te lo agradezco mucho, hace rato quería ver alguien que lo explicara en español !

@jonasromanespaillat9566 2 года назад

Gracias por compartir tus conocimientos Grande Yoe

2 года назад

El mejor video que he visto este año, explicas muy bien. Gracias!

@victoraunon6417 Год назад

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 😊

@marcoa.ramirez5752 2 года назад

Muchas gracias por el tiempo que te tomaste para hacer el video. Saludos :)

@joangavelan Год назад

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!!

@diegovillarroel8195 Год назад

Excelente video !! Tu forma de explicar es muy clara. Gracias !!

@justavzz7163 2 года назад

nunca loa habai escuchado a ver si aprendo algo y me facilita la vida en react

@code_castle 2 года назад

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.

@YoelvisM 2 года назад

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 😁

@emmanuelabregu2267 Год назад

Es exactamente lo que estaba buscando. Gracias

@franklinxavierrodriguezsan3359 2 года назад

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.

@sebastianmedina5106 Год назад

Buen video! sería genial otro video donde explique errores comunes y buenas prácticas de react query jeje. graciaas

@davidhiguita5430 2 года назад

Excelente video, gracias por compartir.

@orleydovargas6519 2 года назад

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!

@lilianaperez7408 2 года назад

Está genial! Gracias por explicarlo!

@lucianoaieta6734 Год назад

Muy clara la explicación, gracias!

@joseenrique6948 2 года назад

Excelente clase, muy bien explicado, hacía un tiempo quería profundizar al respecto y el profe fue durecto y muy claro, Muchas gracias.

@YoelvisM 2 года назад

Que bueno que te sirvió, próximamente publico el video sobre las mutations

@YoangelRivaflecha 2 года назад

woooo react query es lo máximo.

@historiaseneltiempo6954 Год назад

Excelente explicación!!!

@asbeldev3071 2 года назад

bueno estare atento a tu contenido, gracias

@briandevs 2 года назад

Excelente, a la espera de la segunda parte!

@YoelvisM 2 года назад

gracias, acá te dejo la parte 2: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-X1qo8qEaWLg.html

@didieroficialdev Год назад

Maestro muy bien explicado!!!! asi deberian ser todos los tutoriales !!! gracias!!! cuando uno de nestjs para crear un multitenant jeje

@germanpinto883 Год назад

suscrito!! buen video !!!🙌🙌

@agustinperez8700 2 года назад

Muy buen video, explica god.

@cumpaMira Год назад

Excelente! gracias!

@lautaroriveiro 2 года назад

Muchas gracias!

@jonathanshock1113 3 месяца назад

que bien lo explicaste. me suscribi

@JRCode97 Год назад

Brooooo, buen video, muchas gracias

@YoungHWN 2 года назад

Eres la bestia!!!! Súper mega padre!!!!

@YoelvisM 2 года назад

Gracias

@MatiasAlibertti 2 года назад

Muy bueno!!

@javiergarciafillol4454 Год назад

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 👍

@Deus-lo-Vuilt Год назад

Excelente video, subiras mas material de React query o zustand? un saludo!

@francarloscastillorobles3618 2 года назад

Eres duro

@julianfanjul7721 Год назад

una verdadera bomba

@erikamalpicaloayza3431 2 года назад

Gracias c:

@Shechovalencia 2 года назад

Buen contenido bro!

@YoelvisM 2 года назад

Gracias!

@TheDESAKATO 2 года назад

Cualquiera se fía. Con aws un crack.

@YoelvisM 2 года назад

Jaja gracias!

@justavzz7163 2 года назад

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

@YoelvisM 2 года назад

No he usado esa librería pero la voy a revisar, saludos

@josemunoz508 Год назад

Hola buenas muy buen video, esto serviría para firebase Authentication ?

@juanv87 Год назад

❤❤❤❤❤

@cesarl.c.847 Год назад

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.

@andresmalave659 Год назад

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

@uraharaYorrch Год назад

si quieres consultar la cache desde otro componente, debes volver a escribir const {data} = useQuery(["data"], getData) o hay otra forma de hacerlo?

@TheProactiva Год назад

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!

@YoelvisM Год назад

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.

@YoelvisM Год назад

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

@TheProactiva Год назад

@@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)

@stac95 2 года назад

El cache se puede usar como persistencia de datos como lo hace redux-persist?? Saludos!

@mytrainerr Год назад

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?

@carlosmariohenaogonzalez9480 2 года назад

Excelente video, algún consejo de cómo testear los componentes que usan react query ?

@YoelvisM 2 года назад

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/

@colommbiano 2 года назад

maestro como puedo capturar los codigo de status por cada peticion que haga el react query ?

@YayiCraft 2 года назад

Que tema tienes en vs code?

@carlosalbertocabreraquirog8297 2 года назад

que piensas de RTK Query vs react Query? en tu opinión cual ocuparias?

@YoelvisM Год назад

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.

@quesocaliente4817 2 года назад

Disculpa tengo un problema, cuando lo hago tal cual el video pero la consulta se repite casi infinitas veces, pero no se por que

@fernandocampos1743 Год назад

como se puede seguir consultando la Api, si la app esta en segundo plano o cerrada

@IgnacioFornes 2 года назад

Hola, me ha servido mucho esta clase, pero me quede con la duda, que función tiene la key en useQuery ? Saludos y gracias

@YoelvisM 2 года назад

Es para guardar los datos en la caché, deben tener una clave única

@albertitoJr93 2 года назад

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.

@YoelvisM 2 года назад

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

@marcospoot5951 Год назад

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?????

@YoelvisM Год назад

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 Год назад

@@YoelvisM muchas gracias mate!! asumo que el mismo query hace esa mutacion, para actualizar la cache,

@YoelvisM Год назад

@@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

@YoelvisM Год назад

@@marcospoot5951 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-X1qo8qEaWLg.html

@gerarduab9960 2 года назад

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.

@YoelvisM 2 года назад

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.

@colommbiano 2 года назад

Eso mismo se puede aplicar también a React Native

@YoelvisM 2 года назад

Así es, funciona perfecto con React Native y crea una experiencia muy buena rn las app móviles gracias al uso de la caché

@colommbiano 2 года назад

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 ?

@YoelvisM 2 года назад

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

@jonasromanespaillat9566 2 года назад

Porque tu spinner se tarda un poco mas cargando le tienes algun delay ?

@YoelvisM 2 года назад

Hola, si todas las consultas tienen delay pero React-Query te trae lo que tiene en caché de forma inmediata

@CokyCokino 2 года назад

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); } }

@YoelvisM 2 года назад

Hola amigo, para eso debes usar las mutations como explico en el segundo video

@YoelvisM 2 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-X1qo8qEaWLg.html

@carlosbrito2116 2 года назад

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

@YoelvisM 2 года назад

usa la función refetch que te retorna el hook, la llamas al hacer el debounce. Saludos

@carlosbrito2116 2 года назад

@@YoelvisM gracias

@africanchina1 Год назад

Las deficiencias de no usar React- Query: 5:04

@nihil_um 2 года назад

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.

@YoelvisM 2 года назад

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 2 года назад

@@YoelvisM Entiendo que en Nextjs tampoco es necesario usarlo, no?.

@YoelvisM 2 года назад

@@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.

@nihil_um 2 года назад

@@YoelvisM Muy bien. Aclarado queda. Muchísimas gracias por despejar mis dudas.