# Duplicate network requests in Vue

> How to fix duplicate network requests in Vue — with the exact fix and copy-paste code.

_Category: Performance · Detector `duplicate-requests` · Severity: warning_

When several components each fetch the same endpoint, you pay for the same data multiple times — wasted bandwidth, extra server load, slower time-to-content, and the risk that responses arrive out of order and overwrite each other. It is endemic in AI-built frontends because each component is generated in isolation, so each one fetches what it needs independently instead of sharing.

## The fix for Vue

Use `@tanstack/vue-query` for the same key-based dedup, or hoist the fetch into a Pinia store so components read shared state instead of refetching.

```vue
<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'
const { data } = useQuery({ queryKey: ['user', props.id], queryFn: () => fetchUser(props.id) })
</script>
```

[Vue docs](https://tanstack.com/query/latest/docs/framework/vue/overview)

### Steps

1. Adopt a query cache (or a shared in-flight promise map) that dedupes by key
2. Give the same resource the same query key everywhere it’s used
3. Debounce search/autocomplete and cache responses on the server

## How VibeCheck detects it

The `duplicate-requests` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Duplicate GET request`
- **Threshold:** The same method + URL requested 2 or more times within 2 seconds

## FAQ

### Is fetching the same URL twice always a bug?

Not always — polling or intentional revalidation is fine. VibeCheck flags the same method+URL hitting 2+ times within 2 seconds, which almost always means two components fetched independently rather than sharing.

### Does HTTP caching solve this?

`Cache-Control` helps the browser reuse responses, but the requests are still made and can still race. Client-side dedup (a query cache or shared promise) prevents the duplicate calls in the first place.

### Why do my duplicates come in bursts on mount?

Because several components mount together and each kicks off its own fetch. Sharing one query key (or lifting the fetch to a parent/loader) collapses them into a single request.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/duplicate-network-requests.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/duplicate-network-requests. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt