Brilliant. I've been on a project at work, in a fairly large codebase using react query already, and I'm still learning react itself, so there has been a lot to get my head around. This helped me a lot!
Hello Dave, I have watched almost all of your video tutorials. If you have some time, I am expecting a socket io And a sequalize tutorial from you. Please carry on. Thank you.
@@DaveGrayTeachesCode It will work for the best same, As you may know, Next.js will make some major changes in their routing/layout system according to their latest blog posts, so the tutorials would be kinda outdated with the new version finally comes out. 😀
I do plan to do a TypeScript series this year. I'm for beginners first, and they need to learn before moving to TS, too. You'll see both with and without here in the future 💯
I absolutely love your channel. Of course i just subscribed lol. I have a question please. Do you have a video with Reactquery with jwt refresh tokens? and rbacs? basically with the middleware ? thanx a lot for everything. you are the real MVP lol.
Thank you! No I do not currently. You could take what is in my React Auth playlist and apply it with React Query though. I should cover this with RQ in the future.
freaking awesome dude. cool! could you do another video with swr maybe with React/Next.js by any chance tho? really appreciate this hard work anyway 🎉🎉
You can use Axios with Async Thunks. I show that in my Redux course before moving on to RTK Query. That said, you can also use Axios with RTK Query although I did not demonstrate it. You can implement it as shown in the docs here: redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery
Thank you, Henrique! 🙏 I want to provide both. I will make a TypeScript tutorial series that will allow me to refer beginners back to it when I do other tutorials with TS. I always want to keep things beginner friendly along the way. 🚀
Thanks for this video. Also is this the same as TanStack Query ?; as far i know should be the same, the only difference is TanStack is avaiable for other frameworks.
In one of the large-scale projects, I am planning to use Redux-Toolkit for "client state" management, as I have so many modules and features such as Search, Advance Filter, infinite scrolling etc. So that I can store the state in the Redux toolkit using store and slices. Now I love React-Query because of "useInfiniteQuery", but I don't want to increase the bundle size as well by installing another library. One of the use case: When I get the list of data from the server, I want to cache the data, and if the user search or filter the data, I want to store the "searchText" and "FilterData" in the state, so when user navigate between pages and come back to the listing page, I can simply provide the already filtered data, that will sure improve the UX. So is it a good idea to stick with RTK Query as it is available inside the Redux-toolkit package and be in the same eco-system?
If you're using Redux Toolkit I would probably just stick with RTK Query since it is built on top of Redux Toolkit and Redux Toolkit is built on top of Redux. It's like an all-in-one package to take care of both server and client side state. Plus you can pass in your RTK query reducers into your general Redux store along with the reducers for your client side stuff. So you can create one Redux store to hold both of your client and server side states. A more lightweight solution could be Zustand for client side state and React Query for server side state. It tends to keep things more simple and less convoluted than Redux.
In your opinion what is best for a react store? An example is a store containing the following: JWT access token, refresh token, name, credit card token etc. I have feeling you will say RTK but do you think RQ is good also?
Good question - and definitely just an opinion as there is no right or wrong here. Whatever you like and are most comfortable with will work. Redux & RTK Query are usually for more enterprise (large) apps. I would reach for React Query or similar in most small to medium projects, but there are some considerations. React Query works with caches. If you need some local state in addition, you could use the built-in Context API whereas RTK Query can just use Redux for state.
Nice video. One question though... What do you think of redux-saga for doing asynchronous task. I have seen that it still has over a million downloads on npm. So, what would be good of big projects ? Is it saga or rtk-query?
Redux is created by an team, and does fix two React app problems, while Redux Query is an one dev show, if something happened to this dev or maybe one day when he lost interest the package is doomed. Next to that unlike Redux your api code is all over the place...
Good points! Yes, React Query offers more flexibility (less opinionated) but that does put some code a bit more "all over the place" as you say. I like using Axios with it, but I really like the more opinionated organization of RTK Query. I'll likely use both depending on the project. Enterprise/production for work will definitely be modern Redux and RTK Query.
I think you need to be using Firebase which would be your backend - or at least your database. You can learn more about react-query-firebase here: react-query-firebase.invertase.dev/
i didin't understand how did you increment the id without adding it to the todo : addTodoMutation.mutate({ userId: 1, title: newTodo, completed: false })
Do you think it’s ok to use react query to fetch data from the backend services and at the same time use redux toolkit to persiste some info that comes from those requests?! Let’s say I want to save user info so that it can be seen from different screens. I’m not sure about how to go with that, it feels “wrong”, at the same time I don’t like RTK Query very much since it’s more opinionated
I was going to ask you the "fetch" vs. "axios", is it still relevant today to use "axios"? I saw you are using it in React tutorial. Lately I've been considering React Query and will definitely check out this video too!
Hi, Dave! Your video is super existing to watch and teach myself a little bit but my sort function is now working (todo items go to the very bottom of list). Don't have any clue why it is working that way.. Even despite taking and pasting your code from the git hub source.
Hi Dave. Thank you for this video. So you prefer redux and rtk query. Is it redux toolkit and rtk query? If so, do you have a repo project for that? Thank you!
Based on project size and needs, I would choose. I do have a full modern Redux course with Redux Toolkit and RTK Query: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-NqzdVN2tyvQ.html
in this video, he was showed to us to use react-query and react-query is different package with rtk query..rtk-query is addon with in rtk package. im prefer to use rtk-query instead of react-query. for me it seems a bit similiar with react-query. repo rtk-query: shorturl.at/jsvG7
Hi Rakhi, as I mentioned in the video, it is really situational but I lean towards RTK Query. Redux is a marketable skill that could help with jobs and RTK Query is part of modern Redux. 🚀
on rtk query vs react query.. seems react query is much simpler to implement.. since rtk query is supported by the same redux team.. hav some advantage.. What do you think Dave?
Yes, I do agree that React Query is an easier implementation. If you do not have a large project - specifically if you do not need global state management - React Query is a good choice. RTK Query integrates with Redux and is great when you do need global state management.
Does it make sense to be ReactJS developer but not to be css expert? I mean css it's self is way more complex with responsiveness and pixel perfection. While css expert struggling in integration of payment gateways, and other 3rd party services etc a ReactJS developer could be much more comfortable in those things
You don't have to be a CSS expert. It does help to know the fundamentals. Likewise, a CSS expert does not need to be a JS expert, but it also helps a CSS expert to know JS fundamentals.
Great video! quick question, how React Query says, do u even use Redux anymore? Watching this video I can say it is better and more clean code than using Redux, Thunks and things like that. What do u think? I just started a big Proyect and we decided to use React Query for all our work, but that, more understanding using React Query than others libraries
Great work! Loved your video. Just one thing I'm not quite understanding... where are we mapping our ./data/db.json to the Todo api? how does the app knows?
Going by memory here - If I used json-server as a dev database, when you launch json-server, it tells you the address and port number it is available on.
The starter code does not have the dependencies because I walk you through adding them in the tutorial. However, if you look at the completed project, all of the dependencies are already listed in the package.json. Clone the repository and then run npm update to install all of the dependencies.
Hi Dave, We would like intermediate to advanced react or mern stack projects. That would be so useful for us after all these great tutorials. Thank you for all.
Good catch! So for anyone reading - outside of a try/catch block "return await" is redundant. It doesn't hurt anything but is unnecessary. I have "return await" on the addTodo, updateTodo, and deleteTodo. The await can be removed there. Do not remove it from getTodos though! Good article on this from Jake Archibald here: jakearchibald.com/2017/await-vs-return-vs-return-await/
I can do another video. I cannot update a video that is already published. Overall, this intro tutorial just covers the basics, and I don't think much has changed for these.
Thanks for the video, great intro to react-query. Quick question if you don't mind. Why do you use a variable with JSX instead of a Component? (e.g. newItemSection), is there any benefits to this or is it personal preference?
Good question! It is something I started doing awhile back. I like defining everything including what I am going to return, but there is no requirement to do so.
Hey Dave, another great vid, thank you. I'm using React Query for a project and have the basic fetching and mutations going - one thing I'm wondering if it's possible to do is when a component/page loads, check react-query data I have in cache already from other pages for a matching id to save having to fetch this item again. If it's there, just use that data. If not, fetch the data. Is this possible, or way too much to be doing? I've been trying to figure out for ages now but can't quite figure it out..
React Query accepts a function where you can select the data you need. Let's say you query users data for a users list and then go to an individual users page. You can pass a select function into the same query on the individual user page. It should used the cached data instead of making a new request - unless the cache has expired. You can control this expiry with more detail by following the example under "Conditional Initial Data from Cache" here: tanstack.com/query/v4/docs/guides/initial-query-data
@@DaveGrayTeachesCode Thanks, I'll dig into this! My possible issue is having a separate cache for the individual items and then all items. I'd like to check [all-items] cache for an id that matches one passed as a param to the indiv item page, if there, populate the [indiv-item] cache with this data (but if the cache doesn't exist yet.. ??) A lot to figure out, but I'll start with that link and hopefully can get there.
Дэйв, спасибо, отличный обзор библиотеки Но хотелось бы увидеть весь потенциал, напримере какого нибудь список дел, чтобы можно было отметить готово дело или нет, с отдельной страницей каждого дела, с пагинацией и чтобы не было перерендеров (наверное это ключевое) =)
