Nextjs router.push is not trigger useQuery refetch when use suspend ?

[anhdd-kuro]

Using Version
Next js : 12.5.0
@tanstack/react-query: ^4.2.1
react: 18.2.0

My scenario is simple
I update staff info in detail page then invalidate query of list page then router.push to list page

// pages/staff/[id]/edit.tsx
updateStaffMutation.mutate(
    { staff: UpdateStaffSchema().parse(staff) },
    {
        queryClient.invalidateQueries(useGetStaffsByIdsQuery.getKey(id));
        queryClient.invalidateQueries(useGetStaffsQuery.getKey());
        router.push("/staffs");
      },
    },
  );

// pages/staffs
import dynamic from "next/dynamic";
import { Suspense } from "react";

const CStaffsTable = dynamic<CStaffsTableProps>(
  () => import("@/features/staff/list").then((module) => module.CStaffsTable),
  {
    loading: () => <SkeletonTable />,
  },
);
//...
<Suspense>
  <CStaffsTable />
</Suspense>

//CStaffsTable.tsx
const getStaffsQuery = useGetStaffsQuery(variables, {
  staleTime: 30 * 60 * 1000,
});

The problem is the getStaffsQuery is marked as stale but never refetch again even I go to other page and then comeback .
If I unfocus the tab then focus again , it's refetched
I have tried this but it's not working

useGetStaffsQuery(variables, {
  staleTime: 30 * 60 * 1000,
 suspend: true
});

I research and found #2367 and try to set

useGetStaffsQuery(variables, {
  staleTime: 30 * 60 * 1000,
 cacheTime: 1
});

and it's work as expected , but seem like just a workaround because I don't want to set cache time to 1
What am I doing wrong here ? What is the correct way to invalidate query of other pages that using suspend

[anhdd-kuro]

solved By add this setting

refetchType: 'all'