💪 Upcoming events - Improving loading time (#2955)

* 💪 Upcoming events - Improving loading time TODO * Adding ISR logic for events * Adding dependency in the component * removing the comments * Fixing the logic for existing sidebar items * Fixing duplicate issue of events
SSWConsulting · Aug 14, 2024 · a4c4201 · a4c4201
1 parent e28bd24
commit a4c4201
Show file tree

Hide file tree

Showing 3 changed files with 8,001 additions and 10,155 deletions.
diff --git a/components/blocks/upcomingEvents.tsx b/components/blocks/upcomingEvents.tsx
@@ -20,10 +20,12 @@ export const UpcomingEvents = ({ data }) => {
       setLoading(true);
       const today = new Date();
       today.setHours(0, 0, 0, 0);
-      const events = await client.queries.getFutureEventsQuery({
-        fromDate: today.toISOString(),
-        top: data.numberOfEvents,
-      });
+      const events =
+        data.events ||
+        (await client.queries.getFutureEventsQuery({
+          fromDate: today.toISOString(),
+          top: data.numberOfEvents,
+        }));
       setLoading(false);
 
       if (!events.data) return;
@@ -38,7 +40,7 @@ export const UpcomingEvents = ({ data }) => {
     };
 
     fetchEvents();
-  }, [data.numberOfEvents]);
+  }, [data.numberOfEvents, data.events]);
 
   return (
     <div className="prose mt-5 max-w-none sm:my-0">

diff --git a/pages/[...filename].tsx b/pages/[...filename].tsx
@@ -16,6 +16,8 @@ import { Section } from "../components/util/section";
 import { SEO } from "../components/util/seo";
 import { removeExtension } from "../services/client/utils.service";
 
+const ISR_TIME_SECONDS = 60 * 60;
+
 export default function HomePage(
   props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
@@ -129,6 +131,36 @@ export const getStaticProps = async ({ params }) => {
     relativePath: `${relativePath}.mdx`,
   });
 
+  const sideBars = tinaProps.data.page?.sideBar || [];
+
+  const preFetchedUpcomingEvents = await Promise.all(
+    sideBars
+      .filter((sideBar) => sideBar.__typename === "PageSideBarUpcomingEvents")
+      .map(async (sideBar) => {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+
+        const upcomingevents = await client.queries.getFutureEventsQuery({
+          fromDate: today.toISOString(),
+          top: sideBar.numberOfEvents,
+        });
+
+        return {
+          ...sideBar,
+          events: upcomingevents,
+        };
+      })
+  );
+
+  if (sideBars.length > 0 && preFetchedUpcomingEvents.length > 0) {
+    tinaProps.data.page.sideBar = [
+      ...sideBars.filter(
+        ({ __typename }) => __typename !== "PageSideBarUpcomingEvents"
+      ),
+      ...preFetchedUpcomingEvents,
+    ];
+  }
+
   if (tinaProps.data.page.seo && !tinaProps.data.page.seo.canonical) {
     tinaProps.data.page.seo.canonical = `${tinaProps.data.global.header.url}${relativePath}`;
   }
@@ -139,6 +171,7 @@ export const getStaticProps = async ({ params }) => {
       query: tinaProps.query,
       variables: tinaProps.variables,
     },
+    revalidate: ISR_TIME_SECONDS,
   };
 };