从onClick处理程序触发查询刷新(invalide?)

Question

新的反应查询。有一张带手动刷新按钮的漂亮桌子。拥有该表和按钮行的父级拥有该查询；重新加载"；通过道具向下执行功能，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问题，但不确定这是否符合上述情况？

Answer 1

将const queryClient = useQueryClient();置于MyComponent函数下，

并在重载函数内部调用CCD_ 2。

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...>
)
}

Answer 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...>
)