What happens if key is an empty string when calling useSWR?

[tomsouthall]

If I provide an empty string as the key argument, for example:

const { data } = useSWR('', fetcher)

am I correct in thinking that this essentially does nothing? i.e. the fetcher is not called, nothing is cached, data remains unchanged? Maybe I'm missing something in the docs but I can't find anything that addresses this.

[tomsouthall]

I have figured out a bit of a hacky workaround for this:

const { data } = useSWR(['', 'foo'], fetcher)

The key argument of useSWR can be an array, each item of which is passed to fetcher as an argument. See https://swr.vercel.app/docs/arguments.

The cache key is made up of all the items in the supplied array.

So if you want your empty string to be used as a cache key, simply supply a non-falsy dummy string for all requests as the second array item. Just make sure you use the same string for all requests. It will be passed to fetcher as an additional arg, but you can simply ignore it and now empty strings work as cache keys. Huzzah!

Perhaps there's a better solution than this, but I'll take it for now.

[shuding]

If the key is falsy SWR won’t do anything (it’s treated as “paused”). But I’m curious to know what’s the use case for an empty key — it’s usually the identifier for the resource.

[kronaemmanuel]

One use case I have come across is when we want to get all the resources if the value is empty. For example, I have a search box to filter through some data. If the search box is empty, I want all the data to show. If the search box has a value, I want to pass that value to useSWR.

[tomsouthall]

Ah. Great question. (And here's where you'll likely tell me "you're doing it all wrong").

Use case is a customisable autocomplete dropdown with typeahead. The results displayed are fetched from multiple resources, the number of which can be specified by the parent component. Therefore I have built a fetcher that fires off N parallel API requests and combines the results into a single array with Promise.all. The key is simply the user's entered text.

This works perfectly. Having an empty array cached against an empty string is great as I have useEffect side effects triggered by any change to the result set, including when it empties, for example in response to a user deleting all the text in the input.