-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
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
useFetch & useAsyncData reactive key #21532
Comments
I'm have the same problem, can't caching result data at pagination const route = useRoute();
const { data: users } = await useAsyncData(
`users_page_${route.query.page}`,
() =>
axios
.get("/api/users", {
params: { page: route.query.page },
})
.then((res) => res.data),
{ watch: () => route.query.page }
); |
#22348 would probably also be solvable by this. |
+1 for this. Ran into an issue with this when using the new Using the |
+1 I have same issue. My SituationI am reactively changing a query: {
searchParam: someReactiveRef,
} The resulting data from What's not workingSince the key is not being updated beyond the first run of Specifically, the key is being derived from page route params and used in the API url query params. Why this mattersLet's say inside a ReproductionHere is a focused reproduction of what my app is doing: https://stackblitz.com/edit/nuxt-starter-buzcel?file=composables%2FuseResource.ts,app.vue,pages%2Fa.vue Notes:
WorkaroundWrapping the const { data: resource } = ref(null);
watchEffect(async () => {
const { data } = useFetch('/api/resource', { key: someRef.value })
resource.value = data.value
}) |
Check this code https://stackblitz.com/edit/nuxt-starter-z3fdxq |
If this is an issue of interest to you, we'd love to hear some more use cases for where the current automatic reactivity in |
On a project with Nuxt 3.11.2. Changing calls from Initial solution ('immediate' to true or false doesn't change the result) // Params not reactive
const { pending, refresh } = await useFetch(`/api/articles`, {
method: 'POST',
body: {
pageNum: pageNum.value, // Remains to 1
limit: 4,
},
onResponse({ response }) {
if (response._data?.data?.length) {
posts.value = [...posts.value, ...response._data.data]
metaFilterCount.value = response._data?.meta?.filter_count
}
},
onResponseError({ response }) {
// Handle the response errors
console.error(response)
},
})
function nextPage() {
pageNum.value++
refresh()
} I tried to replace it with Amar-Gill's workaround but in my case the Replacing // This worked
const { pending, execute } = await useAsyncData('scroller',
() => $fetch('/api/articles, {
method: 'POST',
body: {
pageNum: pageNum.value,
limit: 4,
},
onResponse({ response }) {
if (response._data?.data?.length) {
posts.value = [...posts.value, ...response._data.data]
metaFilterCount.value = response._data?.meta?.filter_count
}
},
onResponseError({ response }) {
// Handle the response errors
console.error(response)
},
}),
{
immediate: false, // Needed this to works when the page is reloaded.
},
)
// Load first articles
execute()
function nextPage() {
pageNum.value++
execute()
} |
@Yves852 I faced similar problems. Maybe I failed to describe the problem properly to the devs in another issue. So, I wrote custom useFetch (named cFetch) and useAsyncData (named cAsyncData) function for my project. https://pastebin.com/X4N2eMNB Hope the devs will fix this problem in the upcoming update. |
@RifatMahmudno-1 I don't know I stayed at the surface to be honnest, exploring what I can do from available tools from Nuxt and finally solved the problem for my case. I'm not brave enough yet to explore how Nuxt or Vuejs works. I also note that they labelled it as "enhancement" therefore not a bug but a expected behavior. Also I participated here because some other folks could lurk and appreciate or not that workaround. |
I would love to use route.fullPath as the key for the useFetch method. It's also kind of strange that watch: [route.fullPath] doesn't work either. You'd say it's a reactive property since it does update in the template. |
hi @pi0, @danielroe
is it possible to pass the "key" on calling refresh/execute or making the key computed in options?
In my case i got a computed header with Authorization and custom key
const headers = computed(() => token.value ? { Authorization:
Bearer ${token.value}} : undefined)
const key = hash([opts.baseURL, request, unref(opts.params || opts.query), unref(headers)])
so the fetchOptions are reactive and are watched by default. If the token changed on client the initialized key isn't changed.
The text was updated successfully, but these errors were encountered: