Open or2e opened 11 months ago
This sounds interesting, I will give this a try!
Oh yes this would be so handy!
@or2e I'm now looking into implementing this. Was there a particular reason you added the cacheKey
as an option instead of using the key
argument provided? Just wondering, maybe I'm not thinking of a use case :smile:
99% of the time they match
Right - so I guess it would be fine to reuse that key and make it required.
For the cacheExpires
and cacheTags
options: I thought about making these methods, that receive the untransformed result. That way cacheability metadata like tags and expires coming from a backend response could be used.
@or2e @Crease29 I've implemented it now and opened a PR, if you like you can take a look and tell me if the implementation makes sense :smile: The docs are here: https://deploy-preview-58--nuxt-multi-cache.netlify.app/composables/useCachedAsyncData
Thank you so much! :)
Regarding the documentation:
In the very first example, I'd actually replace weather
with users
and unify the cache key with the full example.
In the full example I'd personally prefer showing the use with static cache tags, I think that's more common than the response including cache tags.
It seems your implementation uses the regular useAsyncData()
composable in client side. IMHO, it would be nice to also have a kind of memoization with a TTL by using transform()
and getCachedData()
.
That's what I've done in my current project.
Here is the implementation :
Using import.meta.server
, I have even been able to specify different TTLs for server and client (as they have their own bundle) with way shorter TTLs in client.
I didn't found any downside for now.
WDYT ?
@bgondy I actually have been thinking about extending useDataCache
to the client-side as well. And indeed your approach with a maxAge that would also apply to the client side is a nice idea. My main concern is (the classic) question of cache invalidation client side. Obviously a simple browser refresh always "purges" the cache. But imho it would have to work a bit like useAsyncData's clear
and refresh
.
In this case here, however, since the underlying useAsyncData
already does some rudimentary "caching" anyway, we could indeed add client-side caching here. Especially since the name useCachedAsyncData
basically implies that things will be cached. I will give this a try.
Alright, I gave this a shot and added client-side caching. I've used the example from @bgondy as a basis, but changed the behaviour:
nuxtApp.static.data
serverMaxAge
and serverCacheTags
clientMaxAge
value has to be provided in the form of a positive integerI first wanted to have a single maxAge
option for both client and server side. But the problem is that, when a method is provided, it can only receive the full (untransformed) data during SSR. On the client that full untransformed result is obviously not available anymore. The argument would have to be optional, but that's a bit annoying.
Let me know if this makes sense. And a big thanks to all for all the constructive feedback and ideas!
It also stores and gets subsequent client-side handler results in
nuxtApp.static.data
This is so cool !
LGTM
I may be wrong, but most often we have to deal with
asyncData
To avoid routine, I suggest creating a wrap-composableuseCachedAsyncData
Example
``` import type { NuxtApp, AsyncDataOptions } from 'nuxt/app'; import type { KeysOf } from 'nuxt/dist/app/composables/asyncData'; export function useCachedAsyncData< ResT, DataT = ResT, PickKeys extends KeysOf