#usePrefetchQuery + useQuery for Form Validation

5 messages · Page 1 of 1 (latest)

dawn sonnet
#

I have a Form where the user inputs an address.
Once the Address is entered (Street, Postal Code, City) I fire use usePrefetchQuery to check against a backend if the entered data is a know address

When the user submits the form I need to display a option to the user if there where multiple matching locations for the entered data.

How would I do that?

onSubmit: async ({ value }) => {
  // this won't wait for the results…
  const { data } = useQuery({ getValidatedAddresses(value.adress) })
}

The benefits in using usePrefetchQuery would be that the user would not have to wait for the request once the form is submitted as there's more fields (after the address) for them to fill before they hit submit.

tulip kite
#

you can't call hooks in event handlers, so I'm not really sure what you're trying to do ...

dawn sonnet
#

Okay so this is my Form:

<formGroup title="Address">
  <input name="street" onBlur={handleAddressFieldBlur} /> 
  <input name="postalCode" onBlur={handleAddressFieldBlur} /> 
  <input name="city" onBlur={handleAddressFieldBlur} /> 
</formGroup>

<formGroup title="More Stuff">
  <!-- … -->
</formGroup>

<button type="submit">Submit</button>

Once the user filled the address-input-fields I have all the data i need to verify the address.

I have an onBlur event where I make some checks and eventually trigger the prefetchQuery.

Now my validated addresses are cached - that's great! 💪
Even when the user edits the location inputs, they are getting cached again. 💪
Switching the input back to an already cached address? That's covered 💪

Now when the form is submitted I want to know if the entered address is valid - either from the cached data or if the address was changed just before hitting submit - wait for the request to finish first.

#

What I would do without react query would probably be:

onSubmit: async ({value}) => {
  const validatedAddresses = await getValidatedAddresses(value.adress);

// … handle "single", "multiple" or "no" addresses cases
}
tulip kite
#

await queryClient.fetchQuery