Refetch of all cache keys despite invalidateQueries([key])
Hello,
I am using react-query version 5.55.0
Issue:
Executing my Form and then redirecting via useNavigate from react-router-dom results in a refetch of all defined useFetch hooks in the target destination.
My staleTime and gcTime are defined in the queryClient instance which wrappes my entire Application via the QueryClientProvider.
I am using react-query version 5.55.0
Issue:
Executing my Form and then redirecting via useNavigate from react-router-dom results in a refetch of all defined useFetch hooks in the target destination.
My staleTime and gcTime are defined in the queryClient instance which wrappes my entire Application via the QueryClientProvider.
const useFetch = (key, url) => {
const axiosInstance = useAxios();
return useQuery({
queryKey: [key],
queryFn: async () => {
const response = await axiosInstance.get(url);
return response.data;
},
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
});
};
export const useCreateObject2 = (key, url) => {
const axiosInstance = useAxios();
const queryClient = useQueryClient();
const { toast } = useToast();
return useMutation({
mutationFn: async (data) => {
const response = await axiosInstance.post(url, data, {
headers: { "Content-Type": "multipart/form-data" },
});
return response.data;
},
onMutate: async (data) => {
await queryClient.cancelQueries([key]);
const previousData = queryClient.getQueryData([key]);
queryClient.setQueryData([key], (old) => (old ? [data, ...old] : [data]));
return { previousData };
},
onError: (error, variables, context) => {
if (context?.previousData) {
queryClient.setQueryData([key], context.previousData);
}
toast({ title: "Error", description: "Error creating object.", variant: "destructive" });
},
onSuccess: () => {
console.log("ServerrActions - useCreateObject2 - key", key);
queryClient.invalidateQueries([key], { exact: true }); <------ISSUE HERE
toast({ title: "Create", description: "Object created successfully." });
},
});
};
export const useFetchArtworks = () => useFetch("artworks", ARTWORKS_LIST_CREATE);
export const useFetchStatuses = () => useFetch("statuses", ARTWORK_STATUSES);const useFetch = (key, url) => {
const axiosInstance = useAxios();
return useQuery({
queryKey: [key],
queryFn: async () => {
const response = await axiosInstance.get(url);
return response.data;
},
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
});
};
export const useCreateObject2 = (key, url) => {
const axiosInstance = useAxios();
const queryClient = useQueryClient();
const { toast } = useToast();
return useMutation({
mutationFn: async (data) => {
const response = await axiosInstance.post(url, data, {
headers: { "Content-Type": "multipart/form-data" },
});
return response.data;
},
onMutate: async (data) => {
await queryClient.cancelQueries([key]);
const previousData = queryClient.getQueryData([key]);
queryClient.setQueryData([key], (old) => (old ? [data, ...old] : [data]));
return { previousData };
},
onError: (error, variables, context) => {
if (context?.previousData) {
queryClient.setQueryData([key], context.previousData);
}
toast({ title: "Error", description: "Error creating object.", variant: "destructive" });
},
onSuccess: () => {
console.log("ServerrActions - useCreateObject2 - key", key);
queryClient.invalidateQueries([key], { exact: true }); <------ISSUE HERE
toast({ title: "Create", description: "Object created successfully." });
},
});
};
export const useFetchArtworks = () => useFetch("artworks", ARTWORKS_LIST_CREATE);
export const useFetchStatuses = () => useFetch("statuses", ARTWORK_STATUSES);
