feat(nuxt): add dedupe option for data fetching composables

[theguriev]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Added dedupe option to allow deduplicating requests to be used only once at the time. It is super useful in such cases:

<script setup lang="ts">
const { data, pending, error, refresh } = useAsyncData(
  "test",
  () =>
    new Promise((resolve) => {
      console.log("fetching data...");
      setTimeout(() => {
        resolve("Hello World");
      }, 1000);
    }), {
      dedupe: true
    }
);
useAsyncData(
  "test",
  () =>
    new Promise((resolve) => {
      console.log("fetching data...");
      setTimeout(() => {
        resolve("Hello World");
      }, 1000);
    }), {
      dedupe: true
    }
);
useAsyncData(
  "test",
  () =>
    new Promise((resolve) => {
      console.log("fetching data...");
      setTimeout(() => {
        resolve("Hello World");
      }, 1000);
    }), {
      dedupe: true
    }
);
useAsyncData(
  "test",
  () =>
    new Promise((resolve) => {
      console.log("fetching data...");
      setTimeout(() => {
        resolve("Hello World");
      }, 1000);
    }), {
      dedupe: true
    }
);
useAsyncData(
  "test",
  () =>
    new Promise((resolve) => {
      console.log("fetching data...");
      setTimeout(() => {
        resolve("Hello World");
      }, 1000);
    }), {
      dedupe: true
    }
);
useAsyncData(
  "test",
  () =>
    new Promise((resolve) => {
      console.log("fetching data...");
      setTimeout(() => {
        resolve("Hello World");
      }, 1000);
    }), {
      dedupe: true
    }
);
</script>

<template>
  <!-- Edit this file to play around with Nuxt but never commit changes! -->
  <div>Nuxt 3 Playground {{ data }}</div>
</template>

<style scoped></style>

I'm using something similar already in real prod project. But! I had to build another hook on top of that. It looks like this...

/* eslint-disable indent */

import { AsyncDataOptions } from "#app";

import { v1, ExtractFromAPI, PossibleMethods, Parameters as Params, replacePathParameters } from "@netgame/openapi";
import { NitroFetchOptions, NitroFetchRequest } from "nitropack";
import { hash } from "ohash";

import useAsync from "./useAsync";
import type { KeysOf } from "./useAsync";

export const dedupePromises = new Map();

const useAsyncFetch = <
	Path extends keyof v1.paths,
	Method extends keyof v1.paths[Path],
	Response extends ExtractFromAPI<v1.paths, Path, Method>,
	DataE = Error,
	DataT = Response,
	PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
	DefaultT = null
>({
	path,
	method,
	options,
	fetchOptions
}: {
	path: Path;
	method: Method;
	options?: AsyncDataOptions<Response, DataT, PickKeys, DefaultT> & { cached?: true; key?: string };
	fetchOptions?:
		| (NitroFetchOptions<NitroFetchRequest> & Params<v1.paths[Path][Method]>)
		| (() => NitroFetchOptions<NitroFetchRequest> & Params<v1.paths[Path][Method]>);
}) => {
	const { path: parametersPaths } = (fetchOptions || {}) as unknown as { path: Record<string, string> };
	const headers = useRequestHeaders();
	const isQuasarClient = isClient && typeof window.__Q_META__ === "object";
	const baseURL = isQuasarClient ? undefined : "/api";
	const endpoint = replacePathParameters(path, parametersPaths);
	const asyncData = useAsync<Response, DataE, DataT, PickKeys, DefaultT>(
		options?.key || endpoint,
		() => {
			const requestParams = {
				baseURL,
				headers,
				...(typeof fetchOptions === "function" ? fetchOptions() : fetchOptions),
				method: method as PossibleMethods | undefined
			};

			const hashStr = hash({
				endpoint: options?.key || endpoint,
				requestParams
			});

			if (dedupePromises.has(hashStr)) {
				return dedupePromises.get(hashStr);
			}
			const promise = $fetch<Response>(endpoint, requestParams);

			dedupePromises.set(hashStr, promise);

			promise.finally(() => {
				dedupePromises.delete(hashStr);
			});

			return promise;
		},
		options
	);

	return asyncData;
};

export default useAsyncFetch;

So I think it would be cool to have it internally 😇 Let me know please if you see some issues. That's my first PR in Nuxt. 🥇

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Nuxt Docs	Edit on Studio ↗︎	View Live Preview	3de69d8

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (main@4981e32). Click here to learn what that means.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #24564   +/-   ##
=======================================
  Coverage        ?   58.65%           
=======================================
  Files           ?        5           
  Lines           ?      861           
  Branches        ?       46           
=======================================
  Hits            ?      505           
  Misses          ?      356           
  Partials        ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[danielroe]

This is a nice idea.

Note that it introduces a use of dedupe that is the opposite from the current usage (as an option to refresh). refresh({ dedupe: false }) means 'do not cancel existing requests in favour of this new one'.

But this dedupe: true means `do not make any new requests if there is an existing pending request.

I am not in fact sure that my original choice of dedupe as the option for refresh was the most semantically correct but I think the usage should align between option to useAsyncData and the option to refresh().

I would propose making dedupe accept these options:

• 'cancel' (or true) - cancels existing requests when a new one is made <- default option
• 'defer' (or false) - does not make new requests at all if there is a pending request

We would mark true or false types as deprecated and remove at a type level in a future minor.

Suggests welcome from @nuxt/core on naming choices here. 🙏

[theguriev]

This is a nice idea.

Note that it introduces a use of dedupe that is the opposite from the current usage (as an option to refresh). refresh({ dedupe: false }) means 'do not cancel existing requests in favour of this new one'.

But this dedupe: true means `do not make any new requests if there is an existing pending request.

I am not in fact sure that my original choice of dedupe as the option for refresh was the most semantically correct but I think the usage should align between option to useAsyncData and the option to refresh().

I would propose making dedupe accept these options:

• 'cancel' (or true) - cancels existing requests when a new one is made <- default option
• 'defer' (or false) - does not make new requests at all if there is a pending request

We would mark true or false types as deprecated and remove at a type level in a future minor.

Suggests welcome from @nuxt/core on naming choices here. 🙏

Thank you! Yes it allows you to use the fetch anywhere without worrying about it being duplicated. Very useful in large companies when it's hard to keep track.

I updated my PM but not sure I understood you correctly. Please take a look when you get a chance. Thank you so much! ❤️

[danielroe]

Would you add a test in this section (that is, the 'describe' block) of the runtime composables test? 🙏

nuxt/test/nuxt/composables.test.ts

Lines 130 to 147 in 6e44b1b

	describe('useAsyncData', () => {
	it('should work at basic level', async () => {
	const res = useAsyncData(() => Promise.resolve('test'))
	expect(Object.keys(res)).toMatchInlineSnapshot(`
	[
	"data",
	"pending",
	"error",
	"status",
	"execute",
	"refresh",
	]
	`)
	expect(res instanceof Promise).toBeTruthy()
	expect(res.data.value).toBe(null)
	await res
	expect(res.data.value).toBe('test')
	})

[theguriev]

Would you add a test in this section (that is, the 'describe' block) of the runtime composables test? 🙏

nuxt/test/nuxt/composables.test.ts

Lines 130 to 147 in 6e44b1b

	describe('useAsyncData', () => {
	it('should work at basic level', async () => {
	const res = useAsyncData(() => Promise.resolve('test'))
	expect(Object.keys(res)).toMatchInlineSnapshot(`
	[
	"data",
	"pending",
	"error",
	"status",
	"execute",
	"refresh",
	]
	`)
	expect(res instanceof Promise).toBeTruthy()
	expect(res.data.value).toBe(null)
	await res
	expect(res.data.value).toBe('test')
	})

ofc. Here it is 8aa08d4

Let me know please if I can improve it somehow. Thank you! :)

[Jamie4224]

Love this functionality! I implemented this by storing the useFetch in a pinia store, but for bigger projects with a lot of data sources, this is better!