Typescript @TANSTACKREACTQUERY中发生Mutations 后的数据刷新问题

我正在使用React开发一个在线store .我有一个功能，在点击一个按钮，产品被添加到Collection 夹.在此操作之后，我想更新配置文件请求(返回用户和Collection 夹).

我的代码:

// useProfile.ts

import UserService from "@/services/user.service";
import { useQuery } from "@tanstack/react-query";
import { useUser } from "./useUser";

export const useProfile = () => {
  const { user } = useUser();

  const { data } = useQuery({
    queryKey: ['profile'],
    queryFn: () => {
      return UserService.getProfile(user?.id || "");
    },
    select: ({ data }) => data
  });

  return {profile: data};
};

// LikeButton.tsx

import { useRef } from 'react';
import classes from './LikeButton.module.scss';
// @ts-ignore
import { ReactComponent as IconHeart } from '@/assets/img/svg/icon-heart.svg';
import { useProfile } from '@/hooks/useProfile';
import UserService from '@/services/user.service';
import { useMutation, useQueryClient } from '@tanstack/react-query';

interface ILikeButtonProps {
  productId: number;
}

function LikeButton({ productId }: ILikeButtonProps) {
  const { profile } = useProfile();
  const { invalidateQueries } = useQueryClient();

  const { mutate } = useMutation({
    mutationKey: ['toggle favourite'],
    mutationFn: () => UserService.toggleFavourite(productId),
    onSuccess: () => {
      console.log('onSuccess');
      invalidateQueries({ queryKey: ['profile'] });
    },
  });

  const btnRef = useRef<HTMLButtonElement>(null);

  const buttonClasses = profile?.favourites.some((fp) => fp.id === productId)
    ? `${classes.btn_like} ${classes['btn_like--active']}`
    : classes.btn_like;

  return (
    <button
      ref={btnRef}
      className={buttonClasses}
      onClick={() => mutate()}
      data-product-id={productId}
    >
      <IconHeart />
    </button>
  );
}

export default LikeButton;

然而，由于某些原因，无效查询似乎不起作用，或者我可能做错了什么……我在网上找不到答案:

我添加了console.log--它工作得很好.但并未触发invaliateQueries.