leverage remix useRouteLoaderData()

app/routes/_main.news._index/route.tsx

@@ -4,7 +4,7 @@ import {
   type MetaFunction,
   type HeadersFunction,
 } from "@remix-run/node";
-import { Link, useLoaderData } from "@remix-run/react";
+import { Link, useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import { Page } from "~/components/Page";
 import { mergeMeta, pageMeta } from "~/util/pageMeta";
@@ -16,7 +16,7 @@ import { JsonLd } from "cms/structured-data";
 import { postsListSchema } from "cms/structured-data/post";
 import ScreeningsList from "~/components/ScreeningsList";
 import type { loader as rootLoader } from "app/root";
-import type { Blog, Post, Screening, Site } from "payload/generated-types";
+import type { Blog, Post, Screening } from "payload/generated-types";
 import type { PaginatedDocs } from "payload/database";
 import Gutter from "~/components/Gutter";
 
@@ -32,9 +32,6 @@ export const loader = async ({
   today.setHours(0, 0, 0, 0);
 
   const locale = await i18next.getLocale(request);
-  const site = (await payload.findGlobal({
-    slug: "site",
-  })) as unknown as Site;
   const page = (await payload.findGlobal({
     slug: "blog",
     locale,
@@ -83,7 +80,6 @@ export const loader = async ({
   }
 
   return {
-    site,
     page,
     posts,
     screenings,
@@ -101,7 +97,8 @@ export const meta: MetaFunction<
 });
 
 export default function Index() {
-  const { site, page, posts, screenings } = useLoaderData<typeof loader>();
+  const { page, posts, screenings } = useLoaderData<typeof loader>();
+  const { site } = useRouteLoaderData<typeof rootLoader>("root")!;
   const { t } = useTranslation();
 
   return (

app/routes/_main.screening-series.$screeningSeriesSlug/route.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import i18next from "~/i18next.server";
 import Page from "~/components/Page";
 import ScreeningsList from "~/components/ScreeningsList";
@@ -52,14 +52,9 @@ export const loader = async ({
     limit: 20,
   })) as unknown as PaginatedDocs<Screening>;
 
-  const site = await payload.findGlobal({
-    slug: "site",
-  });
-
   return {
     screeningSeries,
     screenings,
-    site,
   };
 };
 
@@ -82,7 +77,8 @@ export const meta: MetaFunction<
 });
 
 export default function Item() {
-  const { screeningSeries, screenings, site } = useLoaderData<typeof loader>();
+  const { screeningSeries, screenings } = useLoaderData<typeof loader>();
+  const { site } = useRouteLoaderData<typeof rootLoader>("root")!;
 
   return (
     <Page layout={screeningSeries.layout}>

app/routes/_main.screenings.$screeningSlug/route.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { Link, useLoaderData } from "@remix-run/react";
+import { Link, useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import type {
   FilmPrint,
   Movie as MovieType,
@@ -40,9 +40,6 @@ export const loader = async ({
       },
     })
   ).docs[0];
-  const site = await payload.findGlobal({
-    slug: "site",
-  });
 
   const data = await payload.find({
     collection: "screenings",
@@ -62,7 +59,6 @@ export const loader = async ({
   return {
     screening: data.docs[0],
     navigation,
-    site,
   };
 };
 
@@ -107,7 +103,8 @@ export const meta: MetaFunction<
 });
 
 export default function Item() {
-  const { screening, navigation, site } = useLoaderData<typeof loader>();
+  const { screening, navigation } = useLoaderData<typeof loader>();
+  const { site } = useRouteLoaderData<typeof rootLoader>("root")!;
   const mainMovie = (screening.films[0].filmprint as FilmPrint)
     .movie as MovieType;
 

app/routes/_main.screenings._index/route.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import { Page } from "~/components/Page";
 import { ScreeningsList } from "~/components/ScreeningsList";
 import i18next from "~/i18next.server";
@@ -49,14 +49,9 @@ export const loader = async ({
     sort: "date",
   });
 
-  const site = await payload.findGlobal({
-    slug: "site",
-  });
-
   return {
     page,
     screenings,
-    site,
   };
 };
 
@@ -71,7 +66,8 @@ export const meta: MetaFunction<
 });
 
 export default function Index() {
-  const { page, screenings, site } = useLoaderData<typeof loader>();
+  const { page, screenings } = useLoaderData<typeof loader>();
+  const { site } = useRouteLoaderData<typeof rootLoader>("root")!;
 
   return (
     <Page layout={page.layout}>

app/routes/_main.seasons.$season/route.tsx

@@ -1,6 +1,6 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import type { Media, Screening } from "payload/generated-types";
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import i18next from "~/i18next.server";
 import { Page } from "~/components/Page";
 import { ScreeningsList } from "~/components/ScreeningsList";
@@ -66,15 +66,10 @@ export const loader = async ({
     })
   ).docs[0];
 
-  const site = await payload.findGlobal({
-    slug: "site",
-  });
-
   return {
     season,
     screenings,
     navigation,
-    site,
   };
 };
 export const meta: MetaFunction<
@@ -97,8 +92,8 @@ export const meta: MetaFunction<
 
 export default function Season() {
   const { t } = useTranslation();
-  const { season, screenings, navigation, site } =
-    useLoaderData<typeof loader>();
+  const { season, screenings, navigation } = useLoaderData<typeof loader>();
+  const { site } = useRouteLoaderData<typeof rootLoader>("root")!;
 
   return (
     <Page layoutType="default">