javascript - 如何在 React-query 中使用惰性查询？

Question

我正在为我的 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 钩子(Hook)来处理这个问题，但我想知道 React-query 是否有本地方法来处理这个问题。

Answer 1

Preferably, I would like to call the query in the "handleOnSearchSubmit" function.

这是一种非常必要的思考方式，但 react-query 更具声明性。您没有指定:“当我单击该按钮时，我想获取”，但您只是说:“这些是我需要的输入”并且 react-query 将在这些输入更改时重新获取。
因此，您要做的就是将查询运行所需的内容放入查询键中，以便 react-query

为每个依赖项单独缓存

只要依赖项还没有准备好，你就可以禁用它

const [recipeName, setRecipeName] = React.useState('')
const { isLoading, data } = useQuery(
  ['homePageSearchQuery', recipeName],
  () => searchRecipeByName(recipeName),
  {
    enabled: !!recipeName
  }
])

然后，您只需调用 setRecipeName在 handleOnSearchSubmit ，并且 react-query 将进行查询。
您可能需要考虑的更多事项:

如果您想避免 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，并且我有一个完整的 codesandbox example here .在该示例中，实际的表单状态不受控制，但您也可以使用状态或表单库来实现