How do I dedupe across keys?

[MonstraG]

I have something like this:

const [query, setQuery] = useState("");
const { data } = useSWR(`/search?q=${query}` );

And whenever user types in foo, this will make 3 requests, for 3 urls:

/search?q=f
/search?q=fo
/search?q=foo

Obviously user doesn't care about results from f and fo, but requests were made, and backend is now building the results.

dedupingInterval is set to 2000 by default, but that would dedupe requests for the same key.

How do I dedupe requests for any key for this instance of useSWR?

[shuding]

I think you need debounce, not dedupe. You will have to debounce the key updates before giving it to SWR, e.g. using use-debounce:

const [query, setQuery] = useState("")
const [debouncedQuery] = useDebounce(query, 200)
const { data } = useSWR(`/search?q=${debouncedQuery}`)

This isn't something that SWR itself can do here. Because the old request /search?q=f has been sent already, and when it gets updated to /search?q=fo, SWR can only start the new request ASAP. By wrapping it with useDebounce, it will wait for 200ms before returning the new query, to make sure there aren't any new changes.