Querying islands and references

Islands

Some islands, like button_link, asset or wysiwyg contain too much information and it is not efficient to be adding them to each query every time. That is why we make separate query files for them, to reuse them in every other query when we need them.

This is, for instance, an abbreviated version of the file for our button_link query:

src/utilities/groq/button_link.js

export default function button_link(payload) {
    const { name = "button_link", localized = false, language = null , nameParam = 'pages', singleLabel = false} = payload;
    const getSingleLabel = singleLabel ? `${name}.label` : `${name}.label.${language}`
    const getSingleModalTitle = singleLabel ? `${name}.modal_title` : `${name}.modal_title.${language}`

    const getSingleModalSubtitle = singleLabel ? `${name}.modal_subtitle` : `${name}.modal_subtitle.${language}`
    return localized && language
        ? `
    "slug": ${name}.${language}.pages->attributes.slug,
      "parent_slug": ${name}.${language}.pages->parent->slug,
      "_type": ${name}.${language}.pages->_type,
      "href": ${name}.${language}.href,
      "label": ${name}.${language}.label,
      "option": ${name}.${language}.option,
      "param" : ${name}.${nameParam}_param,
      ${name}.${language}.option == 'open_modal' => {
          ${name}.${language}.boolean => {
            'modal_background': ${name}.${language}.modal_image->{'url': {${asset({ localized: false, language })}}},
            'modal_content_type': ${name}.${language}.modal_content,
            modal_content == 'text_form' => {
                'modal_title': ${name}.${language}.modal_title,
                'modal_subtitle': ${name}.${language}.modal_subtitle,
                'modal_thank_you': ${name}.${language}.modal_form_script->thank_you_message,
                'modal_has_download': ${name}.${language}.form_has_download,
                ${name}.${language}.form_has_download => {
                        ${name}.${language}.download_type == 'file' => {
                            'modal_download_file':  ${name}.file.asset->url,
                            'modal_download_filename':  ${name}.file.asset->originalFilename,
                        },
                        ${name}.${language}.download_type == 'link' => {
                            'modal_download_file':  ${name}.external_reference
                        },
                    },
                'modal_form': ${name}.${language}.modal_form_script->text,
                ${name}.${language}.has_product_code => {
                    'product_code': coalesce(${name}.${language}.product_code->title.en, ${name}.${language}.product_code->title)
                }
            },
           ...
        },
        ${name}.${language}.option == 'anchor' => {
            'module_id': ${name}.${language}.module_id
        }
    `
        : `
      "slug": ${name}.pages->attributes.slug,
      "parent_slug": ${name}.pages->parent->slug,
      "_type": ${name}.pages->_type,
      "href": ${name}.href,
      "label": ${getSingleLabel},
      "option": ${name}.option,
       "param" : ${name}.${nameParam}_param,
      ...
    `;
}

We have the localized and the non-localized version of the island, because the localized one can have a different URL per language and the non-localized will have the same URL but different labels for each language, for instance.

And then we need all the information for the content of the modal if the button opens one, so we save all of that in this separate query.

Same thing happens for the following islands:

- asset
- background
- wysiwyg
- image
- spacing

You can find a dedicated section to WYSIWYG (or rich text) here, as it contains multiple special modules inside.

References

We also follow this pattern of querying separately when we need to query for a reference that we know will appear in more than one query, like the people post type, which will later on appear as authors or speakers in multiple other resources.

src/utilities/groq/reference/people.js

import { reference_type, wysiwyg_simple } from "@utilities/groq/index.js";
import asset from "./../asset.js";
export default function people({name = 'reference', language}) {

  return `
      ${reference_type({ name, language })},
      "include_in_leader": ${name}->boolean,
      "image": ${name}->{${asset({localized: false, name: 'asset_type', language})}},
      "job_position": ${name}->text.${language},
      "company": ${name}->company,
      "bio": ${name}->{${wysiwyg_simple({name: 'bio', language})}},
      "title": ${name}->title,
      "linkedin" : ${name}->linkedin,
      'regions': regions[] {'region': region->slug}
    `;
}

We also have a general file for references that contains all the main information:

src/utilities/groq/reference_type.js

import asset from "./asset";
export default function reference_type({name = 'reference', language}) {
  return `
      "slug": ${name}->attributes.slug,
      "parent_slug": ${name}->parent->slug,
      "_type": ${name}->_type,
      "option": "target_self",
      "title": ${name}->title.${language},
      "description": ${name}->attributes.text.${language},
      "icon": {${asset({localized: false, name: 'reference->attributes.icon', language})}},
      "index_image": {${asset({localized: false, name: 'reference->attributes.asset_type', language})}}
    `;
}