usePrefetchQuery + useQuery for Form Validation

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) })
}

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

The benefits in using

usePrefetchQuery

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.

TanStack•2y ago•

5 replies

popular-magenta

usePrefetchQuery + useQuery for Form Validation

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

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

The benefits in using

usePrefetchQuery

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.

usePrefetchQuery + useQuery for Form Validation

Similar Threads

usePrefetchQuery + useQuery for Form Validation

Similar Threads

Similar Threads

Similar Threads