invalidateQueries request is triggered and responded with fresh data but cache is old

Question

I use

    "react-query": "3.34.19",

here is example of data structure

{
    "column_id": "10_plus_years",
    "label": "10+ years",
    "goals": [
   
   
        {
            "goal_id": "2c1f9954-4bbb-4702-bd30-430a93633648",
            "name": "ppppp",
            "column_id": "10_plus_years",
            "column_label": "10+ years",
            "deadline": null,
            "dimensions": [
                "impact"
            ],
            "deep_dive": null
        },
        {
            "goal_id": "16674862-1d6b-45d9-ada5-d01725d27a06",
            "name": "aaassdf",
            "column_id": "10_plus_years",
            "column_label": "10+ years",
            "deadline": null,
            "dimensions": [
                "impact"
            ],
            "deep_dive": null
        }
    ]
}

So, I try to make an optimistic update using this function.

 const queryClient = useQueryClient();

  queryClient.cancelQueries(`coach-roadmaps-${userId}`);

  const previousValue = queryClient.getQueryData(`coach-roadmaps-${userId}`);

const editGoal = (updatedGoal: Goal) => {

if (previousValue) {
      queryClient.setQueryData<{ columns: Columns }>(
        `coach-roadmaps-${userId}`,
        (oldVal) => {
          const updatedColumns = oldVal!.columns.map((column) => {
            if (column.columnId === modifiedColumnId) {
              column.goals = column.goals.filter(
                (goal) => goal.goalId !== updatedGoal.goalId
              );
            }

            if (column.columnId === updatedGoal.columnId) {
              column.goals.push(updatedGoal);
            }

            return column;
          });

          return { ...oldVal, columns: updatedColumns };
        }
      );
}

So, I send a similar typo object as the goal object, but with an empty string as the goalId: ''.

**
here is my mutation hook**

export const useAddGoalMutation = () => {
  const { email } = useParams();
  const queryClient = useQueryClient();
  const { request } = useMutationHTTPRequest();
  const { participant } = useParticipantQuery(email);
  const userId = participant.userId;

  const updateRoadmapsQuery = useRoadmapsUpdateQuery({
    userId,
    modifiedColumnId: '',
  });

  return useMutation(
    (goal: Goal) => {
      return request({
        url: '/api/coaching/goals/create',
        body: { ...goal, userId },
      });
    },
    {
      onMutate: (goal: Goal) => {
        const { previousValue } = updateRoadmapsQuery.editGoal(goal);

        return { previousValue };
      },
      onError: (err, _, context) => {
        queryClient.setQueryData(
          `coach-roadmaps-${userId}`,
          context?.previousValue
        );
        logError(err);
      },
      onSettled: () => {
        queryClient.refetchQueries(`coach-roadmaps-${userId}`);
      },
    }
  );
};

here is my useQuery GET function

export const useRoadmapQuery = () => {
  const { email } = useParams();
  const { request } = useQueryHTTPRequest();
  const { participant } = useParticipantQuery(email);

  const userId = participant.userId;
  const { data, isFetching, isLoading } = useQuery(
    `coach-roadmaps-${userId}`,
    () => {
      return request({ url: `/api/coaching/roadmaps/${userId}` });
    },
    {
      select: (data) => data?.columns,
    }
  );

  return { columns: data || [], isFetching, isLoading };
};

Everything works fine, but I decided that in the place where I call useRoadmapQuery, I'm getting data objects without goalId. However, if I look at the network tab, I see that from the backend side, I'm receiving a fresh response with a similar object but with goalId. So, the problem is that my queryCache is not updated with fresh data when the request happens.

help to fix guys <3