Invalidate query does not start a refetch

[JensMou]

I have a problem, where the invalidateQueries does not start a refetch, when there is only one item left.

Consider the code below.
When I add and remove favorites, everything goes as expected, unless it's the last item i remove.
The item is removed from the backend and the onSettled is fired from the remove, but the get favorites hook is not refetched.
I have created a workaround, but I do not find it clean code.

What am I missing here?

const queryKey = "Favorites";

export function useFavorites() {
  const [session] = useSession();

  // Get favorites array
  const { data: favorites, isLoading: favoritesIsLoading } = useQuery<number[], string>(
    [queryKey, session?.user?.name],
    () => getFavorites(session?.user?.name || ""),
    {
      enabled: !!session?.user?.name,
      onError: (err) => {
        error("Could not get favorites, " + err);
      },
    },
  );

  // Get information from array
  const { data: favoritesData, isLoading: favoritesDataIsLoadingData } = useQuery(
    [queryKey, session?.user?.name, favorites],
    () => getFavoritesData(favorites),
    {
      enabled: !!session?.user?.name && !!favorites,
      onError: (err) => {
        error("Could not get favorites data, " + err);
      },
    },
  );

  return {
    favorites: favorites,
    isFetchingFavorites: favoritesIsLoading,
    favoritesData: favoritesData,
    favoritesDataIsLoadingData: favoritesDataIsLoadingData,
  };
}

useFavorites.queryKey = queryKey;

export function useRemoveFavorite() {
  const [session] = useSession();
  const queryClient = useQueryClient();
  const { favorites } = useFavorites();
  return useMutation(
    async (vars) =>
      await deleteFavorite(vars),
    {
      onSettled: () => {
       /* ------------- THIS IS THE THING I DONT WANT ----------------*/
        if (favorites?.length === 1) {
          queryClient.resetQueries([useFavorites.queryKey]);
        }
        queryClient.invalidateQueries([useFavorites.queryKey]);
      },
      onError: (err: string) => {
        error("Could not remove favorite, " + err);
      },
    },
  );
}

export function useAddFavorite() {
  const [session] = useSession();
  const queryClient = useQueryClient();
  return useMutation(
    async (vars) =>
      await postFavorite(vars),
    {
      onSettled: () => {
        queryClient.invalidateQueries([useFavorites.queryKey]);
      },
      onError: (err: string) => {
        error("Could not add favorite, " + err);
      },
    },
  );
}
```

[TkDodo]

invalidateQueries only refetches queries that are actively used. Others are just marked as stale. Hard to say without seeing which component is rendered when, but my guess is that removing the last one unmounts the last observer, thus invalidation doesn't refetch. you can pass filters to invalidateQueries, like refetchType: 'all' to circumvent this, or use refetchQueries instead.

If that is not the issue, please show a minimal, runnable reproduction (codesandbox, stackblitz)

[JensMou]

I am using it like this:
const removeFavorite = useRemoveFavorite();
(...)
removeFavorite.mutate(item)

[D-Thrane]

Using refetchInactive: true, does not fix the issue

[JensMou]

This was a problem in the getFavorites function, which did a fetch and did not return anything if the response code was 204. It was changed to return an empty array and that solved it.