If anyone else is struggling with node-fetch related errors: it had some package management-related changes since this video was recorded. If you just want to follow along with the video, you can do so by installing the exact versions of stuff that Jack is using: `yarn add typescript@4.4.2 ts-node@10.2.1 @types/node-fetch@2.5.12 -D` `yarn add node-fetch@2.6.1`
A couple years ago I built a Chrome extension that converts Amazon HTML invoices to CSV format. Needless to say, I ended up using async/await in my code. I had no idea what I was doing then and I still have no idea what I'm doing now. Thankfully, the extension worked, miraculously.
To be honest I am really enjoying your channel ! Started with micro-frontends, but your videos continue to show me interesting things that I didn't know about in a very simple manner :) All the best and keep going!
When i was learning to code I had John Smilga who helped me learn a ton of stuff. Now that I finally got a job, I have you to teach me the next, more advanced phase of learning that I need. And it's really awesome. Thank you so much for this brilliant channel you run.
Great video. Helped me not only to understand how to write async code in both TypeScript and JavaScript but also the consequences of the different mechanism and a mechanism to support *different* mechanisms using overloading. Now to try to understand and write my own!
Wow, what you are explaining at 15:52 is awesome, I thought that I am an experienced pro, still I didn't know that. Thank you. That reduce trick is to be prohibited in a multi-member team :-) at 20:17 38:00 actually, it is not function overloading in a traditional way, it is just a function definition overloading, since you have here only one implementation of the function, and all other function signature definitions must match the implementer function's signature. Great, video, anyway.
Jack, you're awesome! I find it so easy to consume the lessons in the tutorials you put together, and you also do really great, relevant foundational topics. I have learned a lot in a little time this week from your v-insightful vids ~ thanks so much, and keep up the fantastic work! 🙏👍
Thanks for this instructive video, I learned about Pooled Promises via the library Supercharged. But concerning the tests, I was expecting to see how to mock the fetch call to an API, because in our unit tests we mock axios and I saw others use MSW.
For info an async function return an promise. So except for callback you never need to use new Promise(). If you whant to reject an acyn function (promise.reject) you just need to throw . Also, you dont need to "return await response" if you dont want to handle the error in this function. It will return an promise in either way. Only where the error is handled is different.
Keep up the great content! Just so you know, promise all works in parallel. Every promise that you pass inside of the array is fired off using parallelism. If one rejects, the entire promise will reject. The benefit to using the pool library is that you can specify how many concurrent requests are intended to be resolved
Correct me if I’m wrong but Promise.all doesn’t execute anything. Promises are executed at the time of creation. Promise.all only impacts the way the promises are resolved. Additionally, JS and its related runtimes are single threaded event loops. All execution happens concurrently, not in parallel. I believe this is a common misconception.
@@petercorrea Hey Peter, you are correct with your comment. The promises upon being invoked, are fired off immediately. However, the alternative to parallelism is the fact that each of the promises inside of the array are running in parallel and not in sequence. This allows each promise to be resolved much quicker, versus having to sequentially await every single promise invocation
Even though I’m well familiar with the subject but yet I enjoyed every second of the video. I actually watch your videos as distresses at the end of my day haha.
I don’t know yet if you will explain it later (I am at 10:56 Cool so now you know how to [return await] a promise part of an [async function]) but if you return await it’s only when you want to handle the error in the current function… but you are probably going to explain this later because you are such a professional coder 😮 and I guess you will need to add your try catch anyway… 😅 I already liked+subscribed+commented hopefully 🤞🏼 my prediction is right ❤ Though that would make this comment useless 😂😂😂
Great video Jack!, I have a question, is it possible to have a video where you also explain asynchronous JS using Observable(RX) pattern? that would be amazing
Yeah, I'll have a look at that. I know I've had some trouble finding good practical RxJS stuff. Not sure if I qualify as an expert on it. But I definitely think it's worth knowing.
Hey Jack, at ~9 mins you use try / catch to wrap your async await and my question is; how much try catch is acceptable to use in code (esp production code)? Is there a computational disadvantage to using it liberally? For example in a more complex situation there may be many nested functions inside that try catch and in such a case do we need to do any optimization of our code to this end? Thank you so much for the great video! :D
I only try/catch on something that could actually fire are runtime because of a resource issue, like file access, or a fetch. I don't try catch around access logic. Some folks wrap object or array dereferences in try/catch as a cheap way to catch if anything in the data is missing. But IMHO, it's better to use optional chaining and control the behavior in that case.
Thanks @Jack Harrington, very nicely explained. I have noticed your VS Code auto complete or autofills the code (see between 9 min - 10:30 minutes), what extension or settings is that?
I think I exceeded the limit of comment per video and probably I should watch more advanced content but Jack is just so awesome 😎 I can’t stop… on the line 36 (at 13:09) I don’t understand why you need to mark async (I do it purposefully all the time myself because in TypeScript it will make the compiler know that I am returning a promise but other people will argue that it is useless) because it doesn’t make use of any `await` keyword… also I think that if you don’t use `new Promise` it would make your code more idiomatic of the async await paradigm… 😮😮😮 😅
I am unsure if my comment is clear I tried to make it short 😂 But yea I believe it should have been explained in the context of what you are doing right then… but I might be wrong… I am watching this video just because I love TypeScript and you are an amazing _Tutorialist_ (I think I juste invented a word there)…
Great video, but your monitor/recording scale is too large imo. It would be better to see more than just 10 lines as well as a little bit more of the terminal.
I believe there is breaking changes for node-fetch and @type/node-fetch version 3. If you install version 2 as Jack's specific version, the return from await will work and it won't flag as issues in VS Code. I tried to cast the value like `return (await listResp.json()) as PokemonList but it will only suppress the error within VSCode. npx ts-node index.ts will throw error still
Hey Jack. Usually we need to call if (!res.ok) in fetch to properly check for an error since it doesn't an exception throw normally like axios does. According to your video here, it looks like node fetch is exhibiting more axios-like error handling behavior. Am I correct in saying node-fetch throws an exception for us, unlike browser fetch?
Yeah, that's true. That 5050 request is generating a 500 and that's being thrown. You should test that out, but yeah, it certainly seems from the behavior like `node-fetch` is doing the throw for us.
Question: you defined the state as a pockemon[], but the initial state was an empty [] - how come ts allowed that? an empty [] is obviously not a pockemon[]
In case of using a promise in place of cash how does it ensure that the data that it returns is not stale? e.g. if the result of fetch has changed would promise get executed once again and return different result? I am just trying to understand how does promise finds out if it is ok to return the previous data or to check if data has changed. Thank you
Fetch has no way of knowing if your data has changed or of making subsequent requests. If the fetch was fulfilled or rejected then that is the value of that particular promise forever. If you are looking for a more complex polling type of interaction you might want to check out react-query.
I have a question: for the first page of Next.JS we have a lot of cards and endpoints that should be called. what is the most performant way to do this without making a performance issue? Can you please explain this or make a video for it?
This may sound a little off of the main subject but could you please explain why need to execute res.json() on the data that is returned from fetch? Thank you
Sure. You have the raw response `res` and it has a bunch of metadata (result code, headers, etc.) and it has the payload that you can read using various methods depending on the type of payload you are expecting. But each of those payload accessors is in turn a promise. So what this is doing is returning that promise so that the next `then` will only be fired once all of the JSON is ready. And the value that is sent to `then` will be the decoded JSON object.
Why am I NOT seeing my comments? Even though the count increases. I posted a question and sample code to show that Promise as cache not working for external endpoint.
I'm not doing anything on my end to remove comments. I have heard the TH-cam comment system can be flakey. Feel free to join the Discord server and ask your question there. But be. sure to read and follow the posting #rules.
Node Version: 14 Stuck with the error : TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\akashs\Desktop\Personal\UK\HandsOn\APIS\async-with-ts odejs\index.ts Can any one help. Node Version: 16 If i use the updated version of node, then I get the below error: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\akashs\Desktop\Personal\UK\HandsOn\APIS\async-with-ts odejs\index.ts
Jump onto the Discord server and ask in #typescript. I don't use Windows for development, so I can't answer easily, but there are a lot of folks on there who do and might be able to help.
I was complaining on a different video the other day because it was not mobile 📱 friendly… I don’t know if something is different with this video but I think it is better for some reasons 😅😅😅 (4:20)
When I try to run the code with "npx ts-node index.ts" I'm getting an error: "Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension." and when I add "type": "module" to my package.json I get another warning: "[ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" Anyone know how to resolve this?
github copilot feature is amazing.. but having it in such tutorials, is more annoying than helpful to understand the concepts (breaks the flow by auto suggesting next sequence)
I'll be doing some new Design Patterns videos in the coming weeks and those will get some new book chapters. I've been pretty busy with a new job and updating the Module Federation book.
I agree that async awaits are nicer than thens and catches but your reasoning in the video seems odd to me. You are chaining your thens in an unfortunate manner and therefore you would need multiple catches. But if you would chain your thens differently, then you would only need one catch for all of them and the nesting is also less bad. You just have to return the second Promise within your first then etc. This way you end up with all of the nested Promises and thens within the most outer then, thus it is sufficient to use one catch at the end. :)
@Jack Herrington: awesome video... at t:15:55 where you're mentioning Promise's cached value, what happens when theoretically between your first call and the second call, the return value of the fetch at the origin is changed, i.e. if Bulbasrurus is changed to Hectasurus (sorry not a Pokemon guy as you can clearly tell), do we still get the cached value or is there a mechanism to check the diff and invoke a second call to then get the new and updated value?
@@jherr i see.. thank you. However, how would one go about detecting whether there _HAS_ been a change or not in order to initiate a new promise without having to resort to SWR or alike (assuming I understand their purpose correctly :P)
@@sleepingUgly Nothing is going to auto-detect server changes for you, not SWR or React-Query. There are frameworks that do this, but they are using things like websockets, long-polling or just straight polling to keep the client more or less in sync with the server. More in the case of websockets, progressively less as you move towards polling. AFAIK, the only mechanism that SWR has for this is to enable a polling interval. Which is just a `setInterval` on a `fetch`.
If anyone else is struggling with node-fetch related errors: it had some package management-related changes since this video was recorded. If you just want to follow along with the video, you can do so by installing the exact versions of stuff that Jack is using:
`yarn add typescript@4.4.2 ts-node@10.2.1 @types/node-fetch@2.5.12 -D`
`yarn add node-fetch@2.6.1`
Yeah, the ESM changeover to node-fetch messed this up. :(
And we are getting fetch API natively on Node 🤩
thank you for your comment i think you saved me some sanity
A couple years ago I built a Chrome extension that converts Amazon HTML invoices to CSV format. Needless to say, I ended up using async/await in my code. I had no idea what I was doing then and I still have no idea what I'm doing now. Thankfully, the extension worked, miraculously.
Really love your teaching style would love to see a whole course done on react native with typescript
To be honest I am really enjoying your channel ! Started with micro-frontends, but your videos continue to show me interesting things that I didn't know about in a very simple manner :)
All the best and keep going!
Your techniques are really awesome, I appreciate your efforts towards juniors developers
Thank you for this great video! I've just started to study TS, I'm so happy to find your channel!
This video is great. Love that you included a section on async testing.
That promise pool extension is brilliant!! Will help a lot. Thanks for the tip, man. Keep up the great work.
I was only looking for the Promise but got engaged with the other examples ty!
I’m really surprised you touched on the compatibility of loops with promises. And sequential execution of promises. Good shit 👍
When i was learning to code I had John Smilga who helped me learn a ton of stuff. Now that I finally got a job, I have you to teach me the next, more advanced phase of learning that I need. And it's really awesome. Thank you so much for this brilliant channel you run.
Great video. Helped me not only to understand how to write async code in both TypeScript and JavaScript but also the consequences of the different mechanism and a mechanism to support *different* mechanisms using overloading. Now to try to understand and write my own!
Wow, what you are explaining at 15:52 is awesome, I thought that I am an experienced pro, still I didn't know that. Thank you.
That reduce trick is to be prohibited in a multi-member team :-) at 20:17
38:00 actually, it is not function overloading in a traditional way, it is just a function definition overloading, since you have here only one implementation of the function, and all other function signature definitions must match the implementer function's signature. Great, video, anyway.
Right! Man, when another dev showed me that I was immediately like; "Oh crap, I can take a ton of local cache management code and just chuck that."
This is pure gold and that too free !!
Thank you for your continued service. As always look forward to more amazing stuff
I love that you included test here 👍🏻
This is very extensive and thorough. Thank you, Jack.
Those trees and foliage in the forest, sir, caught my attention !
Jack, you're awesome! I find it so easy to consume the lessons in the tutorials you put together, and you also do really great, relevant foundational topics. I have learned a lot in a little time this week from your v-insightful vids ~ thanks so much, and keep up the fantastic work! 🙏👍
Thank you very much! It's really nice to hear that.
Thanks for this instructive video, I learned about Pooled Promises via the library Supercharged. But concerning the tests, I was expecting to see how to mock the fetch call to an API, because in our unit tests we mock axios and I saw others use MSW.
forEach against for loop, Promise all, promise pool, jest testing, function overloading - really useful, thx!
For info an async function return an promise. So except for callback you never need to use new Promise(). If you whant to reject an acyn function (promise.reject) you just need to throw .
Also, you dont need to "return await response" if you dont want to handle the error in this function. It will return an promise in either way. Only where the error is handled is different.
Keep up the great content! Just so you know, promise all works in parallel. Every promise that you pass inside of the array is fired off using parallelism. If one rejects, the entire promise will reject. The benefit to using the pool library is that you can specify how many concurrent requests are intended to be resolved
Correct me if I’m wrong but Promise.all doesn’t execute anything. Promises are executed at the time of creation. Promise.all only impacts the way the promises are resolved. Additionally, JS and its related runtimes are single threaded event loops. All execution happens concurrently, not in parallel. I believe this is a common misconception.
@@petercorrea Hey Peter, you are correct with your comment. The promises upon being invoked, are fired off immediately. However, the alternative to parallelism is the fact that each of the promises inside of the array are running in parallel and not in sequence. This allows each promise to be resolved much quicker, versus having to sequentially await every single promise invocation
Concurrent is correct, parallel is incorrect
Even though I’m well familiar with the subject but yet I enjoyed every second of the video. I actually watch your videos as distresses at the end of my day haha.
A very good explanation about async JavaScript. I'm waiting for your video about the new Typescript 4.4!
Great content, as always.
Great content,
I'm learning so much from your videos,
Promise as a cache 🤯
This is really a mature and easy to understand code.
Wow wow wow, what a scenery!!!!!
Fantastic video, Jack!
Awesome!! Keep this amazing work! Really good content, and the way that you explain is unique, very easy to catch the idea.
This video helped me out a ton! Thank you so much
To be honest I am really enjoying your channel too!
I thought i know promise very well , then I saw this one caching and all ❤️
Omg I'm late but this was so helpful. Thank you very much!
Love this !
Awesome! I was looking for this (promise pooling, I didn't know it exists 😅
great content...
Would love to see a course/playlist about react native with typescript and an api development uing clean code architecture
This is amazing! Thank you for the great content.
amazing work jack :) have a nice day
Really useful and easy to understand. Thanks!
Thank you Mr. Jack Herrington
I don’t know yet if you will explain it later (I am at 10:56 Cool so now you know how to [return await] a promise part of an [async function]) but if you return await it’s only when you want to handle the error in the current function… but you are probably going to explain this later because you are such a professional coder 😮 and I guess you will need to add your try catch anyway… 😅 I already liked+subscribed+commented hopefully 🤞🏼 my prediction is right ❤ Though that would make this comment useless 😂😂😂
Would love to see the extensions that you are using in your visual studio code for the autocomplete, json to interface and auto generate code snippets
JSON2TS to do the JSON conversion. And sometimes GitHub Copilot to get the hinting.
Awesome stuff!
Yet another banger video
Great video Jack!, I have a question, is it possible to have a video where you also explain asynchronous JS using Observable(RX) pattern? that would be amazing
Yeah, I'll have a look at that. I know I've had some trouble finding good practical RxJS stuff. Not sure if I qualify as an expert on it. But I definitely think it's worth knowing.
This is amazing, thanks!
best voice, hands down!
running npx ts-node index.ts doesn't work - "Must use import to load ES Module
"
The same problem..
Same... :/
The same problem ... I tried everthing...
Love these videos. :)
Hey Jack, at ~9 mins you use try / catch to wrap your async await and my question is; how much try catch is acceptable to use in code (esp production code)? Is there a computational disadvantage to using it liberally? For example in a more complex situation there may be many nested functions inside that try catch and in such a case do we need to do any optimization of our code to this end? Thank you so much for the great video! :D
I only try/catch on something that could actually fire are runtime because of a resource issue, like file access, or a fetch. I don't try catch around access logic. Some folks wrap object or array dereferences in try/catch as a cheap way to catch if anything in the data is missing. But IMHO, it's better to use optional chaining and control the behavior in that case.
Awesome video as always Jack btw what's the vscode theme name though?
Night Wolf [black] and Monolisa
Thank you
really nice, thanks.
Would have loved this in Deno
Thanks @Jack Harrington, very nicely explained. I have noticed your VS Code auto complete or autofills the code (see between 9 min - 10:30 minutes), what extension or settings is that?
GitHub Copilot.
@@jherr Thanks for tool name. I have signed up with them and now on their waiting list :)
What a great video, instantly subbed! What gives you that great code completion like at 32:16 on the map method?
GitHub copilot
Nice content
Super cool. How did you configure your vscode terminal with suggestions popup?
That's fig. fig.io/
I think I exceeded the limit of comment per video and probably I should watch more advanced content but Jack is just so awesome 😎 I can’t stop… on the line 36 (at 13:09) I don’t understand why you need to mark async (I do it purposefully all the time myself because in TypeScript it will make the compiler know that I am returning a promise but other people will argue that it is useless) because it doesn’t make use of any `await` keyword… also I think that if you don’t use `new Promise` it would make your code more idiomatic of the async await paradigm… 😮😮😮 😅
I am unsure if my comment is clear I tried to make it short 😂 But yea I believe it should have been explained in the context of what you are doing right then… but I might be wrong… I am watching this video just because I love TypeScript and you are an amazing _Tutorialist_ (I think I juste invented a word there)…
Great video, but your monitor/recording scale is too large imo. It would be better to see more than just 10 lines as well as a little bit more of the terminal.
Awesome
I use `import` just like you but it says you shouldn't use `require()`!?!?!?
I couldn't figure it out what's wrong
node: 16
ts: 4.4.2
ts-node: 10.2.1
That's really weird. TypeScript doesn't really like require.
Faced same issue here
Node: 14.17.6
ts: 4.4.2
ts-node: 10.2.1
node-fetch: 3.0.0
I believe there is breaking changes for node-fetch and @type/node-fetch version 3. If you install version 2 as Jack's specific version, the return from await will work and it won't flag as issues in VS Code. I tried to cast the value like `return (await listResp.json()) as PokemonList but it will only suppress the error within VSCode. npx ts-node index.ts will throw error still
@@thru_mi_lens
It worked.
Thank you so much
Hey Jack. Usually we need to call if (!res.ok) in fetch to properly check for an error since it doesn't an exception throw normally like axios does. According to your video here, it looks like node fetch is exhibiting more axios-like error handling behavior. Am I correct in saying node-fetch throws an exception for us, unlike browser fetch?
Yeah, that's true. That 5050 request is generating a 500 and that's being thrown. You should test that out, but yeah, it certainly seems from the behavior like `node-fetch` is doing the throw for us.
Hi Jack , do you have a testing playlist ?
I don't. I probably should develop one.
@@jherr That ll be good!
Question: you defined the state as a pockemon[], but the initial state was an empty [] - how come ts allowed that? an empty [] is obviously not a pockemon[]
An empty array is a valid pokemon[] as long as it's typed that way.
In case of using a promise in place of cash how does it ensure that the data that it returns is not stale? e.g. if the result of fetch has changed would promise get executed once again and return different result? I am just trying to understand how does promise finds out if it is ok to return the previous data or to check if data has changed. Thank you
Fetch has no way of knowing if your data has changed or of making subsequent requests. If the fetch was fulfilled or rejected then that is the value of that particular promise forever. If you are looking for a more complex polling type of interaction you might want to check out react-query.
Hey, thanks for the video ! what is the code hint extension you use ?
Github Copilot
I have a question: for the first page of Next.JS we have a lot of cards and endpoints that should be called. what is the most performant way to do this without making a performance issue? Can you please explain this or make a video for it?
This may sound a little off of the main subject but could you please explain why need to execute res.json() on the data that is returned from fetch? Thank you
Sure. You have the raw response `res` and it has a bunch of metadata (result code, headers, etc.) and it has the payload that you can read using various methods depending on the type of payload you are expecting. But each of those payload accessors is in turn a promise. So what this is doing is returning that promise so that the next `then` will only be fired once all of the JSON is ready. And the value that is sent to `then` will be the decoded JSON object.
@@jherr Understood. thank you
My only one question, how do you find these awesome npm packages?
why do we need to chain then ? Can't we do everything in a single then ?
I'd agree that we could chain the thens in a better way. Then we'd only need one catch at the end :)
Do you do one on ones?
I do not. Sorry.
Which extension are you using for the auto complete?
GitHub Copilot
Why am I NOT seeing my comments? Even though the count increases. I posted a question and sample code to show that Promise as cache not working for external endpoint.
I'm not doing anything on my end to remove comments. I have heard the TH-cam comment system can be flakey. Feel free to join the Discord server and ask your question there. But be. sure to read and follow the posting #rules.
Node Version: 14
Stuck with the error :
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\akashs\Desktop\Personal\UK\HandsOn\APIS\async-with-ts
odejs\index.ts
Can any one help.
Node Version: 16
If i use the updated version of node, then I get the below error:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\akashs\Desktop\Personal\UK\HandsOn\APIS\async-with-ts
odejs\index.ts
Jump onto the Discord server and ask in #typescript. I don't use Windows for development, so I can't answer easily, but there are a lot of folks on there who do and might be able to help.
Can you make MEAN full stack course
I was complaining on a different video the other day because it was not mobile 📱 friendly… I don’t know if something is different with this video but I think it is better for some reasons 😅😅😅 (4:20)
When I try to run the code with "npx ts-node index.ts" I'm getting an error: "Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension." and when I add "type": "module" to my package.json I get another warning: "[ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"
Anyone know how to resolve this?
github copilot feature is amazing.. but having it in such tutorials, is more annoying than helpful to understand the concepts (breaks the flow by auto suggesting next sequence)
for some reason i am getting an error {Uncaught ReferenceError: exports is not defined}
this is happening with axios too, anybody stumble by this ?
Feel free to jump on the Discord server and ask your question there. But be sure to read the #rules before posting.
@@jherr
Thanks for the quick reply
Hey Master how to print a Hardcopy only with Code in a A6 size? I hope someone know this
Theme please sir?
Probably Night Wolf [black] and Operator Mono
Hello, not in the book ? What is the latest version of the book 1.0.5 ?
I'll be doing some new Design Patterns videos in the coming weeks and those will get some new book chapters. I've been pretty busy with a new job and updating the Module Federation book.
Great pause the video moment at 14:15, you should become a teacher!
pro
Best TH-cam channel
Is this going to include error handling patterns for async code?
Yup.
I agree that async awaits are nicer than thens and catches but your reasoning in the video seems odd to me. You are chaining your thens in an unfortunate manner and therefore you would need multiple catches. But if you would chain your thens differently, then you would only need one catch for all of them and the nesting is also less bad. You just have to return the second Promise within your first then etc. This way you end up with all of the nested Promises and thens within the most outer then, thus it is sufficient to use one catch at the end. :)
damn bro ur teatching code in a forest, you just touched grass congrats
Second below
Who can guess this vscode theme 🤔 ?
Love your video but you really gotta work on your cardio.
you are struggling to breath :)
Yeah., that was like the fifth take and I was holding a pretty heavy gimbal and walking at the same time. Hahaha.
Thanks for this, it's very useful!
@Jack Herrington: awesome video... at t:15:55 where you're mentioning Promise's cached value, what happens when theoretically between your first call and the second call, the return value of the fetch at the origin is changed, i.e. if Bulbasrurus is changed to Hectasurus (sorry not a Pokemon guy as you can clearly tell), do we still get the cached value or is there a mechanism to check the diff and invoke a second call to then get the new and updated value?
you'd get the cached value. to get the new value you would need to initiate a new fetch and get a new promise.
@@jherr i see.. thank you. However, how would one go about detecting whether there _HAS_ been a change or not in order to initiate a new promise without having to resort to SWR or alike (assuming I understand their purpose correctly :P)
@@sleepingUgly Nothing is going to auto-detect server changes for you, not SWR or React-Query. There are frameworks that do this, but they are using things like websockets, long-polling or just straight polling to keep the client more or less in sync with the server. More in the case of websockets, progressively less as you move towards polling. AFAIK, the only mechanism that SWR has for this is to enable a polling interval. Which is just a `setInterval` on a `fetch`.
@@jherr Oh i see, wonderful, and thank you so much for the detailed explanations and quality content.
im a noob.. and trying to learn... but this is imposible.... possible
Excellent content, as always.