react-google-calendar-api: gapi is not defined

I am using Next.js. I have tried to read an earlier issue, and use the onLoad function, but just calling throws and error. I have and API KEY and an OAUTH Client ID. Help pls 😃

I have this basic code:

"use client";
import ApiCalendar from "react-google-calendar-api";

export default function Home() {
  const clientID = process.env.REACT_APP_CLIENT_ID;
  const apiKey = process.env.REACT_APP_CALENDAR_API_KEY;
  const calendarID = process.env.REACT_APP_CALENDAR_ID;

  const config = {
    clientId: clientID || "",
    apiKey: apiKey || "",
    scope: "https://www.googleapis.com/auth/calendar",
    discoveryDocs: [
      "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
    ],
  };

  const apiCalendar = new ApiCalendar(config);

  apiCalendar.onLoad(() => {
    apiCalendar.handleAuthClick(); // Example on how to trigger auth manually
    apiCalendar
      .listUpcomingEvents(10, calendarID)
      .then((res: { result: { items: any } }) => {
        console.log(res.result.items);
      });
  });

  return apiCalendar
    .listUpcomingEvents(10, calendarID)
    .then((res: { result: { items: any } }) => {
      console.log(res.result.items);
    });
}

and I get the following error:

About this issue

Original URL
State: open
Created 7 months ago
Comments: 16 (9 by maintainers)

Most upvoted comments

Ok I probably have found the issue: To work gapi need to be loaded this is loaded when we create the ApiCalendar

So before using any method of ApiCalendar you need to make sure that this is Loaded. For example using it in the onLoad method or creating a state(apiCalendarReady)

EX:

  const clientID = process.env.REACT_APP_CLIENT_ID;
  const apiKey = process.env.REACT_APP_CALENDAR_API_KEY;
  const calendarID = process.env.REACT_APP_CALENDAR_ID;
  const [apiCalendarReady, setApiCalendarReady] = useState(false)

  const config = {
    clientId: clientID || "",
    apiKey: apiKey || "",
    scope: "https://www.googleapis.com/auth/calendar",
    discoveryDocs: [
      "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
    ],
  };

  const apiCalendar = new ApiCalendar(config);

  apiCalendar.onLoad(() => {
    apiCalendar.handleAuthClick(); // Example on how to trigger auth manually
    apiCalendar
      .listUpcomingEvents(10, calendarID)
      .then((res: { result: { items: any } }) => {
        console.log(res.result.items);
      });
    setApiCalendarReady(true)
  });

  if (apiCalendarReady) {
    return apiCalendar
      .listUpcomingEvents(10, calendarID)
      .then((res: { result: { items: any } }) => {
        console.log(res.result.items);
      });
  }
  return null

Kubessandra on Jan 11, 2024

Same issue on a react project, any updates?

lorenzocovarrubiasjr on Dec 27, 2023