vue-dedup

Deduplicate concurrent, identical API calls. When two callers request the same endpoint with the same params at the same time, only one network call is made — both callers share the same response.

Install

npm install vue-dedup

Vue plugin

import { createApp } from 'vue';
import { VueDedup, useDedup } from 'vue-dedup';

const app = createApp(App);
app.use(VueDedup); // options: { ttl: <ms to cache resolved responses> }

// inside a component
import { useDedup } from 'vue-dedup';

const dedup = useDedup();

async function fetchUser(id) {
  return dedup.request(['user', id], () => api.get(`/users/${id}`));
}

If two components call fetchUser(1) at the same time, only one HTTP request goes out; both callers await the same result.

Wrapping axios

import axios from 'axios';
import { dedupAxios } from 'vue-dedup';

const api = axios.create({ baseURL: '/api' });
dedupAxios(api);

// concurrent, identical requests (method + url + params + data) now share one call
await Promise.all([api.get('/users', { params: { page: 1 } }), api.get('/users', { params: { page: 1 } })]);

// opt a single request out of deduping
api.get('/users', { params: { page: 1 }, dedup: false });

Wrapping fetch

import { createDedupedFetch } from 'vue-dedup';

const { fetch: dedupedFetch } = createDedupedFetch();

const [a, b] = await Promise.all([dedupedFetch('/api/users'), dedupedFetch('/api/users')]);
// one network request, two independent Response clones

Core API

createDedup(options) is the primitive behind all of the above:

• options.keyFn — custom key function (default: order-independent stable stringify of the key parts)
• options.ttl — milliseconds to keep serving a resolved response after it settles, before allowing a fresh call

import { createDedup } from 'vue-dedup';

const dedup = createDedup();

// key parts identify "the same call" — order of object keys doesn't matter
dedup.request(['/api/users', { page: 1 }], () => fetch('/api/users?page=1'));

// or wrap an existing function
const dedupedFetchUsers = dedup.wrap(fetchUsers, (page) => ['/api/users', page]);

A request key stays "in flight" only until it settles (resolves or rejects) — so a failed call doesn't get stuck deduped forever, and a new call is made the next time one is needed.