Why doesn't my Chrome extension's Google Calendar API display new events when I refresh after adding new events via gcal?

Question

the problem

I'm trying to include a simple display of upcoming Google Calendar events on my Chrome extension using JavaScript so I've been working with the Google Calendar API. The issue is once I'm signed in, the upcoming events show properly, but if I add events on gcal (not via the chrome extension but on gcal itself) and try to refetch new events, only the old events are shown. Even if I sign out and reauthenticate, the new events never show up.

The odd thing is this only occurs for some of my calendars and one thing I've noticed is that if I create a new calendar altogether, the refresh does work to fetch new events.

what i tried

I'm very new to using the google APIs as a developer so any advice or direction would help!

Basically, I have a function to get the events from gcal after you sign in initially and I thought this would also serve as my refresh button since it should refetch all the data altogether? However, it doesn't work for some of the calendars on my gcal when I test it. I thought this might be something with the cache so I tried removing the cache / including this tag 'Cache-Control': 'no-cache' in my headers for fetching the calendar data but that didn't work either.

code

This is my function for fetching the events right now:

chrome.identity.getAuthToken({interactive: true}, function(token) {
    if (chrome.runtime.lastError) {
      return;
    }
  
    console.log("Authentication successful. Token:", token);
    isSignedIn = true;
    localStorage.setItem('gcal-signed-in',"true");
  
    var init = {
      method: 'GET',
      async: true,
      headers: {
        Authorization: 'Bearer ' + token,
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache'
      },
      'contentType': 'json'
    };

    const now = new Date();
    const isoNow = now.toISOString();
    const maxResults = 4;
  
    // getting all calendars
    fetch(`https://www.googleapis.com/calendar/v3/users/me/calendarList`, init)
    .then(response => response.json())
    .then(calendarListData => {
      calendarIds = calendarListData.items.map(calendar => calendar.id);

      const fetchPromises = [];
      let events = new Map();
      // getting most top recent events of each calendar
      for (const calendarId of calendarIds) {
        const fetchPromise = fetch(`https://www.googleapis.com/calendar/v3/calendars/${calendarId}/events?maxResults=${maxResults}&timeMin=${isoNow}`, init)
        .then((response) => response.json())
        .then((data) => {
          if (data.items) {
            data.items.forEach((event) => {
              const dateTimeParts = event.start.dateTime.split('T');
              const date = dateTimeParts[0];
              const time = dateTimeParts[1].substring(0, 5);
              const location = event.location; 
              console.log(location)
              
              // trim gets rid of leading and trailing white space/commas
              events.set([date, time], [event.summary.trim(),location]);
            });
          } else {
            console.log("No upcoming events found.");
          }
        })
        .catch((error) => {
          console.error("Error fetching events:", error);
        });
        fetchPromises.push(fetchPromise);
      }
// a bit more code after this to display the data using Promise.all(fetchPromises)

Thank you!! Any help is appreciated

Answer 1

Try getting rid of maxResults in the url.