Comments (8)
v3.2.0
includes functionality to automatically dedupe any requests from the same instance of swr
. If you're interested in the implementation, you can look at PR #35
from stale-while-revalidate-cache.
To support a use case where cache functions with the same key are run in sequence (or just be aware of one another) would require adding much more complexity to the library. Can you provide a good real world example of where this feature would be useful? The example you gave explains the issue but I am struggling to picture where you would want to do that. With this example you can easily in "user land" make the requests in the order you require to ensure the cache is set.
from stale-while-revalidate-cache.
In my sample the load function is called in multiple async requests that are loaded concurrently using promise.all(..)
Based on the key we could check if the there's an active "load" action. If yes, wait until that is finished and continue. the waited request should just return the already cached data
from stale-while-revalidate-cache.
I thought about this request more and it is not something I want to add to the library at this stage. This will add unnecessary complexity to the library as a whole for a very specific use case. It is also fairly simple to handle this logic outside the library.
- You could
await
the first request before making the rest of the requests inside thePromise.all()
:
import { createStaleWhileRevalidateCache } from 'stale-while-revalidate-cache'
const swr = createStaleWhileRevalidateCache({
storage: window.localStorage,
})
const key = "ListId";
const load = async () => {
return (await this.list.select("Id")()).Id;
};
const result1 = await swr(key, load)
const [result2, result3] = await Promise.all(
[swr(key, load), swr(key, load)]
);
- You could add a fairly simple cache wrapper around it:
import { createStaleWhileRevalidateCache } from 'stale-while-revalidate-cache'
const swr = createStaleWhileRevalidateCache({
storage: window.localStorage,
})
const requests = new Map()
async function cache(key, fn) {
if (requests.has(key)) {
// either return `previousRequest` here since it is cached in any case or pass it onto swr if you really want
const previousRequest = await requests.get(key)
return previousRequest
}
const request = swr(key, fn) // not awaiting it here
requests.set(key, request)
const result = await request
requests.delete(key)
return result
}
I haven't tested this, but conceptually it should work.
from stale-while-revalidate-cache.
Thanks for the tips! nr 1 is not an option for me, the cached requests are deeply nested inside the sample load() function.
from stale-while-revalidate-cache.
I see. Hopefully, the second option is something that you can build on.
from stale-while-revalidate-cache.
I too falsely assumed multiple requests with the same key would be deduplicated, took me some time to discover this was not the case. I expected more people would need this feature, TanStack Query for example even lists request deduping in their motivation.
While the second option works perfectly for me, why would adding it into the library add unnecessary complexity? Isn't it just those couple lines you already posted or is there more to it I fail to see?
from stale-while-revalidate-cache.
I will relook at this feature request. I see now that it could be beneficial to have auto-deduplication of function calls.
The code example I gave was very rudimentary and not necessarily production-ready. It lacks error handling and just testing in general.
from stale-while-revalidate-cache.
Related Issues (9)
- 🙏 This package looks awesome! Thanks! HOT 1
- Variable maxTimeToLive HOT 3
- Getting external access to cache status (HIT,Stale, Miss, Dynamic) as well as the Save method. HOT 5
- Can this be used in a distributed environment e.g. Kubernetes? HOT 1
- Invalidating a specific cache key? HOT 5
- Incorrect type when using async/await HOT 3
- v3.1.1 version is raising Module parse failed: Unexpected token in index.mjs HOT 5
- Emitter events constants export HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stale-while-revalidate-cache.