From 3d4c940828f7518b9ca0d42f6239315feb0eb007 Mon Sep 17 00:00:00 2001 From: Spencer Peace Date: Fri, 3 Jan 2025 16:27:16 +0100 Subject: [PATCH] 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' --- app/root.tsx | 7 ++--- app/services/cms/fetchAllFormFields.ts | 6 +++-- app/services/cms/filters.ts | 2 ++ app/services/cms/getStrapiEntryFromApi.ts | 5 +++- app/services/cms/index.server.ts | 32 ++++++++++++++++++----- 5 files changed, 39 insertions(+), 13 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index f81619747..c0b25bad2 100644 --- 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 index 3edb87ce2..9e0c8889f 100644 --- 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 index f94d1c89e..8009944e3 100644 --- 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 index cbfb3ec84..d521617fe 100644 --- 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 index d73812e10..02d550a54 100644 --- 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( apiId: T, + locale?: StrapiLocale, ): Promise { - const strapiEntry = await getStrapiEntry({ apiId }); + const strapiEntry = await getStrapiEntry({ apiId, locale }); return entrySchemas[apiId].parse(strapiEntry)[0]; } async function fetchCollectionEntry( apiId: T, filters?: Filter[], + locale?: StrapiLocale, ): Promise { - 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 => { 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))