Load more pagination fails to show next entries when query is using relations

Steps to reproduce the issue.

I’ve an entries’ query which is a little bit more complex than in the example, as it’s filtering using section and categories. The entries are filtered using sprig checkbox inputs that send the data to the entries query, which should then be paginated.

Below is a reduced test case of my code.

Section template

{{ sprig('_sprig/events', {
	limit: 3,
	base: entry.url
}) }}

Sprig template

{% set offset = offset ?? 0 %}
{% set entries = craft.entries.section((sections ?? null is not empty) ? sections : ['events', 'museums']).andRelatedTo(categories ?? []).with(['category', 'cover']).offset(offset).limit(limit) %}

{% for option in [{
	type: 'sections',
	id: 'events',
	title: 'Events' | t
}, {
	type: 'sections',
	id: 'museums',
	title: 'Museums' | t
}] | merge(craft.categories.group('categories').relatedTo(craft.entries.section(['events', 'museums']).ids()).all() | map((value, key) => {
	type: 'categories',
	id: value.id,
	title: value.title
})) %}
	{{ tag('input', {
		sprig: true,
		type: 'checkbox',
		id: '{type}-{i}' | t({
			type: option.type,
			i: loop.index
		}),
		name: '{type}[]' | t({
			type: option.type
		}),
		value: option.id,
		checked: (option.id in sections ?? [] or option.id in categories ?? []) ? 'checked',
	}) }}
{% endfor %}

{% for entry in entries.all() %}
	<div id="entries">
		{% set attr = {
			href: '{base}/{slug}' | t({
				base: base,
				slug: entry.slug
			})
		} %}
		<a {{ attr(attr) }}>
			{{ entry.title }}
		</a>
	</div>
{% endfor %}

{% if entries.count() > offset + entries.all() | length %}
	{% set attr = {
		id: 'load-more-oob',
		sprig: true,
		's-vals': {
			offset: (offset + limit) - 1,
			sections: sections ?? [],
			categories: categories ?? []
		} | json_encode,
		's-target': '#entries',
		's-select': '#entries a',
		's-swap': 'beforeend',
		's-swap-oob': (sprig.trigger == 'load-more-oob') ? 'true'
	}%}
	<button {{ attr(attr) }}>
		{{ 'Load more' | t | typogrify }}
	</button>
{% else %}
	<button id="load-more-oob" s-swap-oob="true"></button>
{% endif %}

A clear and concise description of what you expected to happen.

When the view is filtered using the sections ones, so first options, the pagination is working fine. When the view is filtered using the categories ones, it shows the first correctly, the show more button, but when clicking on it I get an empty content.

I tried to debug by adding this after <div id="entries">:

{{ d({
	entriesCount: entries.count(),
	offset: offset,
	entriesAllLength: entries.all() | length,
	limit: limit,
	loadMore: entries.count() > offset + entries.all() | length,
	sections: (sections ?? null is not empty) ? sections : ['events', 'museums'],
	categories: categories ?? []
}) }}

While entriesCount is correct, and loadMore is true, the next entries are not showing and then the load more button disappears.

I also tried to simplify the entries query and options, by removing the section filter:

• Removing .section() from craft.entries and change andRelatedTo to relatedTo;
• Removing events and museums from the options;

But I finally end with the same problem: load more button is showing, but clicking on it load an empty content + hide the load more button.

It looks like there’s a bug with Sprig when playing with relation (relatedTo or andRelatedTo).

The plugin and Craft version numbers

• craftcms/cms: 4.2.3
• putyourlightson/craft-sprig: 2.1.0

[bencroker]

Great!

[romainpoirier]

Thank you, now that works! Don’t know why it was still not working in my previous answer, but you were right that it seems that the issue was 's-val:categories': categories ?? [] which is useless.