如何僅當組件在視口中使用 React 和 React Query 查詢數據？

[英]How to query data only when component is in viewport using React and React Query?

我有一個呈現帖子組件列表的 React 頁面，對於每個帖子組件，我正在獲取與該帖子相關的評論並使用 React Query 庫在其中顯示它們。 問題是當用戶加載帖子頁面時，React Query 會一次加載所有帖子的所有評論，這導致我的后端速度變慢 go。 我想實現一種機制，僅當用戶滾動到該特定帖 ...

每當 state 更改時如何使反應查詢無效？

[英]How to invalidate react-query whenever state is changed?

每當某個 state 發生更改時，我都會嘗試使用 react-query 重新獲取我的用戶數據。 但是當然我不能在一個鈎子中使用一個鈎子，所以我不知道如何設置對這個 state 的依賴。 當前獲取用戶的代碼是： 這很好用。 但是只要更改 gobal state 錢包，我就需要使它失效。 我想我可以 ...

暫停反應查詢並重新獲取新數據

[英]Pausing react query and re-fetching new data

我有一個 useQuery，它在 react function 組件中被禁用。 我有另一個使用 mutate 的 useQuery，成功后它調用 refetchMovies()。 這一切似乎都運行良好，但我在 refetchMovies 中看到了舊數據。 有沒有辦法讓 refetchMovies 在 ...

刷新頁面時 Next.JS 未處理的運行時錯誤

[英]Next.JS Unhandled Runtime Error when refresh page

我正在使用動態 ID 實現一個頁面，並使用 Tanstack React-Query 查詢數據，我注意到每次刷新 ID 為 URL 的頁面時，我都會收到以下消息： Unhandled Runtime Error TypeError: Cannot read properties of null (r ...

如何將正確的類型傳遞給反應查詢 useMutation 掛鈎？

[英]How to pass correct types to the react query useMutation hook?

下面是我的代碼： 現在，在 useMutationHook Typescript 內部，我在 appUrlMethod 上抱怨我： 我該如何解決這個 Typescript 錯誤？ 我嘗試過閱讀 reqct-query 文檔，但沒有正確理解如何將正確的類型傳遞給 useMutation 掛鈎。 編輯 ...

發布反應查詢

[英]Post with react-query

我正在學習反應查詢，我正在嘗試用它發布數據。 我可以使用 react-query 獲取數據，但我不能做同樣的發布數據。 我的問題是是否可以使用 react-query 發布數據以及如何做。 謝謝：） ...

在 React 中調用鈎子之前如何確保數據准備就緒

[英]How to make sure data is ready before calling a hook in React

我有一個鈎子調用兩個 React Query 鈎子來獲取數據。 在這些調用之后，我調用另一個鈎子來抓取其他東西。 所以 1 個鈎子相當於 3 個鈎子。 我希望第三個掛鈎調用等待來自先前查詢之一的數據，但到目前為止我沒有成功。 代碼是這樣的：（通用） 因此，我需要data2在將其發送到另一個掛鈎之前准 ...

從反應查詢初始化數據的正確方法

[英]Proper way to initialize data from react-query

編輯：將數據作為參數傳遞給 onSuccess 對我有用 我無法使用來自反應查詢的數據初始化 state。 狀態僅在重新聚焦 window 后才更新。從查詢中獲取數據並將其放入狀態的正確方法是什么？ 我知道我做錯了什么——數據被查詢但是狀態被設置為來自 useState() 的值。 請檢查我的代碼並 ...

在 React-query 中成功運行 mutation 后如何導航到另一個頁面？

[英]How to navigate to another page after running mutation successfully in React-query?

當我在突變后重定向到另一個頁面時，它顯示 memory 泄漏警告。 我嘗試了很多方法，但我還沒有找到任何解決方案。 警告是： ...

如何從 Tanstack React Query useMutation 返回數據？

[英]How to return data from Tanstack React Query useMutation?

我有一個表單，我想通過 REST API 從我通過 Axios 創建的新創建的 object 返回 ID。 我正在使用 useMutation 掛鈎集成 Tanstack Query。 我已經創建了自己的鈎子，因此我可以在整個 React 應用程序中使用突變代碼。 Console.log(dat ...

在 useMutation 鈎子中需要做什么才能使返回的結果具有“symbol.iterator”？

[英]What needs to be done in the useMutation hook in order for the returned result to have 'symbol.iterator'?

我將瀏覽 Tanner在說明 React 查詢功能及其優點時使用的存儲庫。 基本上我是按照他在這個repo中提交的順序一步步做的。 但是，當我到達從使用 useEffect 和常規獲取機制遷移到使用 react-query 的階段時，我遇到了以下錯誤類型“UseMutationResult< ...

使用 Tanstack Query 加載數據前出錯

[英]Error before data is loaded using Tanstack Query

我正在嘗試使用以下方法從我的后端檢索一些數據： 然后我在我的組件中使用data道具，例如： 但是，我的問題是，通過獲取data.val1 ，在初始加載時，沒有任何可用data ，並且出現錯誤。 我知道我可能會使用isLoading道具，並返回一個Is Loading...而不是 div，但我的問題是 ...

如果服務器響應正常但不包含實際數據，是否有反應查詢重新驗證緩存數據的方法？

[英]Is there a way for react-query to revalidate cached data in case server response is OK but does not contain actual data?

我正在探索反應查詢，但找不到一個特定用例的示例。 演示 todo API 服務器為getTodos(ifModifiedSince=1234567)請求返回以下 JSON： 如果待辦事項列表自指定時間以來未修改： {"status":"not_modified"} 否則： {"status":"o ...

如果在反應查詢中 staleTime 大於 cacheTime，會發生什么？

[英]if staleTime is bigger than cacheTime in react query, what happen?

如果 staleTime 比 cacheTime 長，比如 staleTime 是 10 分鍾，cacheTime 是 5 分鍾，會發生什么情況？ 我認為即使 cacheTime 在 6 分鍾后無效，staleTime 仍然有效，因此它不會調用服務器獲取數據。 但是，我發現一篇文章說如果 cach ...

如何從 React Query 自定義掛鈎獲取 isLoading

[英]How to get isLoading from React Query custom hook

我正在嘗試從自定義 React 查詢掛鈎返回 isLoading。 這是我的鈎子： 然后我在這樣的組件中調用鈎子： 然后我希望能夠訪問 isLoading 並相應地更新 UI。 如何從自定義掛鈎中的查詢訪問isLoading並在組件中使用它？ ...

如何使用自定義反應查詢掛鈎將訪問令牌附加到每個查詢

[英]How can I use a custom react-query hook to attach an access token to every query

我一直在努力，今天實際上讓自己難過了 8 個小時。 我認為創建一個 useAuthenticatedQuery 鈎子來簡單地響應 queryFn 中的訪問令牌會非常容易，但是對於 typescript 這完全是一場噩夢。 任何幫助，將不勝感激 const {accessToken} = useAut ...

Typescript useQueries 類型（反應查詢）

[英]Typescript types for useQueries (react query)

我有類似的東西： 現在在我的組件中，我有： 來自 queryFunction 的響應數據將匹配已設置的名為IMyData的類型。 如何正確輸入myData和結果？ myData將是一個反應查詢標准響應數組，每個元素的data字段匹配IMyData 。 ...

反應查詢 infiniteQuery 不獲取下一頁

[英]react query infiniteQuery does not fetch next page

正如標題所解釋的那樣，我似乎無法使用 react-query infiniteQuery 根據請求獲得下一組結果/頁面。 我還從他們的示例代碼中做了點心，但仍然一無所獲。 看起來 pageParam 在調用 fetchNextPage 時永遠不會增加。 我試過版本 3 和版本 4，結果相同。 所以我 ...

搜索頁面使用ReactQuery，需要多次調用

[英]Using ReactQuery for Search page, need to call multiple times

我希望這對於有經驗的 React 查詢用戶來說是一個簡單的方法，但我沒有看到使用 ReactQuery 作為搜索頁面的獲取機制的解決方案，最終用戶在其中更新搜索條件並執行新的搜索。 我看到有一個 useQueries，但它聲明它用於多個並行查詢。 我在找： 加載沒有查詢的頁面（沒有搜索文本） 用戶輸 ...

查詢在反應查詢中未正確失效

[英]Query not invalidated correctly in react-query

我正在使用 React-Query 的useMutation掛鈎進行突變。 在onSuccess回調中，我調用queryClient.invalidateQueries(['key'])使另一個查詢無效。 再次調用另一個查詢，但數據不正確（應該更新）。 我查看了“網絡”選項卡，似乎在第一個查詢成功之 ...