New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refresh()
is not forcing API call and the cached result is returned
#68
Comments
m-anwr
changed the title
Mar 22, 2024
refresh()
is forcing API call and the cached result is returnedrefresh()
is not forcing API call and the cached result is returned
I've also experienced this and have written a workaround. Just pass your AsyncData object to import type { AsyncData } from "#app";
const CACHE_KEY_PREFIX = "$apiParty";
type Keys = MaybeRefOrGetter<string | string[]> | MaybeRefOrGetter<string>[];
/**
* Modifies an `AsyncData` object's `refresh` method so it ignores the cache
* when called.
*
* The `key` parameter must be the same as passed to the `key` option in
* `useApiData()`.
*
* @param keyRef The cache key used in `useApiData()`
* @param data The AsyncData result from `useApiData()`
*
* @example
* ```ts
* const { data, refresh } = useUncachedData(
* "myKey",
* useApiData("some/path", {
* key: "myKey"
* }),
* )
* ```
*/
export function useUncachedData<Data, Error>(keyRef: Keys, data: AsyncData<Data, Error>) {
const keys = computed(() => {
const keys = toValue(keyRef);
if (Array.isArray(keys)) {
return keys.map(useCacheRef);
}
return [useCacheRef(keys)];
});
// make refresh ignore the cache
const { refresh } = data;
const refreshInvalidate: typeof refresh = async (opts) => {
// invalidate the cache
for (const key of keys.value) {
key.value = undefined;
}
return await refresh(opts);
};
data.refresh = refreshInvalidate;
// awaiting gets the original asyncdata object, which is separate from the Promise
data.then((asyncData) => {
asyncData.refresh = refreshInvalidate;
});
return data;
}
export function useCacheRef<T = unknown>(key: MaybeRefOrGetter<string>) {
const nuxt = useNuxtApp();
return computed<T | undefined>({
get: () => nuxt.payload.data[CACHE_KEY_PREFIX + toValue(key)],
set: (value) => {
if (value === undefined) {
delete nuxt.payload.data[CACHE_KEY_PREFIX + toValue(key)];
} else {
nuxt.payload.data[CACHE_KEY_PREFIX + toValue(key)] = value;
}
},
});
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Environment
Reproduction
Describe the bug
When the Refresh button is clicked, the API is not called and the cached result is returned.
Is that the expected behavior? I can't find any reference for that in the docs.
A workaround would be to use a custom cache key and change it if I wanted to refresh the content. otherwise, I have to set the cache to
false
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: