Server action not being called

[SrDouglax]

Summary

This has happened before, I gave up trying to solve it, and when I came back it wasn't happening anymore. But now it happened again and I can't solve it. The server action doesn't seem to be called, even with a console log on the client before calling it, it works.

It was working normally, I made a repetition error in rendering and the screen was freezing, when I resolved it it appeared.

Additional information

// Use client
useEffect(() => {
    console.log("entered useEffect"); // OK
    if (!eventRange) return;
    if (isLoading) return;
    setIsLoading(true);

    console.log("will call server action"); // OK
    getCalendarEvents(currentAgenda.id || "", eventRange?.start.toISOString(), eventRange?.end.toISOString())
      ...
  }, [currentAgenda.id, eventRange]);



// Server action
"use server";
...

const calendar = google.calendar("v3");

export type Calendar = calendar_v3.Schema$CalendarListEntry;
export type CalendarInsert = calendar_v3.Params$Resource$Calendars$Insert;
export type CalendarEvent = calendar_v3.Schema$Event;
export type CalendarEventInsert = calendar_v3.Params$Resource$Events$Insert;

/**
 * Helper function to handle common Google API call logic including authentication and error handling.
 * @param userId - The ID of the user.
 * @param operation - The actual Google Calendar API operation to perform.
 * @param errorMessagePrefix - Prefix for error messages logged to console.
 * @returns A promise that resolves to the result of the API operation.
 */
async function executeGoogleApiCall<T>(
  userId: string | undefined,
  operation: (auth: InstanceType<typeof google.auth.OAuth2>, calendarClient: calendar_v3.Calendar) => Promise<T>,
  errorMessagePrefix: string
) {
  ...
}

/**
 * Retrieves events from a specified Google Calendar for a given user.
 * @param calendarId - The ID of the calendar to fetch events from.
 * @param userId - Optional user ID. If not provided, the current user's ID will be used.
 * @param timeMin - Optional ISO string to filter events that start after this time.
 * @param timeMax - Optional ISO string to filter events that end before this time.
 * @returns A promise that resolves to an array of calendar events or undefined.
 * @throws Error if user authentication fails, tokens are invalid, or there's an API error.
 */
export async function getCalendarEvents(calendarId: string, timeMin?: string, timeMax?: string, userId?: string): Promise<CalendarEvent[] | undefined> {
  console.log("called on server action"); // NOT OK
  return executeGoogleApiCall(
    userId,
    async (auth, calendarClient) => {
      console.log("Fetching events from Google Calendar API...", calendarId, userId, timeMin, timeMax);
      const params: any = { auth, calendarId };
      if (timeMin) params.timeMin = timeMin;
      if (timeMax) params.timeMax = timeMax;
      const response = await calendarClient.events.list({ ...params });
      return response.data.items;
    },
    "Erro ao buscar eventos da agenda"
  );
}

Example

No response

[icyJoseph]

Wrap it in a transition:

  startTransition( () => {
    getCalendarEvents(currentAgenda.id || "", eventRange?.start.toISOString(), eventRange?.end.toISOString())
  });

You can import { startTransition } from 'react' or import useTransition hook, to create a transition with isPending:

const [isPending, startTransition] = useTransition();