query field translations + richtext

[christinaroise]

Updated GROQ queries to take language into account. This way we only fetch the translation for the current language, and web components don't have to handle unpacking internationalized strings. The downside is added complexity in the GROQ queries. This is somewhat alleviated by defining reusable query "fragments".

Examples:

export const TRANSLATED_LINK_FRAGMENT = groq`
    ${LANGUAGE_FIELD_FRAGMENT},
    ${TRANSLATED_LINK_TITLE_FRAGMENT},
    ${TRANSLATED_INTERNAL_LINK_FRAGMENT}
`;

const SECTIONS_FRAGMENT = groq`
  sections[]{
    ...,
    _type == "hero" => {
      ...,
      callToActions[] {
        ...,
        ${TRANSLATED_LINK_FRAGMENT}
      }
    },
    _type == "article" => {
      ...,
      link {
        ...,
        ${TRANSLATED_LINK_FRAGMENT}
      }
    },
    _type == "callout" => {
      ...,
      link {
        ...,
        ${TRANSLATED_LINK_FRAGMENT}
      }
    },
    _type == "ctaSection" => {
      ...,
      callToActions[] {
        ...,
        ${TRANSLATED_LINK_FRAGMENT}
      }
    }
  }
`;

export function translatedFieldFragment(fieldName: string) {
  return groq`${fieldName}[_key == $language][0].value`;
}

// ...

export const COMPENSATIONS_PAGE_QUERY = groq`
  *[_type == "compensations" && ${translatedFieldFragment("slug")} == $slug][0] {
    ...,
    "language": $language,
    "slug": ${translatedFieldFragment("slug")},
    "basicTitle": ${translatedFieldFragment("basicTitle")},
    "benefitsByLocation": benefitsByLocation[] {
      ...,
      "benefits": benefits[] {
        ...,
        "basicTitle": ${translatedFieldFragment("basicTitle")},
        "richText": ${translatedFieldFragment("richText")}
      }
    },
    "seo": ${translatedFieldFragment("seo")}
  }
`;

As an example on how to add translations to richText, this PR adds richtext translations in benefit

Visual Overview (Image/Video)

Translated rich text in benefits:

Checklist

Please ensure that you’ve completed the following checkpoints before submitting your pull request:

• Documentation: Relevant documentation has been added or updated (if applicable).
• Testing: Have you tested your changes thoroughly?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
variant-no	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 10, 2024 7:07am
variant-se-2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 10, 2024 7:07am

[anemne]

You should add to PR description that you have added localized value for title as well.

[mathiazom]

"Hijacked" this PR to also include handling of field translations in GROQ queries.

[christinaroise]

make sure you also update the PR description