React Query con Vitejs y REST API (json-server) Ejemplo Practico CRUD

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

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

50% 1

React query es una biblioteca de Javascript para proyectos de React que permite administrar el estado de una aplicación web Frontend, y permite guardar en memoria cache los datos que viene desde el servidor. Esta biblioteca es muy útil al momento de interactuar con APIs (REST API) del servidor. En este ejemplo practico usaremos json-server para crear un backend y vite para generar un proyecto de Frontend.
Codigo: github.com/fazt/react-query-crud
00:00 Introducción
08:44 Backend con json-server
13:28 useQueries
🎥 Videos Recomendados:
Github Pages npm ➜ • Github Pages | Sitios ...
Mongodb Visual Studio Code ➜ • Mongodb para Visual St...
Mongoose ➜ • Mongoose | Introduccci...
Thunder Client ➜ • Thunder Client - Postm...
Variables de Entorno en Nodejs ➜ • Variables de Entorno e...
Curso de Git ➜ • Git y Github | Curso P...
Rest client VSCode ➜ • Rest Client | Extensio...
Mongodb Atlas ➜ • MongoDB Atlas, NoSQL e...
👨‍💻 ¿Qué servicios y productos utilizo?
Ledger (Hardware Wallet) ➞ bit.ly/3ijsVNW
SiteGround ➞ bit.ly/31u9ZEk
Cloudinary ➞ bit.ly/3ohNlJ7
#react #reactquery #javascript #desarrolloweb

Наука

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

27 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@tiposamuel Год назад

Estoy creando mi primer proyecto y es increíble que para cada cosa que busco en RU-vid con la intención de aprender, aparece un tutorial tuyo. Gracias Fazt por compartir tus conocimientos, un abrazo desde Venezuela!

@eduardob.5407 4 месяца назад

SOLUCION si invalidateQueries no funciona correctamente, ya pasó 1 año del video y no sé si cambiaron algo en la librería pero a mi no me actualizaba... yo al menos estaba probando con nextjs y no con vite por lo que capaz fue por eso... Para solucionarlo, debajo de la linea "const queryClient = useQueryClient()" tanto el Products como ProductsForm agregar: queryClient.invalidateQueries({ queryKey: ['products'] }) Igualmente tuve que dejar los invalidate dentro de los onSuccess sino funcionaba a veces si y a veces no... Espero que les sirva y gracias por los videos que subes siempre!!

@joseangelramos5023 Год назад

8:44 Backend con json-server 13:28 useQueries 27:50 useMutation POST 44:17 useMutation DELETE

@user-ob7xk3gj3m 2 месяца назад

Gracias Fazt! genio y crack total, eres el salvador de papas quemadas de devs newbies!

@ItachiUchihaWarrior Год назад

Muchas gracias Fazt por todos y cada uno de tus videos! ❤

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

Volvi para practicarlo y usar mas seguido React query , me sigue pareciendo genial , ojalá subas más material de esto , Eres un grande Fazt

@SkullHandK22 Год назад

Loco, es incluible todo lo que aprendo viendo tus videos, te lo re agradezco, esta librería es genial y como explicas es sorprendente ;)

@PerezCode Год назад

Grande Fazt, había estado esperando este video 🔥

@sDundev Год назад

Genial 👌👌 Todo muy conciso y bien explicado

@JimyDrive Год назад

Otro pedazo de tutorial. Eres un gran Fazt

@argenisgutierrez8028 Год назад

Excelente, justo lo que necesito, porque ya he probado con muchas opciones que he hecho usando fect, axio Hook personalizado, etc, y creo que por muy pequeño que sea el proyecto me parece excelente usarlo, sigue así mi pana

@paracomentar2703 10 месяцев назад

Gracias Fazt, cada dia me ayudas a seguir progresando :)

@SonGoku-pc7jl Год назад

muchisimas gracias por todo Fazt, gran video, volvi a verlo para ya usar react query más habitualmente que cada vez me gusta más :) en el proyecto que decias de ampliar con zustand, podriamos añadir trpc o ya puestos grpc que si que no tengo ni idea pero trpc volvi a verlo y entenderlo mejor y me gustó su ligue con react query :)

@MrGabichoon Год назад

La verdad, me encanto el video, una joyita esta seccion. Agregaria en la descripcion del video, para apretar click en los minutos donde explicas GET, POST, DELETE, PUT. Igual, una joyita el video, muy bien logrado

@juanmanuelalvarez1762 Год назад

Gracias Fazt!!!

@ZBROOS Год назад

Gracias Fazt!

@code_castle Год назад

Gracias.... Sabes que falto ? Llevar los hooks a un folder para ellos, de esta manera queda mas limpio. La verdad genial te pedi este tuto hace unos meses, y cumpliste crack. Gracias.

@christianscarpati9617 Год назад

no solo eso. Millones de cosas. Pero lo importante es que explicó claro y conciso, el código siempre se puede mejorar, saludos

@billgutierrez5189 Год назад

Muchas gracias aprendí mucho

@brawnie3969 Год назад

Muy buen video, gracias :D

@Holri Год назад

Master 🤯

@oscarclaros2225 Год назад

Exelente explicacion.

@juliancortes 5 месяцев назад

Muy buen tutorial!. Sin embargo, cuando utilizas typescript se generan algunos inconvenientes en el tipado del objeto product con el uso del onSubmit ya que se genera el tipo FormDataEntryValue para los valores del formulario. para tener en cuenta!

@user-xs6nq7br4q Год назад

EXCELENTE....

@manjaxyz 11 месяцев назад

Excelente

@marlonmoreno1150 Год назад

Hola muy bueno excelente tus videos ayudan mucho mi proceso 🙏 por fa tienes que hacer un video de RTK QUERY 🖐

@jorgeassaf Год назад

Mas de Payloadcms!! Excelente video

@frostyfreezemovies Год назад

Big fan sir ❤️

@andresfuentes7837 Год назад

Gracias fazt, puedes suvir un video como quedaria el front mas agradable algun dia

@arolalonso5790 Год назад

sos gigante fazt! alto video!.. una pregunta, se puede usar react query como manejador de estados y contexto? por ej guardar la info de un usuario en un contexto y poder acceder a esa info desde cualquier componente de mi proyecto? (como zustand, usecontext, etc)

@johanretd3839 Год назад

me parece mas sencillo q redux, gracias bro x una nueva alternativa

@jairoandresvizuetepedraza5492 Год назад

creo que te amo

@xayaLB Год назад

que bueno el video gracias por compartir, una pregunta que extensión usaste para ver las llamadas a los endpoints??? la interface me ha encantado

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

Excelente video. Tienes un ejemplo básico o un enlace del uso de react query utilizando CDN, es decir, sin utilizar NPM y cargar la librería directamente con un script CDN. Muchas gracias.

@dangelgeek Год назад

Excelente tutorial, gracias Como se llama el plugin que usas para autocompletar el json y los tags?

@christianmagnus1003 Год назад

Este reactquery es idéntico a trabajar con react-apollo para graphql, dónde tenés los useMutation, los useLazyQuerys, reactQuery, useSubscriptions, etc

@ryan-gmusic8157 Год назад

Algo de vuejs con vite y Docker con Django please!!

@devdariill Год назад

se puede ocnfigurar el rfce para que no importe react por default

@erickhilario8782 Год назад

Que extensión usan para el auto completado ?

@hernanarica6389 Год назад

Consideras mejor react query o rtk query? Rtk query me parece muy engorroso…

@martinfloresdev Год назад

Muy bueno, Entonces react query es para las peticiones HTTP, Ahora si quiero manejar estados de react como boleanos, array, objetos se usaria react query? o redux con redux tolkit

@maclaren33 Год назад

Fazt excelente video como siempre, una pregunta, si en mi app tengo implementado REDUX crees que esto se pueda complementar con REDUX o crees que no habria tanta necesidad ?

@cesarmejias9008 7 месяцев назад

En mi opinion. Si ya estás usando REDUX sigue usándolo o si quieres React Query puedes retirar la lógica de redux por la de React query

@cesarmejias9008 7 месяцев назад

En mi opinion. Si ya estás usando REDUX sigue usándolo o si quieres React Query puedes retirar la lógica de redux por la de React query

@caelum16007 Год назад

Consulta el estado de react-query solo existe en la vista si me cambio de page siempre va volver a consultar? ejemplo tengo un componente sidebar que consulta unos datos y existe en toda la app, pero cuando cambio de page vuelve a consultar

@francoagustin765 Год назад

Y para la edicion funcionaria igual digmos que el delete?

@federicoaguilera9573 Год назад

Gracias fazt. Recomendas que siempre se haga de esta forma los crud al backend? Parece una muy buena practics mas legible

@FaztCode Год назад

Si ya conoces hooks como useContext, y ya sabes hacer peticiones creo que si podrias ir por esta biblioteca, simplifica mucho el trabajo y tiene muchas optimizaciones por debajo. Es una buena idea estudiarla a fondo

@sefirosweb Год назад

Lo que no me queda claro es la utilidad de utilizar react-query, es mas rápido que hacer un componente que reejecute las querys y ya?

@francobaudino8550 10 месяцев назад

React query puede reemplazar las suscripciónes de graphql?

@guatherodson6918 Год назад

Dios mio justo lo que estoy estudiando, porque siempre pasa esto

@hernanarica6389 Год назад

No se que version de react query usas pero en la documentación no existe queryKey o queryFn es raro

@ssasasdc Год назад

como puedo poner mi bot a funcionar con las confis ya hechas? no se programar y nada mas necesito que alguien me ayude a ponerles las configuraciones que tengo guardadas, si me podes ayudar te agradeceria en el alma

@chichadioss7795 Год назад

Interesante librería. Ahorra varios useState y líneas de código. Cuál sería la forma correcta de combinarlo con rdx toolkit?

@nivus97 Год назад

@FaztCode Год назад

Si vas a usarlo con Redux toolkit, creo que es mejor usar Redux Toolkit Query, que es la alternativa a React Query y que ya viene integrado con RTK por defecto

@devdariill Год назад

JSON Server: 9:00

@juandiegodurango4715 Год назад

Fazt cuál es más recomendable react query o redux toolkit?

@cesarmejias9008 7 месяцев назад

React query

@GabrielMartinez-ez9ue Год назад

Yo uso swr para las peticiones y zustand para el state. Es mejor utilizar react query para ambos?

@FaztCode Год назад

React query solo seria un reemplazo a swr, pero aun podrias seguir usando Zustand, de hecho hay muchos que lo usan combinados. La otra opcion es usar Redux Toolkit con Redux Toolkit Query, que serian equivalentes.

@GabrielMartinez-ez9ue Год назад

@@FaztCode lo comencé a utilizar hoy gracias a este video. Ya mismo desinstalé SWR. No se compara en nada con lo eficáz que es RQ

@fernandomoran3163 Год назад

Alguien mas le pasado que cuando crearon un proyecto con vite usando react con typescript . No les funciono lo contextos. Yo hasta el dia de hoy no puedo usarlos y no se porque

@CodeWithDesign Год назад

Fazt puedo usar esto con redux toolkit?

@FaztCode Год назад

En ese caso sería mejor que uses redux toolkit query. Es muy similar a react query solo que se integra más fácil con redux toolkit

@jorgeluisduranmontero9098 Год назад

Excelente Tutorial........ Gracias..... Me surge una duda, como se podría hacer con react query para actualizar los datos del frontend cuando cambien los datos del backend sin que lo hagamos nosotros... por ejemplo que lo haga otro user de la app.. ??? algo como una subscription..... Saludos