trpc useQuery fetch on demand

const [query, setQuery] = useState<string>('')
  const [suggestions, setSuggestions] = useState<Shop[] | null>()

  const { error, data, refetch } = trpc.shops.getByName.useQuery(query)

  useEffect(() => {
    const getData = setTimeout(() => {
      refetch()
      setSuggestions(data)
    }, 500)
    return () => clearTimeout(getData)
  }, [query])

const [query, setQuery] = useState<string>('')
  const [suggestions, setSuggestions] = useState<Shop[] | null>()

  const { error, data, refetch } = trpc.shops.getByName.useQuery(query)

  useEffect(() => {
    const getData = setTimeout(() => {
      refetch()
      setSuggestions(data)
    }, 500)
    return () => clearTimeout(getData)
  }, [query])