Eager loading categories and assets inside related entries for gallery

Question

I am looking for some advice on how to best streamline a gallery system on a site, but having trouble wrapping my head around the syntax needed to eager load nested asset fields with categories inside a related entry. Any help is appreciated!

Structure:

• The "exhibition" section has an "Entries" field named galleryEntry
• That field relates to entries in the "gallery" section.
• The "gallery" section has an "Assets" field called assetGallery that can contain multiple images
• These images have a title and a "category" field called workCategory.

In the /exhibition/_entry template, I'm trying to display a gallery of images with asset thumbnail, asset title, and asset category. Simplified code:

{% if galleryEntry|length %}

    {% set relatedAssets = galleryEntry.assetGallery.all() %}
    
    <div class="gallery">
    
    {% for work in relatedAssets %}
        
        <figure>
        <img class="thumb" src="{{ work.url }}" alt="{{ work.title }}"/>
        <figcaption>
            Title: {{ work.title }} / 
            Category: {{ work.workCategory.one().title}}
        </figcaption>
        </figure>
        
    {% endfor %}
    
    </div>
    
{% endif %}

Answer 1

A good thing to know about Craft is that all relational fields (such as your Assets field galleryEntry.assetGallery, for instance) return element query objects. So, all methods and parameters available to element queries are available on that object – including the with() param which can be used to eager-load relations contained in said field.

To eager-load the workCategory categories for the related assets in the assetGallery field, all you'll need to do is add that with() parameter to your existing assetGallery query:

{% set relatedAssets = galleryEntry.assetGallery.with(['workCategory']).all() %}

To take it one step further, you can even leverage nested eager-loading when you first pull the galleryEntry entry, which would reduce the number of queries even further. The below example would eager-load both the assets in the gallery entry's galleryEntry field and the categories in those assets' workCategory field (note that the below example assumes you have an exhibition entry set to a entry variable, and that the gallery entry is related to that entry via a galleryEntry Entries field):

{% set galleryEntry = entry.galleryEntry.with(['assetGallery.workCategory']).one() %}

(Note that in terms of performance the above is probably not noticeable if there's only ever a single galleryEntry – but it can be super effective if you're querying multiple elements, with multiple nested related elements.)

Beyond the above, I recommend looking over the official docs on eager-loading - they are pretty detailed and cover most common use cases, including nesting and Matrix fields.