feat(translations): handle internationalized string in GROQ queries

src/app/(main)/[lang]/[slug]/page.tsx

@@ -20,13 +20,13 @@ import { BlogPage, PageBuilder, Post } from "studio/lib/interfaces/pages";
 import { CustomerCasePage } from "studio/lib/interfaces/specialPages";
 import {
   COMPANY_LOCATIONS_QUERY,
-  LEGAL_DOCUMENTS_BY_SLUG_AND_LANG_QUERY,
+  LEGAL_DOCUMENT_BY_SLUG_AND_LANG_QUERY,
 } from "studio/lib/queries/admin";
 import {
   BLOG_PAGE_QUERY,
+  PAGE_BY_SLUG_QUERY,
   POSTS_QUERY,
   SEO_SLUG_QUERY,
-  SLUG_QUERY,
 } from "studio/lib/queries/pages";
 import {
   COMPENSATIONS_PAGE_QUERY,
@@ -67,11 +67,15 @@ async function Page({ params }: Props) {
     initialCustomerCases,
     initialLegalDocument,
   ] = await Promise.all([
-    loadStudioQuery<PageBuilder>(SLUG_QUERY, { slug }, { perspective }),
+    loadStudioQuery<PageBuilder>(
+      PAGE_BY_SLUG_QUERY,
+      { slug, language: lang },
+      { perspective },
+    ),
     loadStudioQuery<BlogPage>(BLOG_PAGE_QUERY, { slug }, { perspective }),
     loadStudioQuery<CompensationsPage>(
       COMPENSATIONS_PAGE_QUERY,
-      { slug },
+      { slug, language: lang },
       { perspective },
     ),
     loadStudioQuery<CompanyLocation[]>(
@@ -85,7 +89,7 @@ async function Page({ params }: Props) {
       { perspective },
     ),
     loadStudioQuery<LegalDocument>(
-      LEGAL_DOCUMENTS_BY_SLUG_AND_LANG_QUERY,
+      LEGAL_DOCUMENT_BY_SLUG_AND_LANG_QUERY,
       { slug, language: lang },
       { perspective },
     ),

src/app/(main)/[lang]/layout.tsx

@@ -42,7 +42,11 @@ export default async function Layout({
     initialLegal,
     initialBrandAssets,
   ] = await Promise.all([
-    loadStudioQuery<Navigation>(NAV_QUERY, {}, { perspective }),
+    loadStudioQuery<Navigation>(
+      NAV_QUERY,
+      { language: params.lang },
+      { perspective },
+    ),
     loadStudioQuery<CompanyInfo>(COMPANY_INFO_QUERY, {}, { perspective }),
     loadStudioQuery<SocialMediaProfiles | null>(
       SOME_PROFILES_QUERY,

src/app/(main)/[lang]/page.tsx

@@ -10,7 +10,7 @@ import { client } from "studio/lib/client";
 import { LinkType } from "studio/lib/interfaces/navigation";
 import { PageBuilder } from "studio/lib/interfaces/pages";
 import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
-import { PAGE_QUERY, SEO_PAGE_QUERY } from "studio/lib/queries/pages";
+import { PAGE_QUERY, PAGE_SEO_QUERY } from "studio/lib/queries/pages";
 import {
   LANDING_PAGE_REF_QUERY,
   LANGUAGES_QUERY,
@@ -21,7 +21,7 @@ export async function generateMetadata(): Promise<Metadata> {
   const { data: landingId } = await loadStudioQuery<string>(
     LANDING_PAGE_REF_QUERY,
   );
-  const seo = await fetchSeoData(SEO_PAGE_QUERY, { id: landingId });
+  const seo = await fetchSeoData(PAGE_SEO_QUERY, { id: landingId });
   return generateMetadataFromSeo(seo);
 }
 
@@ -84,7 +84,7 @@ const Home = async ({ params }: Props) => {
 
   const initialLandingPage = await loadStudioQuery<PageBuilder>(
     PAGE_QUERY,
-    { id: landingId },
+    { id: landingId, language: params.lang },
     { perspective },
   );
 

src/app/(main)/legal/[id]/page.tsx

@@ -2,7 +2,7 @@ import Legal from "src/blog/components/legal/Legal";
 import LegalPreview from "src/blog/components/legal/LegalPreview";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
-import { LEGAL_DOCUMENTS_BY_SLUG_AND_LANG_QUERY } from "studio/lib/queries/admin";
+import { LEGAL_DOCUMENT_BY_SLUG_AND_LANG_QUERY } from "studio/lib/queries/admin";
 import { loadStudioQuery } from "studio/lib/store";
 
 export const dynamic = "force-dynamic";
@@ -20,7 +20,7 @@ async function Page({ params }: Props) {
   const { perspective, isDraftMode } = getDraftModeInfo();
 
   const initialDocument = await loadStudioQuery<LegalDocument>(
-    LEGAL_DOCUMENTS_BY_SLUG_AND_LANG_QUERY,
+    LEGAL_DOCUMENT_BY_SLUG_AND_LANG_QUERY,
     { slug: id, language: "en" }, //TODO: replace this with selected language for the page
     { perspective },
   );

src/blog/components/legal/LegalPreview.tsx

@@ -2,7 +2,7 @@
 import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
-import { NAV_QUERY } from "studio/lib/queries/siteSettings";
+import { LEGAL_DOCUMENT_BY_SLUG_AND_LANG_QUERY } from "studio/lib/queries/admin";
 
 import Legal from "./Legal";
 
@@ -12,8 +12,11 @@ export default function LegalPreview({
   initialDocument: QueryResponseInitial<LegalDocument>;
 }) {
   const { data: newDoc } = useQuery<LegalDocument | null>(
-    NAV_QUERY,
-    {},
+    LEGAL_DOCUMENT_BY_SLUG_AND_LANG_QUERY,
+    {
+      slug: initialDocument.data.slug,
+      language: initialDocument.data.language,
+    },
     { initial: initialDocument },
   );
 

src/compensations/CompensationsPreview.tsx

@@ -21,7 +21,10 @@ const CompensationsPreview = ({
 }: CompensationsPreviewProps) => {
   const { data: compensationsData } = useQuery<CompensationsPage>(
     COMPENSATIONS_PAGE_QUERY,
-    { slug: initialCompensations.data.slug.current },
+    {
+      slug: initialCompensations.data.slug,
+      language: initialCompensations.data.language,
+    },
     { initial: initialCompensations },
   );
 

src/components/link/CustomLink.tsx

@@ -15,10 +15,6 @@ interface ICustomLink {
 }
 
 const CustomLink = ({ type = "link", link, isSelected }: ICustomLink) => {
-  const linkTitle = link.linkTitle;
-  // TODO: pick title based on selected language
-  const linkTitleValue =
-    (typeof linkTitle === "string" ? linkTitle : linkTitle[0].value) ?? "";
   const href = getHref(link);
   const newTab = link.newTab;
   const target = newTab ? "_blank" : undefined;
@@ -28,29 +24,32 @@ const CustomLink = ({ type = "link", link, isSelected }: ICustomLink) => {
       ? `${styles.headerLink} ${isSelected ? styles.selected : ""}`
       : styles.footerLink;
 
-  return type === "link" ? (
-    <div className={styles.wrapper}>
+  return (
+    link.linkTitle &&
+    (type === "link" ? (
+      <div className={styles.wrapper}>
+        <Link
+          className={styles.link}
+          href={href}
+          target={target}
+          rel={rel}
+          aria-label={link.ariaLabel}
+        >
+          <span className={styles.span}>{link.linkTitle}</span>
+        </Link>
+        <div className={styles.underline}></div>
+      </div>
+    ) : (
       <Link
-        className={styles.link}
+        className={className}
         href={href}
         target={target}
         rel={rel}
         aria-label={link.ariaLabel}
       >
-        <span className={styles.span}>{linkTitleValue}</span>
+        {link.linkTitle}
       </Link>
-      <div className={styles.underline}></div>
-    </div>
-  ) : (
-    <Link
-      className={className}
-      href={href}
-      target={target}
-      rel={rel}
-      aria-label={link.ariaLabel}
-    >
-      {linkTitleValue}
-    </Link>
+    ))
   );
 };
 

src/components/linkButton/LinkButton.tsx

@@ -21,10 +21,7 @@ const typeClassMap: { [key in LinkButtonType]: string } = {
 const LinkButton = ({ isSmall, type = "primary", link }: IButton) => {
   const className = `${styles.button} ${isSmall ? styles.small : ""} ${typeClassMap[type]}`;
   const href = getHref(link);
-  const linkTitle = link.linkTitle;
-  // TODO: pick title based on selected language
-  const linkTitleValue =
-    typeof linkTitle === "string" ? linkTitle : linkTitle[0].value;
+  const linkTitleValue = link.linkTitle;
   return (
     href &&
     linkTitleValue && (

src/components/navigation/footer/FooterPreview.tsx

@@ -41,7 +41,11 @@ export default function FooterPreview({
   initialLegal: QueryResponseInitial<LegalDocument[] | null>;
   language: string;
 }) {
-  const newNav = useInitialData(NAV_QUERY, initialNav);
+  const { data: newNav } = useQuery(
+    NAV_QUERY,
+    { language },
+    { initial: initialNav },
+  );
   const newCompanyInfo = useInitialData(COMPANY_INFO_QUERY, initialCompanyInfo);
   const newBrandAssets = useInitialData(BRAND_ASSETS_QUERY, initialBrandAssets);
   const newSoMedata = useInitialData(SOME_PROFILES_QUERY, initialSoMe);

src/components/navigation/header/HeaderPreview.tsx

@@ -16,7 +16,7 @@ export default function HeaderPreview({
 }) {
   const { data: newNav } = useQuery<Navigation | null>(
     NAV_QUERY,
-    {},
+    { language: initialNav.data.language },
     { initial: initialNav },
   );
   const { data: newBrandAssets } = useQuery<BrandAssets | null>(

src/components/navigation/mockData.ts

@@ -12,6 +12,7 @@ import { linkID } from "studio/schemas/objects/link";
 // Mock Navigation Data
 export const mockNavigation: Navigation = {
   _id: "main-navigation",
+  language: "en",
   main: [
     {
       _key: "functionality",
@@ -63,6 +64,7 @@ export const mockNavigation: Navigation = {
       sectionTitle: "Social Media",
       sectionType: SectionType.SocialMedia,
       socialMediaLinks: {
+        _type: "reference",
         _ref: "soMeLinksID",
       },
     },

src/components/sections/article/ArticlePreview.tsx

@@ -15,7 +15,7 @@ export default function ArticlePreview({
 }: PreviewProps) {
   const { data } = useQuery<PageBuilder>(
     PAGE_QUERY,
-    { id: initialData.data._id },
+    { id: initialData.data._id, language: initialData.data.language },
     { initial: initialData },
   );
 

src/components/sections/callToAction/CallToActionPreview.tsx

@@ -15,7 +15,7 @@ export default function CallToActionPreview({
 }: PreviewProps) {
   const { data: newData } = useQuery<PageBuilder | null>(
     PAGE_QUERY,
-    { id: initialData.data._id },
+    { id: initialData.data._id, language: initialData.data.language },
     { initial: initialData },
   );
 

src/components/sections/callout/CalloutPreview.tsx

@@ -15,7 +15,7 @@ export default function CalloutPreview({
 }: PreviewProps) {
   const { data: newData } = useQuery<PageBuilder | null>(
     PAGE_QUERY,
-    { id: initialData.data._id },
+    { id: initialData.data._id, language: initialData.data.language },
     { initial: initialData },
   );
 

src/components/sections/grid/GridPreview.tsx

@@ -15,7 +15,7 @@ export default function GridPreview({
 }: PreviewProps) {
   const { data: newData } = useQuery<PageBuilder | null>(
     PAGE_QUERY,
-    { id: initialData.data._id },
+    { id: initialData.data._id, language: initialData.data.language },
     { initial: initialData },
   );
 

src/components/sections/hero/HeroPreview.tsx

@@ -20,7 +20,7 @@ export default function HeroPreview({
 }: HeroPreviewProps) {
   const { data: newData } = useQuery<PageBuilder | null>(
     PAGE_QUERY,
-    { id: initialData.data._id },
+    { id: initialData.data._id, language: initialData.data.language },
     { initial: initialData },
   );
 

src/components/sections/imageSection/ImageSectionComponentPreview.tsx

@@ -14,7 +14,7 @@ export default function ImageSectionComponentPreview({
 }: PreviewProps) {
   const { data: newData } = useQuery<PageBuilder | null>(
     PAGE_QUERY,
-    { id: initialData.data._id },
+    { id: initialData.data._id, language: initialData.data.language },
     { initial: initialData },
   );
 

src/components/sections/logoSalad/LogoSaladPreview.tsx

@@ -15,7 +15,7 @@ export default function LogoSaladPreview({
 }: PreviewProps) {
   const { data: newData } = useQuery<PageBuilder | null>(
     PAGE_QUERY,
-    { id: initialData.data._id },
+    { id: initialData.data._id, language: initialData.data.language },
     { initial: initialData },
   );
 

src/components/sections/testimonials/TestimonialsPreview.tsx

@@ -15,7 +15,7 @@ export default function TestimonialsPreview({
 }: PreviewProps) {
   const { data: newData } = useQuery<PageBuilder | null>(
     PAGE_QUERY,
-    { id: initialData.data._id },
+    { id: initialData.data._id, language: initialData.data.language },
     { initial: initialData },
   );
 

src/middlewares/languageMiddleware.ts

@@ -10,6 +10,8 @@ import {
   LANGUAGES_QUERY,
 } from "studio/lib/queries/siteSettings";
 import {
+  SLUG_FIELD_TRANSLATIONS_FROM_LANGUAGE_QUERY,
+  SLUG_FIELD_TRANSLATIONS_TO_LANGUAGE_QUERY,
   SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY,
   SLUG_TRANSLATIONS_TO_LANGUAGE_QUERY,
 } from "studio/lib/queries/slugTranslations";
@@ -22,15 +24,26 @@ async function translateSlug(
   if (slug.length === 0) {
     return slug;
   }
-  const slugTranslations = await client.fetch<SlugTranslations | null>(
+  const queryParams = {
+    slug,
+    language: sourceLanguageId ?? targetLanguageId,
+  };
+  // query document-based slug translations
+  let slugTranslations = await client.fetch<SlugTranslations | null>(
     sourceLanguageId !== undefined
       ? SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY
       : SLUG_TRANSLATIONS_TO_LANGUAGE_QUERY,
-    {
-      slug,
-      language: sourceLanguageId ?? targetLanguageId,
-    },
+    queryParams,
   );
+  if (slugTranslations === null) {
+    // try field-based slug translations instead
+    slugTranslations = await client.fetch<SlugTranslations | null>(
+      sourceLanguageId !== undefined
+        ? SLUG_FIELD_TRANSLATIONS_FROM_LANGUAGE_QUERY
+        : SLUG_FIELD_TRANSLATIONS_TO_LANGUAGE_QUERY,
+      queryParams,
+    );
+  }
   return slugTranslations?._translations.find(
     (translation) =>
       translation !== null && translation.language === targetLanguageId,

src/utils/hooks/useLanguage.ts

@@ -5,7 +5,10 @@ import { fetchWithToken } from "studio/lib/fetchWithToken";
 import { SlugTranslations } from "studio/lib/interfaces/slugTranslations";
 import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
 import { LANGUAGES_QUERY } from "studio/lib/queries/siteSettings";
-import { SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY } from "studio/lib/queries/slugTranslations";
+import {
+  SLUG_FIELD_TRANSLATIONS_FROM_LANGUAGE_QUERY,
+  SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY,
+} from "studio/lib/queries/slugTranslations";
 
 /**
  * Client hook providing access to the available Sanity translations for the given slug
@@ -34,7 +37,19 @@ function useSlugTranslations(
         slug,
         language: currentLanguage?.id,
       },
-    ).then(setSlugTranslationsData);
+    ).then(async (translations) => {
+      if (translations !== null) {
+        setSlugTranslationsData(translations);
+      }
+      const fieldTranslations = await fetchWithToken<SlugTranslations | null>(
+        SLUG_FIELD_TRANSLATIONS_FROM_LANGUAGE_QUERY,
+        {
+          slug,
+          language: currentLanguage?.id,
+        },
+      );
+      setSlugTranslationsData(fieldTranslations);
+    });
   }, [currentLanguage, slug]);
 
   const slugTranslations =