Invalidate the RTK Query Cache using keepUnusedDataFor
This lesson demonstrates how to use the keepUnusedDataFor of APIs and queries to modify the default timeout of cached items when they're not being used. "Used" here refers to components subscribing to them via query hooks. If you're actively relying on the data on the page you're in, RTK Query won't just go and pull data fresh, but if you move away for long enough and then come back, it will make sure your data is up-to-date.
This is actually a brilliant feature, but the specific number for how long the timeout should be is going to depend on the usage patterns of your users and how frequently the data changes on the server. If your data changes infrequently there may not be any reason to have this enabled at all, you could set it to 3600s (1 hr) for example.
Instructor: [0:01] At its heart, RTK Query is a way to cache network data. By default, if you're not subscribed to a particular piece of data for 60 seconds, the next time you ask for it, RTK Query will go and grab some fresh data from the server.
[0:13] Let me show you how this works. We're going to open our Network tab here. You can see that I'm filtering by Fetch/XHR request to /API. There's none of those on this page, but if I go to My Dogs page, you can see that we make a request of the Dogs API.
[0:26] Likewise, if I go to the Services page, you can see that we make a request there. Now that I've made that request once, I can go back and forth between these and it doesn't make a new request. It continues to use cache data. However, if I go to a page that doesn't rely on Dogs or Services such as the Contact page, it'll wait here for 60 seconds.
[0:47] I go back to those tabs such as the Dogs tab, it will make the request again, and Services and sure, it'll make that request again, but only after waiting that unbearably long 60 seconds.
[1:00] Now, this behavior is completely customizable. Open up your IDE and go to apiSlice.js. At the top level here, let's add a new parameter, keepUnusedDataFor. We're going to set this to five. This value is in seconds.
[1:16] Now, I can go here to my Home page, refresh, go to My Dogs, go over to Contact. Now, I'm going to wait five seconds and back to My Dogs, and sure enough, it loads again.
[1:29] Now, if I stay on Services or My Dogs, it doesn't matter how long I'm here because both of these pages subscribe to Dogs data. The data will never leave the cache, but as soon as I leave those pages, it'll wait five seconds, head back, and makes the request again.
[1:49] Now, keepUnusedData can be used both across your entire API or just for a specific endpoint. We can place it here and get Services and observe the same behavior.
[2:01] I'll refresh to make sure everything's cleared out. I'm going to go to Services that loads both Services and Dogs. Then, I'll go back Home, wait five Seconds.
[2:12] When I click back into Services, Dogs remains in the cache, it didn't call that again, but it did refresh from Services.
[2:20] This time, our feature is cool and it makes a lot of sense when you're frequently changing data from the server that you have no real idea of when to update. As you'll see, there's more than one way to keep your data fresh with RTK query.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!