refactor(staging performance): Reduce latency of calls to CMS

ensure we're only fetching prod locale for pages that explicitly do not have a staging counterpart only shallow fetch meta refactor(data fetching): use defaultLocale instead of 'de'
digitalservicebund · Jan 10, 2025 · 3d4c940 · 3d4c940
1 parent 0107594
commit 3d4c940
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 13 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -29,6 +29,7 @@ import {
   fetchErrors,
   fetchTranslations,
 } from "~/services/cms/index.server";
+import { defaultLocale } from "~/services/cms/models/StrapiLocale";
 import { config as configWeb } from "~/services/env/web";
 import { isFeatureFlagEnabled } from "~/services/featureFlags";
 import Breadcrumbs from "./components/Breadcrumbs";
@@ -102,9 +103,9 @@ export const loader = async ({ request, context }: LoaderFunctionArgs) => {
     mainSession,
     showKopfzeile,
   ] = await Promise.all([
-    fetchSingleEntry("page-header"),
-    fetchSingleEntry("footer"),
-    fetchSingleEntry("cookie-banner"),
+    fetchSingleEntry("page-header", defaultLocale),
+    fetchSingleEntry("footer", defaultLocale),
+    fetchSingleEntry("cookie-banner", defaultLocale),
     trackingCookieValue({ request }),
     fetchErrors(),
     fetchMeta({ filterValue: "/" }),

diff --git a/app/services/cms/fetchAllFormFields.ts b/app/services/cms/fetchAllFormFields.ts
@@ -1,7 +1,7 @@
 import merge from "lodash/merge";
 import type { FlowId } from "~/domains/flowIds";
 import { flows } from "~/domains/flows.server";
-import { flowPageApiIdFromFlowType } from "./apiFromFlowType";
+import { flowPageApiIdFromFlowType } from "~/services/cms/apiFromFlowType";
 import { getStrapiEntry } from "./getStrapiEntry";
 import type { StrapiSchemas } from "./schemas";
 import { config } from "../env/env.server";
@@ -15,7 +15,9 @@ export async function fetchAllFormFields(
   const args = {
     apiId: flowPageApiIdFromFlowType(flows[flowId].flowType),
     filters: [{ field: "flow_ids", nestedField: "flowId", value: flowId }],
-    populate: "form",
+    populate: "form.name",
+    fields: "stepId",
+    deep: false,
   };
 
   const formFields = await getStrapiEntry({ ...args, locale: "de" }).then(

diff --git a/app/services/cms/filters.ts b/app/services/cms/filters.ts
@@ -13,4 +13,6 @@ export type GetStrapiEntryOpts = {
   locale?: StrapiLocale;
   populate?: string;
   pageSize?: string;
+  fields?: string;
+  deep?: boolean;
 };
diff --git a/app/services/cms/getStrapiEntryFromApi.ts b/app/services/cms/getStrapiEntryFromApi.ts
@@ -21,13 +21,16 @@ const buildUrl = ({
   pageSize,
   filters,
   locale,
+  fields,
   populate = "*",
+  deep = true,
 }: GetStrapiEntryOpts) =>
   [
     config().STRAPI_API,
     apiId,
     `?populate=${populate}`,
-    `&pLevel`, // https://github.com/NEDDL/strapi-v5-plugin-populate-deep
+    fields ? `&fields=${fields}` : "",
+    deep ? "&pLevel" : "", // https://github.com/NEDDL/strapi-v5-plugin-populate-deep
     `&locale=${locale}`,
     pageSize ? `&pagination[pageSize]=${pageSize}` : "",
     buildFilters(filters),

diff --git a/app/services/cms/index.server.ts b/app/services/cms/index.server.ts
@@ -1,4 +1,8 @@
 import type { FlowId } from "~/domains/flowIds";
+import {
+  defaultLocale,
+  type StrapiLocale,
+} from "~/services/cms/models/StrapiLocale";
 import type { Filter, GetStrapiEntryOpts } from "./filters";
 import { getStrapiEntry } from "./getStrapiEntry";
 import { HasStrapiMetaSchema } from "./models/HasStrapiMeta";
@@ -20,23 +24,31 @@ export async function fetchMeta(
   const populate = "meta";
   const filters = [{ value: opts.filterValue, field: "slug" }];
   const apiId = "pages";
-  const pageEntry = await getStrapiEntry({ ...opts, filters, apiId, populate });
+  const pageEntry = await getStrapiEntry({
+    ...opts,
+    filters,
+    apiId,
+    populate,
+    deep: false,
+  });
   const parsedEntry = HasStrapiMetaSchema.safeParse(pageEntry[0]);
   return parsedEntry.success ? parsedEntry.data.meta : null;
 }
 
 export async function fetchSingleEntry<T extends SingleEntryId>(
   apiId: T,
+  locale?: StrapiLocale,
 ): Promise<StrapiSchemas[T][number]> {
-  const strapiEntry = await getStrapiEntry({ apiId });
+  const strapiEntry = await getStrapiEntry({ apiId, locale });
   return entrySchemas[apiId].parse(strapiEntry)[0];
 }
 
 async function fetchCollectionEntry<T extends CollectionId>(
   apiId: T,
   filters?: Filter[],
+  locale?: StrapiLocale,
 ): Promise<StrapiSchemas[T][number]> {
-  const strapiEntry = await getStrapiEntry({ apiId, filters });
+  const strapiEntry = await getStrapiEntry({ apiId, filters, locale });
   const strapiEntryParsed = collectionSchemas[apiId].safeParse(strapiEntry);
 
   if (!strapiEntryParsed.success || strapiEntryParsed.data.length === 0) {
@@ -54,7 +66,11 @@ export const fetchTranslations = async (
 ): Promise<Translations> => {
   const filters = [{ field: "scope", value: name }];
   try {
-    const entry = await fetchCollectionEntry("translations", filters);
+    const entry = await fetchCollectionEntry(
+      "translations",
+      filters,
+      defaultLocale,
+    );
     if (!entry) return {};
     return Object.fromEntries(
       entry.field.map(({ name, value }) => [name, value]),
@@ -84,9 +100,11 @@ export async function fetchErrors() {
   const cmsErrorSlug = "/error/";
 
   const errorPagePromises = httpErrorCodes.map((errorCode) =>
-    fetchCollectionEntry("pages", [
-      { field: "slug", value: `${cmsErrorSlug}${errorCode}` },
-    ]),
+    fetchCollectionEntry(
+      "pages",
+      [{ field: "slug", value: `${cmsErrorSlug}${errorCode}` }],
+      defaultLocale,
+    ),
   );
 
   const errorPageEntries = (await Promise.allSettled(errorPagePromises))