Debounce Input while performing a query in `urql` GraphQL Client in React.js

Question

I have a double slider like https://zillow.github.io/react-slider with min & max values. It calls a query when one of the sliders changes.

But since the query is huge, it takes a lot of time & I need to find a way to use debounce so that the query doesn't get called every so often.

I did find an excellent solution → https://stackoverflow.com/a/58594348/6141587 using just React.js but not sure how to use it with urql?

Home.tsx

import React from 'react'
import ReactSlider from 'react-slider'
import debounce from 'lodash.debounce'

import { AcquisitionList } from '../components/index'

const Home = () => {
  const [price, setPrice] = React.useState([0, 1000000000])
  const debounceSetPrice = React.useCallback(debounce(setPrice, 2000), [])

  return (
    <div className="h-full p-8 text-white bg-blue-gray-900">
      <div className="flex items-center justify-center">
        <div className="flex flex-col items-center text-white">
          <span className="">Min</span>
          <input
            className="text-lg font-bold text-center min-w-16 rounded-xl bg-gradient-to-b from-indigo-700 bg-blue-gray-900"
            name="minPrice"
            type="text"
            value={price[0]}
            onChange={(e) => {
              const minPrice = e.target.value
              const maxPrice = price[1]
              debounceSetPrice([minPrice, maxPrice])
            }}
          />
        </div>
        <ReactSlider
          step={1}
          min={0}
          max={1000000000}
          className="w-1/2 h-5 pr-2 mx-8 my-4 rounded-md bg-blue-gray-700 cursor-grab"
          thumbClassName="absolute w-8 h-8 cursor-[grab] rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-blue-gray-700 -top-1 bg-gradient-to-b from-indigo-700 bg-blue-gray-900 focus:ring-indigo-500 focus:border-indigo-500"
          ariaLabel={['Min Price', 'Max Price']}
          value={price}
          onChange={(price) => {
            debounceSetPrice(price)
          }}
        />
        <div className="flex flex-col items-center text-white">
          <span className="">Max</span>
          <input
            className="text-lg font-bold text-center min-w-16 rounded-xl bg-gradient-to-b from-indigo-700 bg-blue-gray-900"
            name="maxPrice"
            type="text"
            value={price[1]}
            onChange={(e) => {
              const minPrice = price[0]
              const maxPrice = e.target.value
              debounceSetPrice([minPrice, maxPrice])
            }}
          />
        </div>
      </div>
      <AcquisitionList minPrice={price[0]} maxPrice={price[1]} />
    </div>
  )
}

export default Home

AcquisitionsList.tsx

import React from 'react'
import { useQuery } from 'urql'

import { Card } from '../components/index'

import {
  GET_ALL_ACQUISITIONS,
  GET_ACQUISITIONS_BY_PRICE,
} from '../graphql/index'

export const AcquisitionList = ({ minPrice, maxPrice }) => {
  const [result, reexecuteQuery] = useQuery({
    query: GET_ALL_ACQUISITIONS,
    variables: {
      minPrice,
      maxPrice,
      skip: 10,
      take: 10,
    },
  })

  const { data, fetching, error } = result

  if (fetching) return <p>Loading...</p>
  if (error) return <p>Oh no... {error.message}</p>

  return (
    <div className="flex flex-wrap justify-center mt-10">
      {data.getAllAcquisitions.map((startup, i) => {
        return <Card key={i} startup={startup} index={i} />
      })}
    </div>
  )
}

My current solution delays the slider values to change for 2 seconds which makes sense as I call debounceSetPrice directly. How do I go about solving this?

Answer 1

I found the solution thanks to URQL maintainer Jovi:

const Home = () => {
  const priceRange = [0, 100000000000] // minPrice = 0, maxPrice = 100 billion
  const timeout = React.useRef(null)
  const [acquisitionPriceRange, setAcquisitionPriceRange] = React.useState(
    priceRange
  )
  const [price, setPrice] = React.useState(priceRange)

  React.useEffect(() => {
    timeout.current = setTimeout(() => {
      setAcquisitionPriceRange(price)
      timeout.current = null
    }, 2000)
    return () => {
      if (timeout.current) clearTimeout(timeout.current)
    }
  }, [price])

  return (
    <div className="h-full min-h-screen p-8 text-white bg-blue-gray-900">
      .
            .
            .
      <AcquisitionList
        minPrice={acquisitionPriceRange[0]}
        maxPrice={acquisitionPriceRange[1]}
        undisclosed={enabled}
        sortByPrice={sortByPrice}
        sortByStartupName={sortByStartupName}
      />
    </div>
  )
}

export default Home

I set the value synchronously so the UI doesn't get delayed & queue up a debounce for the state I'm passing down in React.useEffect. I pass the same debounced state down to <AcquisitionList minPrice={acquisitionPriceRange[0]} maxPrice={acquisitionPriceRange[1]} />