[Question] Async autocomplete example about swr HOT 3 CLOSED

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.

from swr.

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.

from swr.

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?

from swr.