Could somebody please help me out with the following? Have a data set ('legal') in Sanity which contains a document-specific language field ('en'/'nl' etc (string 'language')). This is part of the document-internationalization plug-in and will be applied within NextJS13.
I have made a groq-specific rendering in Sanity selecting the legal documents. The document requiring further filtering to only display those documents that ar applicable to the current language.
groq-query:
export const legalJPSlugsQuery2 = groq`*[_type == "legal" && defined(language) && defined(slug.current)]{
language,
title,
"slug": slug.current,
}`
loader.ts:
export const getLegalsJPWithSlugs = (preview = false) =>
cachedClientFetch(preview)(legalJPSlugsQuery2, COMMON_PARAMS)
layout.tsx:
import {COMMON_PARAMS, getLegalsJPWithSlugs} from '@/sanity/lib/loaders'
import FooterLinks from '@/components/FooterLinks';
export default async function RootLayout(props) {
const queryParams = {...COMMON_PARAMS, language: props.params.language}
const legals = await getLegalsJPWithSlugs(queryParams)
const children = (
<>
{props.children}
<FooterLinks legals={legals} />
</>
)
return (
<html lang={props.params.language}>
<head>
*etc...*
footerlinks.tsx:
'use client'
import Link from 'next/link'
import React from 'react'
import {SanityDocument, Slug} from 'sanity'
import {clean} from './Clean'
import { useParams } from 'next/navigation'
import { getLegalsJPWithSlugs } from '@/sanity/lib/loaders'
type FooterLinksProps = {
// language: string
language: string
legals: any[]
}
export default function FooterLinks(props: FooterLinksProps) {
const {legals = []} = props
const {language} = useParams()
return legals?.length ? (
<footer className="container mx-auto p-4 md:p-8 xl:p-16 flex flex-col md:flex-row md:flex-wrap justify-end gap-4 align-middle">
{legals.map((legal) => //requires additional filtering to only display current language'
legal?.slug? (
<Link
key={legal._id}
href={`/legal/${legal.slug}`}
className="text-cyan-500 hover:text-pink-500 font-medium text-sm"
>
{legal.title}
</Link>
) : (
<span key={legal._id} className="text-gray-500 font-medium text-sm">
{legal.title}
</span>
)
)}
</footer>
) : null
}
I am struggling how to apply such filtering - tried to apply language === [$language] replacing 'defined(language)' in groq but that results in errors whilst '(language == 'en')' runs without any problems) so trust that this is effectuated by the truescript components.
Would be extremely grateful receiving some guidance from any of you coding-heroes.