useFetch triggered twice and the first request is being cancelled.
I created a custom useFetch and passed a reactive query, however the request is being called twice.
Here is my current implementation:
const get = (options?: OrderDeliveryOptions<ApiResult<OrderDelivery[]>>) => {
const fields = [
'id',
'branch_id',
'description',
'status',
'order_number',
'total_items',
'total_cost',
'date_created',
];
if (options?.withItems) {
fields.push('order_delivery_items.*');
}
return useApi<ApiResult<OrderDelivery[]>, OrderDelivery[]>('/some-api', {
...options,
showError: showError,
query: {
...options?.query,
fields,
sort: ['-date_created'],
},
transform(data: ApiResult<OrderDelivery[]>) {
return data.data.map((order) => ({
...order,
date_created: new Date(order.date_created!),
}));
},
});
};
2 Replies
Hi @nokzzzzzzz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The issue of useFetch being triggered twice and the first request being cancelled is a known behavior in Nuxt 3 when using reactive queries or parameters. This typically happens because both the key watcher and the params watcher can trigger the fetch in the same flush cycle, leading to overlapping requests. When this occurs, Nuxt cancels the first request in favor of the second, which can be observed as a duplicate call and a cancellation of the initial request.
A recent fix in Nuxt addressed this exact problem: when two useFetch calls generate the same key and are refreshed by reactive data changes, one of them may throw an error or get cancelled. The fix introduces a guard to prevent duplicate execution during key changes, ensuring that only one request is made per change cycle. This change is described as:
- The double request and cancellation is a known issue with reactive queries in useFetch. - It has been fixed in recent Nuxt versions. - Upgrade Nuxt to the latest version to benefit from this fix. - Ensure your query object is not being recreated unnecessarily to avoid triggering extra fetches. For more details, see the official pull request and its description: fix(nuxt): prevent duplicate execution on key change in useAsyncData. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
When two useFetch calls generate the same key and are refreshed by reactive data changes, one of them may throw:fix(nuxt): prevent duplicate execution on key change in useAsyncData If you are experiencing this issue, make sure you are using the latest version of Nuxt 3, as this fix has been merged to address the problem. If you are already on the latest version and still see this behavior, double-check that your query object and any other reactive dependencies are as stable as possible (e.g., avoid passing new object references on each render). Summary:
"Request aborted as another request to the same endpoint was initiated."
... This happens because both the key watcher and the params watcher can trigger execute() in the same flush cycle, leading to overlapping requests.
The fix adds a keyChanging guard to prevent this duplicate execution.
- The double request and cancellation is a known issue with reactive queries in useFetch. - It has been fixed in recent Nuxt versions. - Upgrade Nuxt to the latest version to benefit from this fix. - Ensure your query object is not being recreated unnecessarily to avoid triggering extra fetches. For more details, see the official pull request and its description: fix(nuxt): prevent duplicate execution on key change in useAsyncData. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@804526109940383785> Kapa.ai is still learning and improving, please let me know how I did by reacting below.