重置react-query useQuery钩子以清除渲染页面上的数据

Question

我正在编写一个搜索组件，它使用反应查询来获取数据。

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,
        }
    );
}

然后我将其导入到我的组件中，并在用户输入搜索词时重新获取数据：

  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]);

searchTerm有一个要求，当ie中没有任何内容searchTerm为空字符串时，不显示任何数据。

但是，当未将搜索词传递给 API 时，API 将返回所有结果，并且我无法更改该行为。

有没有办法重置useQuery钩子以返回data空数组？

Answer 1

请允许我指出，禁用查询并refetch在效果中使用本身并不是惯用的反应查询。

由于只要查询键发生更改，react-query 就会自动重新获取，并且您也已经拥有放入查询键中的本地状态，因此您可以使用enabled该信息驱动标志并消除效果：

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

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

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

查询将启动disabled并enable自行启动，具有所有反应查询的优点，例如用户输入查询后立即进行后台更新，并且当输入更改时它也会重新获取。

由于对于空字符串将禁用查询，因此后端 api 永远不会受到该影响，因此您的数据将保留undefined，然后您可以将其强制为空数组。