Using sprig for category filter but keep getting deprecation errors

Question

I'm using sprig, following the https://craftquest.io/courses/commerce-product-filtering-with-sprig example. I have 3 selects (thickness, look, finish), each using categories from a different group. _entryId is a passed-in parameter that holds the id of the parent entry in a structure.

My code is working fine but I keep getting Looping through element queries directly has been deprecated. Use the all() function to fetch the query results before looping over them. errors in the cp. My template code is below, what am I missing here?

{% set thickness = thickness ?? '' %}
{% set look = look ?? '' %}
{% set finish = finish ?? '' %}

{% if reset is defined %}
    {% set thickness = '' %}
    {% set look = '' %}
    {% set finish = '' %}
{% endif %}

{% set thicknessOptions = craft.categories().group('thickness').all() %}
{% set lookOptions = craft.categories().group('look').all() %}
{% set finishOptions = craft.categories().group('finish').all() %}

{% set myQuery = craft.entries.section('collections').with([['projectImage', {withTransforms: ['collectionSubcatThumbnail']}]]).descendantOf(_entryId) %}

{% if thickness %}
    {% do myQuery.andRelatedTo(thickness) %}
{% endif %}

{% if look %}
    {% do myQuery.andRelatedTo(look) %}
{% endif %}

{% if finish %}
    {% do myQuery.andRelatedTo(finish) %}
{% endif %}

{% set items = myQuery.all() %}

<!-- block 4 col img -->
<section class="blck">
    <div class="container">
        <div class="mb-5 row align-items-center">
            <div class="col-6 col-sm-4 col-md-3">
                <p>
                    <button class="btn btn-light btn-sm" sprig s-val:reset="1" title="reset" aria-label="reset filters">
                        <small>reset filters</small>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw">
                            <path d="M23 4v6h-6M1 20v-6h6"/>
                            <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
                        </svg>
                    </button>
                </p>
            </div>
            <div class="col-6 col-sm-4 col-md-3">
                <select s-replace="#query_result" sprig name="thickness" value="{{ thickness }}" class="div-select w-100" aria-label="Thickness">
                    <option value="" selected>Thickness</option>
                    {% for cat in thicknessOptions %}
                        <option value="{{ cat.id }}" {{ thickness == cat.id ? 'selected '}}>{{ cat.title }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-6 col-sm-4 col-md-3">
                <select s-replace="#query_result" sprig name="look" value="{{ look }}" class="form-select w-100" aria-label="Look">
                    <option value="" selected>Look</option>
                    {% for cat in lookOptions %}
                        <option value="{{ cat.id }}" {{ look == cat.id ? 'selected '}}>{{ cat.title }}</option>

                    {% endfor %}
                </select>
            </div>
            <div class="col-6 col-sm-4 col-md-3">
                <select s-replace="#query_result" sprig name="finish" value="{{ finish }}" class="form-select w-100" aria-label="Finish">
                    <option value="" selected>Finish</option>
                    {% for cat in finishOptions %}
                        <option value="{{ cat.id }}" {{ finish == cat.id ? 'selected '}}>{{ cat.title }}</option>

                    {% endfor %}
                </select>
            </div>
        </div>
    </div>
</section>
<section class="blck">
    <div class="container">
        <div class="row justify-content-center" id="query_result">
            {% if myQuery |length %}
                {% for item in items %}
                    <div class="col-6 col-sm-4 col-md-3">
                        <div class="mb-5 img-item">
                            <a href="{{ item.url }}" class="img-ratio img-1-1">
                                <div class="in">
                                    {% set image = item.projectImage[0] ?? null %}
                                    <img class="media" data-object-fit="cover" src="{{ image.url('collectionSubcatThumbnail')}}">
                                </div>
                            </a>
                            <h6>{{ item.title }}</h6>
                            <a href="{{ item.url }}" aria-label="Discover {{ item.title }}" class="lnk-underline">Discover this stone</a>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="alert alert-warning">
                    <p class="mb-0">No products with that category or combination of categories. Try resetting the filters or deselecting 1 or more options.</p>
                </div>
            {% endif %}
        </div>
    </div>
</section>

Answer 1

One thing that stands out is that you're checking myQuery | length instead of items | length. Though I've tested it and this doesn't actually cause a deprecation error in my setup.

Have you tried clearing the deprecation warnings in the backend manually? They won't disappear automatically if you change the template, but will stay visible until cleared manually. Try clearing them and reload the template, see if the warning appear again.

Answer 2

Turns out the error was elsewhere in the template where I had forgotten to add the .all() statement. The code in the example is error free.