React Query 3 - CRUD Library Application
Vložit
- čas přidán 2. 01. 2021
- 📘New Course: Build full-stack React Typescript applications tsreact.maksimivanov.com/s/ytd
Code for this video: github.com/satansdeer/react-q...
React Exercise #1: mailchi.mp
Next Video - How to Test React Query Components: • How To Test React Quer...
Discord: / discord
Definitely interested in a testing tutorial as well!
Awesome video Maksim, because of you im using react query and react hook form and they have been a huge productivity boost in my project. Thank you for your work, keep it up! Saludos desde Honduras.
Yes please we need a video for testing the components :D, and thank you for the great video
+1 for swagger tutorial!
Followed several React-Query tutorials and also the docs. But this is the first one which makes me understand React-Query.
Thanks for an excellent tutorial.
Thanks for the tutorial! Just subscribed to your React Exercises Newsletter as well!
Just what I was looking for, you're the best as always :-)
BOOM! awesome tutorial mate! looking forward to the next one! BOOM!
Boom! Thank you!
Good one Maksim, like it. Crisp and to the point. One thing I want to mention though. For react-hook-form version >=7.x you have to use ref object like below
Cheers !!
Great video! Keep them coming
Best CRUD tutorial on React-Query.. thank you Maksim Ivanov
Thank you for this great video! Was wondering if react query works good in next.js?
Огромное спасибо! Успехов во всём, ждем еще видео)
Really..amazing tutorial...thanks Maksim Sir!!
Thank you for this react-query video, exactly what I was looking for. Is it worth using openapi client generators for the frontend? And what would you recommend for React Native project?
Would definitely like to learn more about Swagger!
rebass is very handy an dquickly build some prototypes, thanks for sharing, mate, 👍
Thanks for your effort 🚀👌
great tutorial, thanks!
Thank you very much for this! I was having trouble to understand React Query documentation. I'm a newbie with React and Redux, so trying to create everything, again, with React Query was being a nightmare for me. I still wonder what's best for the front-end of a CRUD APP... I decided to use React Query because Redux was not growing nicely, some data were getting lost with time et cetera.
Great tutorial.. thanks..
Swagger is commonly seen at my work, probably a good idea to do a video
Excellent video! Please make a testing video also
Really great tutorial, thanks Maksim!
Would it make sense to use react-query to handle authentication (API call to get JWT token, register users, etc.)? Or would that be overkill and we can just use Context API with basic fetching?
React query is great for sharing context across your app since it give u a context provider !
if you want tu share state and if u carry about overfetching React query is the best !
Even for a few query it will be less boilerplate code !
This React Query looks revolutionary
Максим, спасибо за супер контент! подписка не глядя. Есть ли в планах rails api + react ?
rails не собирался, думал про django сделать видос
Лайк не глядя👍👍👍 спасибо за урок🔥
Ахах, ну уж посмотри пожалуйста 🤣 Я старался же
Само собой!!! Спасибо за труды ваши🚀🚀🚀
I didn't know rebass for style.It's amazing! I use material ui
With new version 7 of react-hook-form you will have some errors in BookForm component. You have to register input in a different way.
Anyway this tutorial is great!
Thank you! You salve me.
Very clear and good explanation. Caching about react query is because the query with a key is available in all pages? Or because after first query in the same page the result is cached and no more fetch is necessary? Or both? Excellent video
Both :)
Definately would love to have react testing tutorial as well.
For authentication and saving states in a context, how could we replace the user context with react-query? Example a useEffect that retrieves the data in a component and redirects if user has the right roles or not.
Maskim Ivanov Can you please make video on this question ->how could we replace the user context with react-query? for role-based authentication
@@dosomecoding You can use a custom context provider paired with useMutation upon login.
I love your videos !! but i have a question...
Can i do multiple react Queries dependent on a previous use query .. ?
in the documentation only appears multiple queries and dependent queries separated ... and i cannot find anything on it online :(
swagger tutorial!
Очень классно, ты молодец. А будет что-то посложнее? Хорошо бы какое-нибудь приложение на 2-3 часа на Реакте с использованием CRUD. Такого очень мало в ютубе и народ, уверен, не остался бы равнодушным.
Мне очень сложно придумывать идеи для приложений если честно. Очень помогло бы если бы ты накидал, какие приложения хочешь увидеть
@@satansdeer1 Макс, без проблем. 2 варианта. 1) Банальный, но востребованный, типа e-commerce , с использование React , Redux, Redux-form и Node js или Firebase. 2) Это точно отличит тебя от остальных разрабов. Создать проектик по теме востребованной нынче генеалогии. Суть проекта заключается в построении родословного древа на основе внесенных заранее персон. Т.е имеется возможность добавить персону, у нее указываются в форме биографические данные, типа дата рождения, пол, мать, отец (здесь выбор из уже занесенных в базу персон), какие то комментарии. В сайдбаре отображаются последние добавленные в базу лица. Их можно удалять, редактировать. Возможен поиск и сортировка по любому из имеющихся полей. И вишенка на торте и самое главное построение древа, т.е. при клике на любого из персонажей должна выстраиваться цепочка его предков(т.к у каждого из персонажей указывались мать и отец, а у этих матери и отца свои мать и отец, то по идее это все можно сделать). Уверяю, что подобный проект никто не делал, так что в плане оригинальности это будет очень круто. Стек такой же как и в варианте 1. Будет круто если сможешь сделать на MERNe такое. Я как начинающий разраб и увлеченный генеалог попробовал такое замутить для себя , но остановился в середине так как знаний не хватило доделать.Но было бы круто увидеть финальный результат.
@@user-fs1ux7dy6r круто спасибо, кстати чтобы древовидные схемы рисовать мне очень понравился joint js
@@satansdeer1 Надеюсь
захочешь попробовать реализовать :)
Сайт доставки пиццы с расчётом маршрута, CMS простенькое на Реакт, игра тетрис/шашки/"миллионер"...
thank you! working smoothly, however i encountered some changes based from the latest packages installed...
1.) useHistory() is replaced by useNavigate()
2.)
throwing a path.split error
for react-hook-form v7:
3.) In react-router-dom v6, "Switch" is replaced by routes "Routes"
import { Routes ,Route } from 'react-router-dom';
Would love to see a typescript version of this!
Why does the react router Link causes full page refresh instead of the normal behaviour?
Would be interesting to see ur approach to filtering / sorting table data using this react-query lib.
Client-side sort and filter functions. Just use the data that comes from the API, transform it to your needs, and render the new transformed array instead. You can either use useState for that or a wrapper function that you use in the render function directly.
Get your data filtered from the backend and filter it even more in the frontend using array functions
Sir can you make a tutorial to implement react query in react native
We need the video about testing!
+1 for testing tutorial
Изучил документацию для react-query прежде, чем наткнулся на это видео. Даже прочёл несколько статей от Таннера Линсли, но всё равно оставалось несколько вопросов, ответ на которые нашёл в этом видео. Спасибо большое за твой труд. Старый добрый пример из реальной жизни всегда отлично подходит для изучения. Keep it up ;)
upd: только один момент, в твоих видео тема в эдиторе имеет слишком насыщенные цвета, слишком глаза режет. было бы здорово если бы ты использовал тему с меньшей сатурацией. Но это так, просто предложение :)
Do I really need to integrate redux also with react query or it's not necessary after React Query ?
Please answer
Hi Maksim, whats the next topic? 😄 docker + CI/CD?
Great tutorial. Do you have a link to the code?
Thanks
Want to know about the Swagger API as well!
11:40 YES please
+1000 for swagger swagi
Sorry, Ameer, you can only do +1
@@satansdeer1 Yeah I now but my senior ask me implement swagger in new project that way i was so excited to learn swagger :->
could you please make a tutorial about relationship mongoose like adding a user for books API here?
You can remove _key and just use the comma. Try it out
thanks, will try!
How do I get the API part? It is in the repo yes but you should've included the setup part of the API "BEFORE" the fetching part of the tutorial.
I stopped watching the video when you started coding the fetching part from localhost 4000. You should've included a quick setup guide for the API part before started coding the client side.
Nice tutorial, I just feel less emphasis should be put on styling and layout and more of other functionalities and features of react-query
Максим можете плз помочь разобраться с Некст Джей Ес и Реакт Квери дайнамик дейта рендер
Swagger local url how to setup ?
An excellent tutorial on implementing CRUD in React, with the help of 3rd party libraries. Thanks, Maxsim
{2022-12-23}, {2023-01-06}
would def inetely love to learn how to write and doc API with swagger
+2 for swagger tutorial!
wow, an animated avatar!
@@satansdeer1 I just use a gif loading spinner!!
Swagger documentation tutorial +1
Thank you 👍🏼❤️🙏, I follow you on telegram as well, looking forward for swagger tutorial
wait a sec, i dont have telegram group, could you please share a link
@@satansdeer1 sorry it's discord
did he make the testing tutorial?
Great tutorial! But i dont understand why u dont play with cache and instead u invalidating the queries! Also whats the point of using useQuery if we gonna see so many loading spiners! Ty anyways
yes add testing tutorial on this please
Че так мало подписоты, топовый же контент
kindy create time stamps for each kind of request
+1 for Swagger
Video on Swagger Api please
we need testing
На 2х - ахуенно. Респект.
Test guide pliz =)
Tests please.
Discord squad where you at
💪💪💪
Круто вышло Спасибо. Вы могли бы взять это видео, убрать английский и добавить еще и русский...
The tutorial should have focused more on react-query instead of all these extra stylings and CSS libraries.
Definitely agree on this one. Too much time spent styling the app. Also, there was no setup guide for the API "BEFORE" coding the fetching of API in the client side.
CRUD library ? React Query is more like a state management with fetching utility library !!
Also, in my opinion:
1) Typescript looks most attractive in 2021. Writing in JS is bad manners
2) using index files is worse for project organization than unnecessary duplication in the import path
1 - wow, that's a strong opinion, some people still prefer javascript (not me), and typescript could become a blocker for some viewers
2 - how using index files is harmful? The point is not to avoid duplication in the import paths, but to prevent imports from the sibling folders
thanks for the comment
@@satansdeer1 it increases number of files in project x2 instead of duplicate characters in import. What is worse?
@@bibblebabl im not trying to save in amount of characters, im trying to make it more obvious if someone is using non-shared components directly from the sibling modules