我正在為我的 API 呼叫使用 React-query。我想知道是否有辦法以懶惰的方式呼叫查詢。
意味著僅在查詢引數更改時呼叫查詢。
這就是我目前擁有的；我正在使用帶有“useEffect”的 hack，如果 recipeName 更改，則運行 refetch 函式。
export const searchRecipeByName = async (recipeName: string) => {
return await api.get(
`/recipes/complexSearch?apiKey=${process.env.NEXT_PUBLIC_SPOONACULAR_API_KEY}&query=${recipeName}&addRecipeInformation=true&fillIngredients=true`
);
};
const [recipeName, setRecipeName] = useState("");
const { data, refetch } = useQuery(
"homePageSearchQuery",
() => searchRecipeByName(recipeName),
{ enabled: false }
);
// HACK
useEffect(() => {
if (!!recipeName) {
refetch();
}
}, [recipeName]);
const handleOnSearchSubmit = async (recipeSearch: RecipeSearch) => {
setRecipeName(recipeSearch.search);
};
最好，我想在“handleOnSearchSubmit”函式中呼叫查詢。
我可以創建一個自定義的 useLazyQuery 鉤子來處理這個問題，但我想知道 React-query 是否有一種本地方式來處理這個問題。
uj5u.com熱心網友回復：
最好，我想在“handleOnSearchSubmit”函式中呼叫查詢。
這是一種非常必要的思考方式，但 react-query 更具宣告性。你沒有指定：“當我點擊那個按鈕時，我想獲取”，但你只是說：“這些是我需要的輸入”，只要這些輸入發生變化，react-query 就會重新獲取。
所以你要做的就是把查詢運行所需的東西放到查詢鍵中，這樣react-query
- 為每個依賴項單獨快取它
- 只要依賴項尚未準備好，您就可以禁用它
const [recipeName, setRecipeName] = React.useState('')
const { isLoading, data } = useQuery(
['homePageSearchQuery', recipeName],
() => searchRecipeByName(recipeName),
{
enabled: !!recipeName
}
])
然后，所有你需要做的是電話setRecipeName中handleOnSearchSubmit和反應，查詢會做的查詢。
您可能還需要考慮的一些其他事項：
- 如果要避免
recipeName更改之間的硬加載狀態，請設定keepPreviousData: true - 每次
recipeName更改時，上面的代碼都會運行查詢。如果單擊按鈕時沒有發生這種情況，但是說每當用戶在輸入欄位中鍵入內容時，您都希望對其進行去抖動。對于這些情況，請考慮類似useDebounce 的內容：
const [recipeName, setRecipeName] = React.useState('')
const debouncedRecipeName = useDebounce(recipeName, 1000)
const { isLoading, data } = useQuery(
['homePageSearchQuery', debouncedRecipeName],
() => searchRecipeByName(debouncedRecipeName),
{
enabled: !!debouncedRecipeName
}
])
這將允許您輸入資料并將其顯示在文本欄位中，但僅在 1 秒不活動后創建新快取條目/觸發新請求。
- 如果你想要一個提交表單的按鈕，最好“提升狀態”：有一個查詢所依賴的全域狀態，以及表單的一些本地狀態。一旦用戶點擊“提交”，您將用戶選擇保存在更高的狀態中，這將觸發查詢。我喜歡為此使用 url，我在這里有一個完整的代碼和框示例。在該示例中，實際表單狀態不受控制，但您也可以為此使用狀態或表單庫
uj5u.com熱心網友回復：
像這樣做
const { isLoading, data } = useQuery([
'homePageSearchQuery',
{recipeName}],
() => searchRecipeByName(recipeName), {}
);
只要 recipeName 的值發生變化，它就會運行查詢。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/398809.html
標籤：javascript 反应 接口 反应查询
上一篇：播放YouTube視頻直到完成
下一篇：如何通過API實時更新加密價格