How to use Sprig's "Load More" Recipe After Update

Question

This is a continuation of a previous question I had (Here). I am using Sprig's Load More Recipe. In my category page, I want the load more function to only pull up entries that equals the current category page. In a recent update, the category solution that was in my previous question no longer works, since it has been restructured a little. I cannot figure out how get the relatedTo(category) to work again. I currently have it set up like this (the {'relatedTo': category} does not do anything):

_category.twig

{{ sprig('_layouts/_blog/_categories/_loadMore', {'limit': 6},{'relatedTo': category}) }}
{{ sprig.script }}

_loadMore.twig

{% set offset = offset ?? 0 %}

{% set entries = craft.entries.section('caseFiles').offset(offset).limit(limit).relatedTo(category).all() %}

{% for entry in entries %}
   ------Entry Content-----
{% endfor %}

{% if entries %}
  {# Increments `offset` by the value of `limit` and swaps itself out on click #}
  <button class="orange-button" sprig s-vars="offset: {{ offset + limit }}" 
    s-target="this" s-swap="outerHTML">
    <p>Load More</p>
  </button>
{% endif %}

Answer 1

The problem is that you are doing .relatedTo(category) but the variable you are passing is called relatedTo, not category.

Just like with limit, based on your code, it should be .relatedTo(relatedTo). Also, it should be part of the same hash as your limit.

However, you can't pass a category object to a component and will need to pass its id instead (docs).

Depending on what category is in your case (and I guess it's an object), you could do:

{{ sprig('_components/load-more', {
    'limit': 6,
    'categoryId': category.id
}) }}

Then in your component:

{% set offset = offset ?? 0 %}

{% set query = craft.entries().section('caseFiles').offset(offset).limit(limit) %}

{# Make sure a categoryId is being passed #}
{% if categoryId %}
    {% set query = query.relatedTo(categoryId) %}
{% endif %}

{% set entries = query.all() %}

{% for entry in entries %}
   ------Entry Content-----
{% endfor %}

{% if entries %}
  {# Increments `offset` by the value of `limit` and swaps itself out on click #}
  <button class="orange-button" sprig s-vars="offset: {{ offset + limit }}" 
    s-target="this" s-swap="outerHTML">
    <p>Load More</p>
  </button>
{% endif %}