Passing queryParams into sanityStaticProps function in Next.js
6 replies
Last updated: Aug 9, 2021
T
Hey, i run into another problem, how do i pass queryParams into my sanityStaticProps function?
// sanity queryconst aboutMeQuery = groq`*[_type == "about" && __i18n_lang == $currLang]`;
// getStaticProps functionexport const getStaticProps = async (context) => {
const currLang = context.locale;
return {
props: {
// sanity CMS data ...(await sanityStaticProps({ context, query: aboutMeQuery, queryParams: currLang })),
// Translations will be passed to the page component as props ...(await serverSideTranslations(context.locale, ['common'])),
},
};
};
// sanity queryconst aboutMeQuery = groq`*[_type == "about" && __i18n_lang == $currLang]`;
// getStaticProps functionexport const getStaticProps = async (context) => {
const currLang = context.locale;
return {
props: {
// sanity CMS data ...(await sanityStaticProps({ context, query: aboutMeQuery, queryParams: currLang })),
// Translations will be passed to the page component as props ...(await serverSideTranslations(context.locale, ['common'])),
},
};
};
Aug 8, 2021, 6:40 PM
T
I am using next-sanity-extra
Aug 9, 2021, 4:39 PM
R
Got it, that’s using the JS client, so the format will be the same.
Aug 9, 2021, 4:41 PM
T
`const aboutMeQuery = groq`*[_type == "about" && __i18n_lang == $currLang]`;`
// getStaticProps function
export const getStaticProps = async (context) => { const currLang = context.locale;
return { props: { // i am pasing curlang here into query params
...(await sanityStaticProps({ context, query: aboutMeQuery, queryParams: currLang })), // Translations will be passed to the page component as props
...(await serverSideTranslations(context.locale, ['common'])),
},
};
}; (edited)i am getting param $currLang referenced, but not provided error
Aug 9, 2021, 4:41 PM
R
const aboutMeQuery = `*[_type == "about" && __i18n_lang == $currLang]`;
// getStaticProps function
export const getStaticProps = async (context) => {
const currLang = context.locale;
return {
props: {
// i am pasing curlang here into query params
...(await sanityStaticProps({ context, query: aboutMeQuery, queryParams: currLang })),
// Translations will be passed to the page component as props
...(await serverSideTranslations(context.locale, ['common'])),
},
};
};Aug 9, 2021, 4:46 PM
T
Got it working, thank you Racheal for the hint it lead me in the right direction 🙂Working example:
// sanity query`const aboutMeQuery = groq`*[_type == "about" && __i18n_lang == $lang]`;`
// getStaticProps function
export const getStaticProps = async (context) => { // setting empty object for query params
let queryParams = {}; // setting lang key value accordingly
if (context.locale === 'en') { queryParams = { lang: 'en_UK' }; } else if (context.locale === 'pl') { queryParams = { lang: 'pl_PL' }; }
return { props: { // querying sanity data with passed in params
...(await sanityStaticProps({ context, query: aboutMeQuery, params: queryParams })), // Translations will be passed to the page component as props
...(await serverSideTranslations(context.locale, ['common'])),
},
};
};
Aug 9, 2021, 5:12 PM
R
Nice! So happy you got it working!
Aug 9, 2021, 5:16 PM
Sanity– build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.