[Question] Async autocomplete example

[Fronix]

I'm looking to implement SWR in a project but I'm wondering if it would be beneficial to use this for a type of async autocomplete component and if so how would that look, all the current examples are based on that you have static data that you get when rendering but how would it look when you have data you want to load based on what you type like a autocomplete?

[sergiodxa]

You could fetch data based on a dynamic value, check dependant fetching in the README.

If you have a state with your typed value you could:

const [value, setValue] = useState(null) // the null here will prevent SWR to fetch until the user typed something
const { data: results } = useSWR(() => `/api/search?query=${value}`, fetcher)

Now every time the value state change SWR will fetch the /api/search with a new query, if the user delete a character of the value (e.g. from movies to movie) since SWR already fetched that it will show the stale results immediately.

And you could use your results to fill the autocomplete suggestions.

[Fronix]

Interesting!

I tried this just now

  const [value, setValue] = useState<null | string>(null);
  const { data: results } = useSWR(
    () => `/api/search/autocomplete/${entity}/?query=${value}`,
    (url: string) => fetch(url).then(_ => _.json())
  );

Still triggers the fetch when the value is null also the result is sometimes undefined when deleting a character which also is a bit weird? Might be some missing options?

[shuding]

Hi @Fronix !

I've created an example for this use case: https://codesandbox.io/s/swr-playground-3843q

Still triggers the fetch when the value is null

The entire key needs to be null, e.g.:

  useSWR(value ? `/api/search/autocomplete/${entity}/?query=${value}` : null, ...)

the result is sometimes undefined when deleting a character

That's because the key has changed, so the data for that new key will be undefined until we get the data.