Conditionally calling useQuery + dealing with out of order responses

[spidertwin2]

Hello,

I am using location autocomplete from Geocode Earth 🌏 for an input widget.

• How should I keep track of which query was sent first to the Geocode Earth API, and only display results of queries that were sent more recently than the one currently displayed? What is the best way to tackle out of order responses?
• Can I conditionally call useQuery? getLocationGeocode should be fired only if userLocation.length > 0 and only if userLocation value changes.
• I want to limit requests to 5 per second. Should I use refetchInterval, or is there a way to achieve this inside the query resolver?

LocationInput.tsx

const LocationInput = () => {
  const [userLocation, setUserLocation] = useState("")

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()
    setUserLocation(e.target.value)
  }

 const [location] = useQuery(getLocationGeocode, userLocation)
 

  return (
    <Input
      onChange={handleChange}
      value={userLocation}
      name="location"
      placeholder="Your location"
    />
  )
}

getLocationGeocode.ts

export default async function getLocationGeocode(input: string, ctx: Ctx) {
  ctx.session.$authorize()
  
  const https = require("https")
  
  const [location, setLocation] = useState({
    label: "",
    locality: "",
    region: "",
    country: "",
  })

  const query =
    "https://api.geocode.earth/v1/autocomplete?" +
    `api_key=${api_key}&` +
    `text=${input}` +
    "layers=coarse"

  try {
    const req = https
      .get(query, (res: any) => {
        let body = ""

        res.on("data", (data: any) => {
          body += data
        })
        res.on("end", () => {
          const response = JSON.parse(body)

          console.log(response["features"][0]["properties"])

          setLocation({
            ...location,
            label: response["features"][0]["properties"]["label"],
            locality: response["features"][0]["properties"]["locality"],
            region: response["features"][0]["properties"]["region"],
            country: response["features"][0]["properties"]["country"],
          })
        })
      })
      .end()
  } catch (error) {
    console.log(error)
  }

  return location
}

Thank you 🌊

[flybayer]

Good question! Every time the query input changes, the query is immediately fetched. The first thing that comes to mind is that you need to "debounce" the query input argument. Possibly with https://github.com/xnimorz/use-debounce.

Btw, in your query resolver, you will want to return a promise that you manually resolve inside the res.on("end" handler. As is, it may not work as expected. (or use a different fetcher that uses async/await like https://github.com/sindresorhus/got) Also, is that useState in your resolver from react? If so you shouldn't use it here because the query resolver is outside of react.

[spidertwin2]

Thanks Brandon, this was SO helpful! 🐬

Please let me know if I have used debounce and got correctly.

A small bug I am unable to resolve - on each input change, why does the page refresh?

LocationInput.tsx

const LocationInput = () => {
  const [userLocation, setUserLocation] = useState("")

  const [debouncedLocation] = useDebounce(userLocation, 1000)
  const [location] = useQuery(getLocationGeocode, debouncedLocation, {
    refetchOnWindowFocus: false,
    refetchOnMount: false,
  })

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()
    setUserLocation(e.target.value)
  }

  return (
    <Input
      onChange={handleChange}
      value={userLocation}
      name="location"
      placeholder="Your location"
    />
  )
}

getLocationGeocode.ts

export default async function getLocationGeocode(input: string, ctx: Ctx) {
  ctx.session.$authorize()

  let location

  const query =
    "https://api.geocode.earth/v1/autocomplete?" + `api_key=${api_key}&` + `text=${input}`

  try {
    const response = await got(query)
    const parseResponse = JSON.parse(response.body)
    location = {
      label: parseResponse["features"][0]["properties"]["label"],
      locality: parseResponse["features"][0]["properties"]["locality"],
      region: parseResponse["features"][0]["properties"]["region"],
      country: parseResponse["features"][0]["properties"]["country"],
    }
  } catch (error) {
    console.log(error)
  }

  return location
}

[flybayer]

The page refreshes?? Idk that's odd. I don't see anything in your code that would cause that. Any console errors when it happens?

[spidertwin2]

No console errors either. Here is a Sandbox link.

You can get an api key on signing up for a free trial.

[flybayer]

Aha! The page isn't reloading, it's the Suspense boundary in _app which is being invoked. So the solution is to add suspense: false to your query options.

[spidertwin2]

Yes! that was it. Thanks for taking the time to help me with this.
🙏