重置 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 時，API 會返回所有結果，我無法更改該行為。

有沒有辦法重置useQuery鈎子以將data作為空數組返回？

Answer 1

我要做的是在從useSearchResults返回之前修改 useQuery 鈎子中的響應。

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

請注意它如何不立即返回getSearchResults ？ 查詢函數是執行轉換的好地方，例如需要時。

我不完全確定 UX，但聽起來您想顯示結果，然后根據搜索詞過濾結果，然后如果搜索框有空字符串，則不顯示結果？ 如果你能解決這個問題，我可以修改下面的例子。

這是一個沙箱來演示這一點： https : //codesandbox.io/s/nifty-wilbur-xbcfy

Answer 2

請讓我指出，禁用查詢並在效果中使用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 ，然后您可以將其強制為空數組。