In my react app, I have a Chat
page. In this page, I have a query to fetch conversations.
const {
data: conversations,
isLoading: isConversationsLoading,
error: conversationFetchError,
} = useFetchData(["getConversations"], `/conversation/${user._id}`, {
refetchInterval: 1000 * 60 * 5, // refetch sidebar data every 5 minutes so that timestamp updates
});
The implementation of useFetchData
:
const useFetchData = (queryKey, url, options = {}) => {
const { logoutActions } = useAuthContext();
const { isLoading, error, data } = useQuery({
queryKey,
queryFn: () => axiosInstance.get(url),
...options,
});
useEffect(() => {
if (error) {
if (error.response && error.response.status === 401) {
toast.error(error.response.data.message);
logoutActions();
}
}
}, [error, logoutActions]);
return { isLoading, error, data };
};
When I logout, the user
state in AuthContext
is set to null. Thus, my app redirects to the login page. My logout function in Navbar
component:
const mutation = useMutation({
mutationFn: () => {
return axiosInstance.post("/auth/logout", {});
},
onSuccess: (response) => {
toast.success(response.data.message);
logoutActions();
},
onError: (error) => {
toast.error(
error.response ? error.response.data.message : "Something went wrong"
);
},
});
logoutActions()
resides in AuthContext
. The implementation of logoutActions()
:
const logoutActions = () => {
if (socket) {
socket.disconnect();
setSocket(null);
}
setUser(null);
resetConversations();
resetGroups();
queryClient.cancelQueries();
queryClient.removeQueries();
};
When calling queryClient.cancelQueries();
and queryClient.removeQueries();
, it refetchs the getConversations
query that I implemented in the Chat.jsx
. How to stop re-fetching the query since I get an error, because the token has already been invalidated. I just want to remove the query. Actually all the queries of my app. Can anyone help me in this regard? I stuck on this for a couple of days. Thanks in advanced.