This Could Be the BEST Way to fetch data from an API in React! | SWR Preload & Optimistic UI

[@temoabesadze]

When I need to learn something, at first, I check if Dave Gray has a tutorial about it. Love your videos and your teaching style. Thank you.

[@DaveGrayTeachesCode]

Thank you!

[@shawnmallon2833]

this dude literally just types the vercel example word for word, than surface level explains whats going on

[@pvsrod]

Nice introduction to SWR, thank you. Just a heads up for anybody trying to follow along, the implementation of the optimistic updates is different in the git repository (is more optimized) as there is no need for the "helpers/todoMutations" functions, everything can be done directly in the optimisticData option with the advantage that we have direct access to the cache and the responses from the CRUD operations

[@kwheeler57106]

You are undoubtedly the best resource on the web. I have learned so much from your videos. Great job and THANK YOU.

[@DaveGrayTeachesCode]

Wow, thanks!

[@domic93]

I wanted to keep it simple and learn the core features. this video helped me a lot. thk dave, I didn't have much trouble understanding it even though I don't listen to much English

[@DaveGrayTeachesCode]

Glad I could help!

[@lukeskywalker7029]

Thank you very much for this very well structured tutorial and code example!!! have implemented swr client side fetching on a few occasions but never been so clear about all the moving parts!

[@DaveGrayTeachesCode]

You are welcome!

[@mariolazzari]

each Dave lesson is a gift from paradise! The ultimate Maestro

[@DaveGrayTeachesCode]

🙏🙏

[@Gustavo-nz1vt]

Best video i watched about SWR, your didactic is impressive! Thanks for sharing this with us

[@DaveGrayTeachesCode]

Glad it was helpful!

[@fnine4202]

Hey Dave, nice video. Your content is very pertinent and complete!

[@DaveGrayTeachesCode]

Thank you!

[@novianto2346]

Good video, Dave. Can you make a video about trpc? Many people talk about it. Thanks.

[@DaveGrayTeachesCode]

Yes! On my list and great request! 💯

[@DaveGrayTeachesCode]

Here's one from my channel with all CRUD operations and React Query: kzbin.info/www/bejne/on26l42CYr5roq8

[@agus-wesly]

Great explanation as always! Thx dave your videos are very helpfull

[@DaveGrayTeachesCode]

Glad to help!

[@bravefastrabbit770]

Thank you Dave, now I know exactly whatTodo!

[@DaveGrayTeachesCode]

You're welcome!

[@AbdoBadr]

thanks dave , how use SWR with the App router sever components please ?

[@ibrahimacanada]

Always Quality Thanks

[@DaveGrayTeachesCode]

You're welcome!

[@tiosatria9919]

best useSwr tutorial, even better than GPT-4.

[@DaveGrayTeachesCode]

Thank you!

[@sahaneakanayaka3394]

Another great tutorial . Your videos are really helping me to become a react pro... love you Dave and wish you best success ❤❤❤

[@DaveGrayTeachesCode]

Happy to hear that!

[@tejasaie8]

Swr, React query and rtk query can we know the difference and use cases dave. Thank you!!!

[@DaveGrayTeachesCode]

I do talk about this in the video a little. All create API layers in your app and store caches of data. Very impressed with SWR 2.0 🚀

[@alexon2010]

Hello, I'm going to watch the video, but I'm suffering with useSWR(), for a question that should be simple, because of a hooks I can only make it work well if it's in the body of the component in the case of React, the problem is that when doing a POST or PUT, I need to trigger useSWR() when I, for example, do a Submit to execute a post... THE BIG PROBLEM: I can't execute useSWR() inside a function, for example: fnSubmit = () => { useFetch('url', 'POST', data) } I can't do this because the hooks won't let me, it's outside the component's body.

[@alexon2010]

This explanation logic makes sense for the complete CRUD process, but I'm a little lost that I have to figure out email and go through and click a button to login, so I only need to execute the useSWR() through a function then I can't sew because hooks won't let me how could I do it then?

[@7doors847]

Tuesday Tuts are back!!!

[@DaveGrayTeachesCode]

Right on! 💯

[@anmolsharma4049]

Great video Dave. Can you make a video on trpc? Lot of talk about that

[@DaveGrayTeachesCode]

Thank you, and yes, that is a hot topic right now. Good request!

[@zephurylol6482]

How do you recommend handling an instance where you want a get /user and get /user/:id? It feels odd to me, as I wouldn't want the caches to be out of sync, where /user/id is mutated and /user is not, but at the same time, how do I take advantage of all these nice mutation, optimistic update and cache things? Am I overthinking it?

[@trycatchangler]

Hi Dave, there is some code missing that is in your video but not in your repo. The helpers folder with the muations is not on your git repo.. Edit: Disregard, I see it in the main TodoList file.; TY for the video!

[@romachamp10]

Hello, thank you for your tutorials. I am learning React and I would like to see on your channel Styled components tutorial. It would be very helpful.

[@DaveGrayTeachesCode]

Welcome and noted!

[@TravinskiyVladislav]

Thank you, Dave

[@DaveGrayTeachesCode]

You're welcome!

[@DarkShadow00972]

Hi Dave very nice videos as always just one que , when we compare it to the rtk query is the difference between them is only related to the easier code approach or is swr has some upper hand over rtk if has pls mention some .

[@DaveGrayTeachesCode]

They both work as an API layer in your app. Ease of implementation is a big consideration for many including me and SWR 2.0 has made implementing optimistic updates easier than others in my opinion.

[@DarkShadow00972]

@@DaveGrayTeachesCode thanx a lot dave ☺️

[@ramendersingh3072]

Hi, how does the sort work properly with optimistic approach? The new object added to array does not have "id". The id will be created by the backend api later.

[@DaveGrayTeachesCode]

You can give it a temporary id.

[@muhammadshahzaib6033]

Wow thank you sir such amazing

[@DaveGrayTeachesCode]

Most welcome!

[@aymenbachiri-yh2hd]

Thank you so much

[@kevl7129]

This IS great, but is there a way to abstract the mutations away from the components, e.g. into the api file? RTK has the edge in this regard I think?

[@DaveGrayTeachesCode]

Note my refactor in the available source code (noted in description) that takes advantage of the populateCache option when it receives a function. The refactor simplified things further in this regard. Which to use / which is better is going to vary by opinion.

[@kevl7129]

Thanks Dave 👍 Your level of engagement with comments is what sets your channel apart!

[@milesrykerodazie171]

Thank you so much for this.Please i am trying to fetch data using axios and swr. The data i am fetching needs admin access token to get the data.when i fetch, it returns undefined and if i remove the protection from the get all users route, the data fetches.how can i include credentials in swr in order to fetch protected data? please

[@DaveGrayTeachesCode]

The "multiple arguments" section of the docs provides a way to pass in multiple arguments that could help: swr.vercel.app/docs/arguments#multiple-arguments

[@chifou]

When you use optimistic way on add data, do you have to manage Id in the frontend? I thought that it was the job of the back end no ?

[@DaveGrayTeachesCode]

You only need to send the id with the request so the backend knows what to update. Likewise, in the frontend with the optimistic update, you need to provide a temporary id value until revalidation does occur at sometime in the future. If not, you will have issues when you map over the optimistic data.

[@tsarprince]

Amaaaaaaze!

[@outletshelssy]

Muchas Gracias por este excelente video

[@DaveGrayTeachesCode]

De nada mi amigo!

[@jhsu8447]

Awesome! Awesome! Awesome!

[@toss5337]

Thank you dave, thats great tutorial!, whats theme of vscode youre using? and the coloring braces is also great.

[@DaveGrayTeachesCode]

You're welcome! Theme choice: kzbin.infodp4u1NNFhtE ..and the braces setting: kzbin.infoMDaxWffMjrQ

[@deepaksarkar811]

Good video and swr seems best alternative for useEffect hook i've seen so far! , One thing I would do is to change the sort method , and render by descending id order from backend API itself instead of writing it everytime in frontend.

[@DaveGrayTeachesCode]

I do like SWR 2.0 😀 Your sort approach is good if you have control of the backend REST API. If not, you must handle it in the frontend.

[@ProMinecraftSprite]

That is possible in spring framework

[@wusswuzz5818]

Did anyone complete the challange? I am unable to and the video bears no resemblance to the github repo. For example the helpers directory is missing. Some of what was in the file there is in another file differently named, also there is no addMutation function etc as in the video.

[@DaveGrayTeachesCode]

Look at the notes in the video description.

[@wusswuzz5818]

@@DaveGrayTeachesCode Thank you. Had a look at the documentation too and came across useSWRMutation which looks even more supercharged.

[@KhanhHoang-fi6yh]

Great, thank

[@محمدحسینآرتنه]

when i use that say some error like i can read null in contact can't you explain me what is that

[@DaveGrayTeachesCode]

I'm sorry but I do not understand your question. Please compare to my source code available at the link in the description. Look for any differences in your code. Also, remember to start json-server like I do near the beginning of the tutorial.

[@stevereid636]

I noticed that in the axios delete request you pass the id as an arg where the I believe the request config object goes. It didn't cause any issues as far as I could see, but I'm confused (as is typescript) as to why its there? 🤷🏾‍♂

[@DaveGrayTeachesCode]

I'm going by memory here, but I think I destructured the ID when the function receives the config object as the parameter.

[@stevereid636]

@@DaveGrayTeachesCode But why is id passed twice like this? todosApi.delete(`${todosUrlEndpoint}/${id}`, id) What exactly is the 2nd id for? isn't the url sufficient to delete the todo?

[@DaveGrayTeachesCode]

Good catch! 💯 Yes, json-server will delete the todo by taking the id from the url parameter. The id value passed by itself in the delete request is not needed. I'll update the source code. 🚀

[@stevereid636]

@@DaveGrayTeachesCode Ah! that's a relief, I thought I was missing something fundamental. Thanks, I really appreciate you taking the time to clarify 👍🏾

[@joniel21c]

Thank you so much!!! @_@ 👍

[@ThanHtutZaw3]

In firebase addTodo , I have to prevent user not to refresh when adding . Is there any other options to handle it ?

[@DaveGrayTeachesCode]

I cannot say for Firebase, but with SWR Optimistic UI updates, you set revalidate: false like I do in this video - and it will not send the request for the new data.

[@voidmind]

So if my API already queries the database after an INSERT or UPDATE and returns it so that I don't have to make an additional GET request afterwards, is there a way for me to mutate() without having to do the additional GET?

[@DaveGrayTeachesCode]

Yes, you set this in options by setting revalidate to false. Also, if you are receiving ALL of the data in the response instead of just the updated data, you can just set populateCache: true to use the received data. The options in the provided source code do to revalidate: false as you need, but it uses a function in populateCache to merge the updated response with the previously received data: github.com/gitdagray/react-swr/blob/main/react-swr-completed/src/api/todosSWROptions.jsx

[@pedroserapio8075]

Not really sure about the optimistic updates, if could end up being confusing for the user when it fails. But for sure it is interesting and to keep in mind.

[@christopheanfry]

Very interesting video Dave as usual. Do you plan to make a video on Nextjs 13 and how to deal with server and client component. Thanks

[@DaveGrayTeachesCode]

Yes indeed! Next.js has been requested and a series for that is in the works. 🚀

[@christopheanfry]

@@DaveGrayTeachesCode fantastic

[@rajatpratapsingh3123]

amazing !!!

[@DaveGrayTeachesCode]

🚀💯

[@marcel5235]

Hi Dave, gr8 content, what is your personal opinion on SWR in comparison with React-query

[@DaveGrayTeachesCode]

I like both, but I've been leaning towards SWR recently.

[@indiancuriousvoice8773]

Mr dave. What is best RTK query or SWR?

[@DaveGrayTeachesCode]

It is just a choice of preference. I like SWR right now.

[@davithchhung7577]

Great tutorial as always! But I have a question. When you use addTodo function you pass two parameters : newTodo and Todos. But in real project, we can not get all todos from backend server from one requests since they are too many. In that case, should we still pass the previous todos to addTodo function or do we have another way to working around?

[@DaveGrayTeachesCode]

That must be a lot of todos! 😀 The only concern here is the todos state that is displayed in the UI. If you have thousands of todos, I assume you will use pagination, infinite display, or some similar approach. The todos in the UI are not part of the request, but they must be returned as a result from the function for optimistic UI.

[@davithchhung7577]

@@DaveGrayTeachesCode I see the idea! thanks you.

[@SuperShivammm]

Thanks for your tutorial, I had one questions, can we use Rxjs instead of SWR because Rxjs has more functionality and it seems better to work as middle tier between client and server components in next 13 version

[@DaveGrayTeachesCode]

You can always use your preference of libraries. I have not compared Rxjs and SWR 2.0, but if it provides what you want, I'd say go for it! 💯

[@owl_code]

Is this work as well as Next.js 13?

[@4j11kMqiREjhp]

Why are you not using semicolon and even deliberately removing them when they're autocompleted to the code?

[@vidigitusmarketing862]

SWR its great!

[@waleedsharif618]

question: what do you think of nextjs? Nextjs is for server-side rendering and i know it but cuz nextjs has many good things such as routing, can i use nextjs for client-side rendering ? Is there any difference if i use react for client-side rendering vs nextjs?

[@DaveGrayTeachesCode]

There are differences - but Next.js is built on React. I think Next.js is great and I will be covering it soon!

[@Rust_Rust_Rust]

Yes, nextJS supports client side rendering it also supports static site generation. No, there's no HUGE differences besides the obvious file structure, use of typescript in nextjs, and some NextJS specific tags (Image tags, Header tags, etc.). Honestly, if you know react well enough you can jump into NextJS easily. I wouldn't really recommend adding complexity to your projects just because you want to use nextJS. If you have a specific problem such as needing SSR NextJS is definitely a great solution. However, React + vitejs is still great.

[@rickZie]

Even react docs does not recommend useeffect for fetching data on page loads etc since useeffect runs two times because of the new mounting unmounting feature with strict mode they are trying to implement in future. React query, react router 6.4 and swr are recommended ones

[@DaveGrayTeachesCode]

Correct. I hope you watched the video to see some of the great new additions to SWR 2.0 🚀

[@Rust_Rust_Rust]

Why is strict mode even a thing

[@rickZie]

@@DaveGrayTeachesCode Yes. These videos are too good. I am going to watch more of them for sure

[@farouktouil5036]

Hi Dave can you tell me theme name of Vscode theme please?🙏

[@DaveGrayTeachesCode]

Yes, I show it in this short: kzbin.infodp4u1NNFhtE

[@mhdfirassbarakat6587]

Another great explanation from you dave but here I have a question from the video title, you said that SWR is a great way to fetch data in react now I am confused should I use SWR, or React Query is better? you know react query is a masterpiece in this field so what do you recommend?

[@DaveGrayTeachesCode]

I currently prefer SWR 2.0 after these updates - but I do need to check out the latest updates to Tanstack Query (aka React Query), too. I may have a new favorite next week :) ...there's always something new. Try it out and choose your favorite.

[@charlesenglebert8226]

what is the point of calling mutate() without any props ?

[@محمدحسینآرتنه]

next time pls teach us next js because i think is so important and so hard for learning

[@DaveGrayTeachesCode]

Coming soon

[@spongebob93lover]

hi, could you do a video about SWR with nextjs 13? thanks

[@DaveGrayTeachesCode]

It works in the same way with Next.js 13. You would use it in client components. Server components can fetch their own data.

[@godloveinaction]

Thanks Dave, thats helpful. I am currently a newbie in programming and i am confused on which path to take as a beginner, should i be a frontend, backend or fullstack.

[@DaveGrayTeachesCode]

As a beginner, you need to start with the 3 pillars of web development which are HTML, CSS, and JavaScript. The first link in the description is to my web dev roadmap which will help guide you. 🚀

[@godloveinaction]

@@DaveGrayTeachesCode Thanks

[@OnePiece_Fandom]

Sir can u plz tell me how can I use it with MERN app and it's safe for production and how can I do it ? Can u plz make a full video on this ?? ❤️❤️

[@DaveGrayTeachesCode]

You can use this with MERN. I provided a link in the description to the documentation which is good - but I can create a project with this in the future, too. This video should go a long ways towards getting you started with SWR.

[@olawumisegun5898]

Is this an alternative to redux-toolkit, react-query, redux-saga, zustand e.t.c ?

[@chill_level_up]

this is for a very small scope than these tools above

[@DaveGrayTeachesCode]

This does create an API layer and store cached data like RTK Query and React Query. Redux Sagas have a more specialized use. Zustand is a state management library I need to cover. In the video, I mention comparisons to RTKQ and RQ.

[@olawumisegun5898]

@@DaveGrayTeachesCode OK thanks

[@whoisthe.l]

you saved my sleep time

[@kamalkamals]

the best way !!

[@dzhaniivanov5837]

maybe a little more advanced topic ,can u make a additional video with SWR content

[@DaveGrayTeachesCode]

Yes, SWR used in this video to call queries with parameters: kzbin.info/www/bejne/Z5DHfZSJn9-Cg7s

[@ManvendraSK]

Best as in, better than ReactQuery?

[@DaveGrayTeachesCode]

That's an opinion you may or may not have after watching the video 👀

[@stevereid636]

You've recently made some awesome typescript tutorials, why not stick with using typescript? 😩

[@DaveGrayTeachesCode]

I will create more TS content, but I also want to keep creating for those that are not using TS. There will be more TS for sure though.

[@stevereid636]

@@DaveGrayTeachesCode Fortunately, I was able to successfully follow along using typescript so it's all good! 😎

[@gallerenfeld2974]

@@stevereid636 Hey Steve , can you share the TS code that you managed to build ? The options functions give me errors in this context.

[@hosamgnaba3205]

Sir , in your honest opinion, do you think we should skip RTK and React queries, and start using SWR as replacement??

[@DaveGrayTeachesCode]

It's good to learn them all. Of course, at work you have to go with the team decisions. For personal projects, right now I'm going with SWR - but there's always something new - this answer could change next week :)

[@akmaljorayev5306]

👍👍👍

[@nicolaichristensen6531]

g, react-query

[@ryanle4059]

I still don't understand why Optimistic UI requires the return value for the mutation function. In optimisticData options, it already knows what the data look like if the function succeeds.

[@DaveGrayTeachesCode]

Good question, and I understand. The Optimistic data response only shows while the mutation request is waiting for a response. After that, we set populateCache to true so the response from the mutation will be displayed - which is the "source of truth" at the server. You could set populateCache to false and avoid the return value of the mutation function - that is not the norm though as most choose to display the result. ..populateCache does accept a function and I could refactor this code using that function and not need to pass todos to the API request functions. 💯

[@frederiknielsen7046]

You forgot typescript. Why do react youtubers pretend it doesnt exist?

[@DaveGrayTeachesCode]

I just completed a full TS course over the last 4 months: kzbin.info/aero/PL0Zuz27SZ-6NS8GXt5nPrcYpust89zq_b ..so your comment misses the mark here. That said, and in general, I realize that not everyone uses TS and I also want to keep beginners in mind as they make up a good percentage of my viewers, too. Of course, you can take any JS or React tutorial and apply TS as a challenge without me needing to do it for you.

[@JustinKofford]

This is a TERRIBLE way to fetch data... from your useParams

[@DaveGrayTeachesCode]

Not sure if you noticed the updated notes in the description, the correction flag that KZbin pops up, or the update repo... but I did make some changes shortly after sharing this video.

[@kenshinhimura3140]

So swr or react tanstack?

[@DaveGrayTeachesCode]

Both are good and the choice is all based on preference. I'm currently choosing SWR when possible.