stormy-gold

Best way to use Query with search?

Hi there, I'm fairly new here and very new to Tanstack query as well, so there are a lot of things I simply don't know the name of so I figured it was easier to ask than to read the entire documentation in hopes of finding something. I'm making a search component that displays the top 3 returned results. These are currently fetched on every change in the input. And as you might imagine this can lead to a lot of requests. Is there a way to handle this with Tanstack Query or do I have to write the logic for it myself? I thought that's what the abort signal did, but I guess I've just completely misunderstood that, because it didn't abort the fetch when too many consecutive fetches were made. I do know how to write the logic for the wait, but it would be awesome if it just came in the pack you know. Any help is appreciated.

3 Replies

quickest-silver•3y ago

What you'd need to do, is to debounce the search value before making any requests. Debouncing wouldn't be included out-of-the-box for Query, since it would be outside of the scope of the project. I generally use a useDebouncedValue hook, and pass that into Query.

// useDebouncedValue.ts
import React from "react";

export function useDebouncedValue<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
  React.useEffect(() => {
    // Update debounced value after delay
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debouncedValue;
}

// useDebouncedValue.ts
import React from "react";

export function useDebouncedValue<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
  React.useEffect(() => {
    // Update debounced value after delay
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debouncedValue;
}

// SearchPage.tsx
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useDebouncedValue } from '../hooks/#wherever/useDebouncedValue';
import { searchFn } from '../api/#wherever';

export const SearchComponent = () => {
  const [search, setSearch] = useState("");

  const searchDebounced = useDebouncedValue(search, 750); // 750ms delay

  const { data } = useQuery({
    queryKey: ['search', searchDebounced],
    queryFn: searchFn(searchDebounced)
  });

  return (
    <div>
      <div>
      <input type='search' value={search} onChange={(evt) => {
        setSearch(evt.target.value);
       }} />
      </div>
      <div>{JSON.strinigify(data)}</div>
    </div>
  )
}

// SearchPage.tsx
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useDebouncedValue } from '../hooks/#wherever/useDebouncedValue';
import { searchFn } from '../api/#wherever';

export const SearchComponent = () => {
  const [search, setSearch] = useState("");

  const searchDebounced = useDebouncedValue(search, 750); // 750ms delay

  const { data } = useQuery({
    queryKey: ['search', searchDebounced],
    queryFn: searchFn(searchDebounced)
  });

  return (
    <div>
      <div>
      <input type='search' value={search} onChange={(evt) => {
        setSearch(evt.target.value);
       }} />
      </div>
      <div>{JSON.strinigify(data)}</div>
    </div>
  )
}

stormy-goldOP•3y ago

Thanks, I had seen another person do it like this and it was going to be my fall back. But it’s nice to know that it’s not included so I’m not aimlessly looking for something that isn’t there. Another question tho, is it necessary to make a hook for it? Does this need to have state? Can't it just timeout in normal js and return the value afterwards?

passive-yellow•3y ago

You can certainly use the AbortSignal to abort older fetches when new input is added to the key. I would probably still debounce the input, but this has to happen in userland

Gaming

Programming

Best way to use Query with search?

Did you find this page helpful?