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

但是，API return 的所有结果都是在未向其传递搜索词时出现的，我无法更改该行为。

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

Answer 1

我要做的是在 return 从 useSearchResults.

中修改 useQuery 挂钩中的响应

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

请注意它不会立即 return getSearchResults？查询函数是执行转换的好地方，例如它们需要。

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

这里有一个沙箱来演示这一点：https://codesandbox.io/s/nifty-wilbur-xbcfy

Answer 2

请允许我指出，禁用查询并在效果中使用 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，然后您可以将其强制转换为空数组。

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

Reset a react-query useQuery hook to clear data on the rendered page

javascript

typescript

reactjs

react-hooks

react-query