How can i use Queries in Formik Form?

[niklasgrewe]

In my Formik Form, i have a Input Field for username. If the user enters anything, a query should be executed automatically, which checks if the username is still free or not. So how can i use the useQuery hook to do that?

at the moment my code looks something like this:

const AsyncInput = () => {
   const [username] = useQuery(
      getUsername, 
      { username: input.value }, 
      { enabled: meta.error === undefined && input.value !== ""})
   return <div></div> // not need to return JSX but otherwise I can not use it as a comp with suspense
}
return (
   <div>
      <input 
         {...input}
         disabled={isSubmitting}
         ref={ref}
         value={input.value}
      />
      <Suspense fallback={CircleLoader}>
         <AsyncInput />
      </Suspense>
   </div>
)   

When i typing something, the query runs and i get a result, but after typing one character the field is no longer in focus so that I have to manually click into the field again after each letter. How can I improve this so that the field does not lose focus? How can I integrate the Suspense Component so that I can display a loader in the field and can I add a delay so that the query runs every 300 ms?

Would be great if I could achieve something like this:

Bildschirmaufnahme.2021-05-23.um.12.40.19.mov

[niklasgrewe]

i found a solution. I am using the invoke function inside my handleAsyncInput function like this:

const handleAsyncInput = useDebouncedCallback(async (value: string) => {
  if (value !== "") {
    setLoading(true)
    try {
      const usernameAvailable = await invoke(getUsername, { username: value })
      if (usernameAvailable) {
        setUsernameAvailable(true)
      } else {
        helper.setError("Username already taken. Please choose another")
      }
    } catch (error) {
      console.log(error)
    }
    setLoading(false)
  }
}, 300)