从 onClick 处理程序触发查询刷新（无效？）答案

【问题标题】：Trigger a query refresh (invalidate?) from onClick handler从 onClick 处理程序触发查询刷新（无效？）
【发布时间】：2022-01-19 10:33:18
【问题描述】：

反应查询的新手。有一个带有手动刷新按钮的漂亮表格。拥有表格和按钮行的父级拥有查询，我通过道具向下传递“重新加载”函数，onClick（向下几级）执行该函数：

const MyComponent = () => {
   
   var qKey = ['xyz', foo, bar];
   
   const reload = () => {
        useQueryClient().invalidateQueries(qKey)
   }

   const {isLoading, error, data, isFetching} = useQuery(qKey, async () => {
      /* stuff */
      return response.json()
    }, {keepPreviousData: true});

   return (
      <ActionsBar onRefresh={reload} onClear={foo} onSearch={bar}/>
      <Other stuff...>
   )
}

const ActionBar = (props) => {
   const {onRefresh, onClear, onSearch} = props;

   return (
      <Button onClick={ () => onRefresh()}>Refresh</Button>
      /* other stuff */

收到“重新加载”正在调用钩子但不是 React 函数组件或客户 React 钩子函数的错误。

我怀疑这是一个 useEffect 问题，但不确定它如何适应上述场景？

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

把const queryClient = useQueryClient();放在MyComponent函数下，

并在 reload 函数中调用queryClient。

const MyComponent = () => {
   const queryClient = useQueryClient()
   var qKey = ['xyz', foo, bar];
   
   const reload = () => {
        queryClient.invalidateQueries(qKey)
   }

   const {isLoading, error, data, isFetching} = useQuery(qKey, async () => {
      /* stuff */
      return response.json()
    }, {keepPreviousData: true});

   return (
      <ActionsBar onRefresh={reload} onClear={foo} onSearch={bar}/>
      <Other stuff...>
   )
}

【讨论】：

呃。谢谢你。我想盯着这个太久了！把它留在这里，以防其他人有类似的问题。

【解决方案2】：

作为已接受答案的替代方案，您可以传递从 useQuery 返回的 refetch 方法：

   const {isLoading, error, data, isFetching, refetch } = useQuery(qKey, async () => {
      /* stuff */
      return response.json()
    }, {keepPreviousData: true});

   return (
      <ActionsBar onRefresh={refetch} onClear={foo} onSearch={bar}/>
      <Other stuff...>
   )

【讨论】：