How to Fetch Additional Data in Page Modules

When using Page Modules, the fields of the module are passed down to the Nunjuck component as props. However, you may run into a scenario where you want to fetch additional data into your Page Modules, such as information from a Content List or Item in Agility.

An example can be seen here on the Post Listing Page Module in the agilitycms-eleventy-starter.

What We'll Cover:

1. Fetching the Data

2. Using the Data in your Page Module 

Fetching the Data

In the ./src/_data directory, create a file, then import and set up the Agility Sync Client to utilize the Agility fetch methods:

const {
  getSyncClient,
  agilityConfig,
} = require("../../agility/agility.config");

async function getAgilityContent() {
  const languageCode = agilityConfig.languageCode;
  const isPreview = agilityConfig.isPreviewMode;

  const syncClient = getSyncClient({ isPreview });

  // get posts
  let posts = await syncClient.store.getContentList({
    referenceName: "posts",
    languageCode,
  });

  // get categories
  let categories = await syncClient.store.getContentList({
    referenceName: "categories",
    languageCode,
  });

  if (!posts) return {};

  return posts.map((p) => {
    // categoryID
    const categoryID = p.fields?.category?.contentid;

    // find category
    const category = categories?.find((c) => c.contentID == categoryID);

    // category
    p.category = category?.fields?.title || "Uncategorized";

    // date
    p.date = new Date(p.fields.date).toLocaleDateString();

    // title
    p.title = p.fields.title;

    // slug
    p.slug = p.fields.slug;

    // image
    p.image = p.fields.image;

    return p;
  });
}

// export for 11ty
module.exports = getAgilityContent;

posts.js

Using the Data in your Page Module

To use the Data in your Page Module, we can now call on the posts object/array:

{% if posts.length >= 1 %}
<div class="relative px-8 mb-12">
  <div class="max-w-screen-xl mx-auto">
    <div class="sm:grid sm:gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {% for post in posts %}
          <a href="{{ post.slug }}">
            <div class="flex-col group mb-8 md:mb-0">
              <div class="relative h-64">
                <img
                  src="{{ post.image.url }}"
                  alt="{{ post.image.label }}"
                  class="object-cover object-center rounded-t-lg"
                  style="width: 100%; height: 100%;"
                />
              </div>
              <div class="bg-gray-100 p-8 border-2 border-t-0 rounded-b-lg">
                <div class="uppercase text-primary-500 text-xs font-bold tracking-widest leading-loose">
                  {{ post.category }}
                </div>
                <div class="border-b-2 border-primary-500 w-8"></div>
                <div class="mt-4 uppercase text-gray-600 italic font-semibold text-xs">
                  {{ post.date }}
                </div>
                <h2 class="text-secondary-500 mt-1 font-black text-2xl group-hover:text-primary-500 transition duration-300">
                  {{ post.title }}
                </h2>
              </div>
            </div>
          </a>
      {% endfor %}
    </div>
  </div>
</div>
{% else %}
<div class="mt-44 px-6 flex flex-col items-center justify-center">
  <h1 class="text-3xl text-center font-bold">No posts available.</h1>
    <div class="my-10">
      <a href="/" class="px-4 py-3 my-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-primary-600 hover:bg-primary-500 focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition duration-300">
        Return Home
      </a>
  </div>
</div>
{% endif %}

postslisting.njk