T
TanStack•6mo ago
conscious-sapphire

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. 
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);
2 Replies
conscious-sapphire
conscious-sapphireOP•6mo ago
Explicitly using createArtwork = useCreateArtwork(); via export const useCreateArtwork = () => useCreateObject2("artworks", ARTWORKS_LIST_CREATE); onSubmit -> createArtwork.mutate(data) if (redirect) { navigate("/artworks")} arriving at artworks now triggers both fetches again even though the useCreateArtwork is supposed to explicitly only trigger the invalidation for "artworks". And there are no similar keys.
wise-white
wise-white•6mo ago
please post in #react-query-questions

Did you find this page helpful?