Conditional trpc hook query

When calling a trpc hook, is there a way to only make it call, if the input is validated client side?
Im using zod on server side. But sometimes it takes some time on client side before the data is valid.

Example:

  const {
    data, isLoading, isError
  } = reactApi.swap.getQuote.useQuery({
    fromToken: debouncedInputToken,
    toToken: debouncedOutputToken,
    amount: parsedInput
  })

  const {
    data, isLoading, isError
  } = reactApi.swap.getQuote.useQuery({
    fromToken: debouncedInputToken,
    toToken: debouncedOutputToken,
    amount: parsedInput
  })

  const {
    data, isLoading, isError
  } = reactApi.swap.getQuote.useQuery({
    fromToken: debouncedInputToken,
    toToken: debouncedOutputToken,
    amount: parsedInput
  })

  const {
    data, isLoading, isError
  } = reactApi.swap.getQuote.useQuery({
    fromToken: debouncedInputToken,
    toToken: debouncedOutputToken,
    amount: parsedInput
  })

In this case im using debounced values.
This results in a bunch of bad type zod errors before the values are correct.

And conditionally rendering hooks gives errors.
So how to only conditionally fetch trpc?

Conditional trpc hook query

Similar Threads

Similar Threads

Similar Threads