Using Tanstack Query with Tanstack DB: Instant update when deleting and adding

I am new to everything here, I need help if this will load fast.

The Problem: When i am using normal API Calls, it takes a while to update the UI of the changes. I’m currently working implementing TanStack DB and Query and have a few questions. I’ve been really interested in their technology and want to understand it more deeply.

Schema model of schedule (I am using Prisma ORM):

    id       String   @id @default(uuid())
    name     String
    date     DateTime
    songs    Songs[]
    songKeys String[]

I have this as my TanstackDB collection:

const schedulesCollection = createCollection(
  queryCollectionOptions({
    queryKey: ["schedulesCollection"],
    queryClient,
    queryFn: async () => await getAllSchedules(),
    getKey:  (item) => item.id,
    onInsert: async ({transaction}) => {
        const { modified } = transaction.mutations[0];
        await createSchedule(modified.date, modified.name)
    },
    onUpdate: async ({transaction}) => {
        const {modified} = transaction.mutations[0];
        await editSchedule(modified.id, {name: modified.name, date: modified.date })
    },
    onDelete: async ({transaction}) => {
        const { original } = transaction.mutations[0];
        await deleteSchedule(original.id)
    }
  }),
);

Prisma mutation on deleting a song inside schedule:

export async function deleteSongFromSchedule(
  scheduleId: string,
  songId: string,
) {
  try {
    const data = await prisma.schedule.update({
      where: { id: scheduleId },
      data: {
        songs: {
          disconnect: { id: songId },
        },
      },
      include: { songs: true },
    });
    return data;
  } catch (error) {
    console.error("Failed to remove song from schedule", error);
    throw error;
  }
}

If I use this in deleting a song from the schedule, will the UI load fast?

assuming I am reading the data from the collection

const deleteSongFromSchedule = useMutation({
  mutationFn: async ({ schedID, songId }) => {
    return await deleteSongFromSchedule(schedID, songId);
  },
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["schedulesCollection"] });
  },
});

I just started doing web dev (next.js, react, typescript, etc..) around 2 months in the time of writing this. I also know that I can use Tanstack DB independently but I cant find a workaround on onUpdate cant have other parameters other than {transaction}. Thank you so much!