Querying modules and heros

When querying modules, we need two things for the information to arrive to our pages.

Module queries

First, we have a barrel file where we import our module queries, which look something like this:

import { asset, spacing } from "@utilities/groq/index.js";
export function heading_with_options({ language }) {
    return `
      _type == 'heading_with_options' => {
        'type': 'heading_with_options',
        'key': _key,
        ${spacing()},
        'background': background,
        'line': has_line,
        include_pretitle => {
          'pretitle' : pretitle.${language},
          },
        include_title => {
          'title': title.${language},
          },
        include_text => {
          'text': text.${language},
          },
        include_badge => {
            'badge': *[_type == 'global_images'][0]{${asset({ localized: false, language })}},
            'badge_link': *[_type == 'global_images'][0]{'external_reference': external_reference}
          },
      }
    `;
}

These will be added to our main query when we need them, because we will already have determined which modules and heros we need from our prequery.

export const modules = ({ modules, language }) => {
    let modulesToFetch = ``;
    if (modules) {
        modules.forEach((module) => {
            switch (module._type) {
                case "big_gradient_cta":
                    modulesToFetch += `${big_gradient_cta({ language })},`;
                    break;
                case "grid_cta":
                    modulesToFetch += `${grid_cta({ language })},`;
                    break;
                    ...
            }})}}

Here we receive the names of the modules the page contains and, via a switch, we add the corresponding piece of string to our main query.

Module files

Once all our data is retrieved, we pass through our <ModulesContainer> barrel file, which will assign one Astro component to each module:

<>
    {
        modules.map((module: any, index: any) => {
            return (
                <>
                    {module.type === "big_gradient_cta" && <BigGradientCta payload={module} language={language} />}
                    {module.type === "grid_cta" && <GridCta payload={{...module, moduleIndex: index}} language={language} />}
                    ...
                    )
        })
    }

This will inject the response from the query into the Astro component file, which will look something like this:

---
import CtaA from "@components/cta/CtaA.astro";
const { payload: { color, title, button_link, key }, language } = Astro.props;
---
<CtaA
    payload={{
        customClass: color == 'pink_yellow' ? 'c--cta-a--second' : color == 'yellow_green' ? 'c--cta-a--third' : '',
        title: title,
        btn: {
            ...button_link,
        },
        key,
        language: language
    }}
/>

This finishes the journey of our data from our query into our final components. All of this applies equally to heros.

📼 Video summary

Watch this video to see a full rundown of how we create a module, from Sanity to Astro