重置 react-query useQuery 挂钩以清除呈现页面上的数据答案

【问题标题】：Reset a react-query useQuery hook to clear data on the rendered page重置 react-query useQuery 挂钩以清除呈现页面上的数据
【发布时间】：2021-09-30 02:38:48
【问题描述】：

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

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 中没有任何内容时，要求不显示任何数据，即searchTerm 是一个空字符串。

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

有没有办法重置useQuery 挂钩以将data 作为空数组返回？

【问题讨论】：

如果用户从未输入过搜索词怎么办？它会显示没有结果还是显示所有结果？如果用户已经搜索并且搜索词为空，您是否只显示没有结果？

标签： javascript reactjs typescript react-hooks react-query

【解决方案1】：

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

由于 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 本身启动，具有 react-query 的所有优势，例如用户输入查询后立即进行后台更新，并且在输入更改时它也会重新获取。

由于对空字符串的查询将被禁用，因此后端 api 永远不应该被它击中，因此您的数据将保留undefined，然后您可以将其强制为空数组。

【讨论】：

【解决方案2】：

我要做的是在从 useSearchResults 返回之前修改 useQuery 挂钩中的响应。

function useSearchResults({ query }) {
  return useQuery(["search", { query }], () => {
    if (!query) return [];
    return getSearchResults({ query });
  });
}

注意它没有立即返回getSearchResults？查询函数是执行转换等需要的好地方。

我不完全确定 UX，但听起来您想显示结果，然后根据搜索词过滤结果，然后如果搜索框有一个空字符串，则不显示任何结果？如果你能解决这个问题，我可以修改下面的例子。

这里有一个沙盒来证明这一点：https://codesandbox.io/s/nifty-wilbur-xbcfy

【讨论】：

是的，这就是我要找的！