Is there a way to clear/reset the data to an empty array from a useQuery hook?

[RyanPayso13]

I am writing a search component which uses react query to fetch the data.

export default function useSearchResults({
    query,
}: IUseGetSearchResultsProps): QueryObserverResult<IResponse<ISearchResult>> {
    return useQuery(
        [SEARCH_RESULT_QUERY_KEY, { query }],
        (): Promise<IResponse<ISearchResult>> => getSearchResults({ query }),
        {
            enabled: false,
            keepPreviousData: true,
        }
    );
}

Which I then import in my component, and refetch the data when the user enters a search term:

  const [searchTerm, setSearchTerm] = React.useState<string>("");
  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    e.preventDefault();
    setSearchTerm(e.target.value);
  };

  const { data, refetch } = useSearchResults({ query: searchTerm });

  React.useEffect(() => {
    if (searchTerm.length > 0) {
      refetch();
    }
  }, [searchTerm]);

There is a requirement to not show any data when there is nothing in the searchTerm i.e. searchTerm is an empty string.

However, the API returns all results when a search term is not passed to it and I cannot alter that behaviour.

Is there a way to reset useQuery hook to return data as an empty array?

[vago]

One way is your could move the search term length check into useQuery hook's function. Since all that the function needs to do is return a promise, in case of empty search term it can resolve to Promise with empty array. Then you don't need to use useEffect in your component either. I'd try

1. Have useSearchResults hook enabled
2. The method getSearchResults could return search results or resolve to empty array depending on search term. If you don't have access to this method code, then define a new function, something like

return useQuery(
        [SEARCH_RESULT_QUERY_KEY, { query }],
        (): Promise<IResponse<ISearchResult>> => ({ query }) => {
                if (query.length > 0) {
                     return getSearchResults(query)
                } else {
                     return Promise.resolve([])
                }
        }
    );

3. Remove useEffect, refetch logic in your component. Whenever searchTerm changes in your component, the hook will fire.

[TkDodo]

I answered on stackoverflow: https://stackoverflow.com/questions/68491200/reset-a-react-query-usequery-hook-to-clear-data-on-the-rendered-page/68498963#68498963

[vago]

Didn't think about using enabled in that way. Good learning!