-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Question] Async autocomplete example #84
Comments
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 And you could use your |
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? |
Hi @Fronix ! I've created an example for this use case: https://codesandbox.io/s/swr-playground-3843q
The entire useSWR(value ? `/api/search/autocomplete/${entity}/?query=${value}` : null, ...)
That's because the |
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?
The text was updated successfully, but these errors were encountered: