我试图无效查询每次用户按下按钮“喜欢”刷新所有查询,但迄今为止没有成功,尽管以下文档。
我有一个获取数据的组件:
const {
data: resultsEnCours,
isLoading,
isError,
} = useQueryGetEvents("homeencours", { currentEvents: true });
这是一个自定义钩子,看起来像这样:
const useQueryGetEvents = (nameQuery, params, callback) => {
const [refetch, setRefetch] = React.useState(null);
const refetchData = () => setRefetch(Date.now()); // => manual refresh
const { user } = React.useContext(AuthContext);
const { location } = React.useContext(SearchContext);
const { isLoading, isError, data } = useQuery(
[nameQuery, refetch],
() => getFromApi(user.token, "getEvents", { id_user: user.infoUser.id, ...params }),
// home params => "started", "upcoming", "participants"
{
select: React.useCallback(({ data }) => filterAndSortByResults(data, location, callback), []),
}
);
return { data, isLoading, isError, refetchData };
};
export default useQueryGetEvents;
我还有另一个组件“ButtonLikeEvent”,它允许用户喜欢或不喜欢某个事件:
import { useMutation, useQueryClient } from "react-query";
import { postFromApi } from "../../api/routes";
...other imports
const ButtonLikeEvent = ({ item, color = "#fb3958" }) => {
const queryClient = useQueryClient();
const {
user: {
token,
infoUser: { id },
},
} = React.useContext(AuthContext);
const [isFavorite, setIsFavorite] = React.useState(item.isFavorite);
const likeEventMutation = useMutation((object) => postFromApi(token, "postLikeEvent", object));
const dislikeEventMutation = useMutation((object) =>
postFromApi(token, "postDislikeEvent", object)
);
const callApi = () => {
if (!isFavorite) {
likeEventMutation.mutate(
{ id_events: item.id, id_user: id },
{
onSuccess() {
queryClient.invalidateQueries();
console.log("liked");
},
}
);
} else {
dislikeEventMutation.mutate(
{ id_events: item.id, id_user: id },
{
onSuccess() {
queryClient.invalidateQueries();
console.log("disliked");
},
}
);
}
};
return (
<Ionicons
onPress={() => {
setIsFavorite((prev) => !prev);
callApi();
}}
name={isFavorite ? "heart" : "heart-outline"}
size={30}
color={color} //
/>
);
};
export default ButtonLikeEvent;
每次用户点击那个按钮,我都想让查询无效(因为很多屏幕都显示了喜欢按钮)。
成功时将显示console.log,但查询不会无效。
你知道吗?
谢谢
7条答案
按热度按时间t9aqgxwy1#
另外,还有一个原因之前没有提到:
如果您在
useQuery
中使用了enabled
选项,则invalidateQueries
会忽略此类查询。https://react-query.tanstack.com/guides/disabling-queries
查询将忽略查询客户端invalidateQueries和refetchQueries调用,这些调用通常会导致查询重取。
7y4bm7vi2#
我不小心用了
代替
new QueryClient()
创建一个新的react-query客户端(通常会传递到应用程序 Package 的上下文),此操作应仅执行一次。wheres
useQueryClient
返回对应用周围的react-query客户端上下文提供的值的引用。lrpiutwd3#
查询失效不起作用的两个最常见问题是:
invalidate
按钮,因此您将看到失效本身起作用。queryClient
在重新呈现后不稳定。如果在组件的render方法内调用new QueryClient()
,然后重新呈现,则会发生这种情况。请确保queryClient稳定。hgtggwj04#
Samil和Eliav的想法结合起来对我很有效:
gxwragnw5#
在我的例子中,我所要做的就是等待
invalidateQueries
返回的承诺,然后再导航离开(使用react-router)。wz8daaqr6#
QueryClient应在应用的顶部示例化。(app.js或index.js)
样品
pdkcd3nj7#
在我的例子中,我试图在比
QueryClientProvider
在组件树中的级别更高的组件中使用queryClient
,而在由QueryClientProvider
Package 的组件中必须使用useQueryClient
钩子。