Hi I want help on this scenario , so I have a template that will fetch the data from the graphql and I am using sprig to render a template for that data but the issue here is whenever I reload or go to that page I have to call the graphql to fetch which always take few seconds to fetch and render the data

Is there any efficient way to store the fetched data into cache or something so that I don’t have to fetch the grapqh ql and instead show the data from cache ? any advise ?

This part will render the template :
“`
{# this week’s events ajax #}

{{ sprig('/V4/main_site/ajax/onload/general/this_week_event_asia', {'eventLimit':'5'}, {'s-trigger': 'load'}) }} ```

This is where i am using graphql :

{% if sprig.isRequest %}
    {#
    {% set siteId = craft.app.sites.getSiteByHandle('business').id %}

    {% set calendarIds = [8, 10, 12, 14, 16, 18] %}
    {% set allEvents = [] %}

    {% for calendarId in calendarIds %}
        {% set weekEvents = craft.calendar.events({
            siteId: siteId,
            rangeStart: "today",
            rangeEnd: "7 days",
            calendarId: calendarId,
            search: 'published:published',
            with: ['featuredImage'],
            limit:3
        }) %}
        {% set allEvents = allEvents|merge(weekEvents) %}
    {% endfor %}
    #}

{% if page == 'article' %}
    {% set row = '4' %}
    {% set limit = '3' %}
{% else %}
    {% set row = '3' %}
    {% set limit = '4' %}
{% endif %}

{% set query1 = '
    {
    solspace_calendar {
        events(
        limit: ' ~ limit ~'
        site: "business"
        calendarId: [ 8, 10, 12, 14, 16, 18]
        rangeStart: "today"
        rangeEnd: "7 days"
        orderBy: "startDate"
        search: "published:published featured:yes"
        ){
            title
            url
            startDate
            endDate
            slug
            published
            plainText3
            eventPrice
            eventCategory{
                title
            }
            featuredImage{
                url
            }
            city{
                twoLetterCode
                slug
            }
        }
    }
}' 
%}


{% set gqlService = craft.app.getGql() %}
{% set schema = gqlService.getPublicSchema() %}
{% set result = gqlService.executeQuery(schema, query1) %}


<section class="this-week-events container d-none d-lg-block order-md-1">
    <h3>This Week's Events Across Asia
        <span style=" float: right;">
        <a target="_blank" href="{{currentSite.baseUrl}}the-list/events">View more<i class="fa-solid fa-arrow-right"></i></a>
        </span>
    </h3>
    <div class="events-list row">
        {% for event in result.data.solspace_calendar.events %}
            {% set startDate = date(event.startDate) %}
            {% set endDate = date(event.endDate) %}
            {% set eventUrl = '/' ~ event.city[0].slug ~ '/the-list/events/' ~ event.slug %}
            <div class="col-md-{{row}}" >
                <div class="channel_featured_card shadow mb-3">
                    <div class="card_image">
                        <a href="{{eventUrl}}"><img src="{{ event.featuredImage[0].url }}" alt=""></a>
                    </div>
                    <div class="card_info">
                        <span>{{event.eventCategory[0].title}}</span>
                        <a href="{{eventUrl}}">{{event.title}}</a>
                        <div class="card_info_bottom">
                            <p>{{startDate.format('M j')}} ({{startDate.format('D')}}) {% if startDate.format('M j') != endDate.format('M j') %}- {{endDate.format('M j')}} ({{endDate.format('D')}}){% endif %}</p>
                            <p>{{event.plainText3}}</p>
                            <div class="card_info_tags">
                                <span>{{event.eventPrice ?? "TBA"}}</span>
                                <a href="/{{event.city[0].slug}}/the-list">{{event.city[0].twoLetterCode}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</section>
            
        {# this week mobile #}
        <section class="container my-5 d-block d-lg-none order-2">
            <h3 class="this-week-events-mobile-label"><span>This Week's Events Across Asia</span></h3>
            <div class="this-week-events-mobile">   
                <div class="this-week-events-mobile">
                    <div class="this-week-events-mobile-first">
                    {% block mobile_this_weeks_events %}{% endblock %}
                    {% set allEvents = result.data.solspace_calendar.events %}
                    
                    {% set startDateFrstEvent = date(allEvents[0].startDate) %}
                    {% set endDateFrstEvent = date(allEvents[0].endDate) %}

                    <a href="/{{allEvents[0].city[0].slug}}/the-list/events/{{allEvents[0].slug}}" target="_blank">
                        <img src="{{ craft.imagerx.transformImage(allEvents[0].featuredImage[0].url, {quality : 80 , format : 'webp' , width : 1000  }) }}" alt="{{allEvents[0].title}}"/>
                    </a>
                    <div class="twe-mobile-first-info">
                        <span class="date">{{startDateFrstEvent.format('M j')}}{{ startDateFrstEvent.format('M j') != endDateFrstEvent.format('M j') ? ' - ' ~ endDateFrstEvent.format('M j') ~ ', ' ~ endDateFrstEvent.format('Y') : ', ' ~ startDateFrstEvent.format('Y') }}</span>
                        <a href="/{{allEvents[0].city[0].slug}}/the-list/events/{{allEvents[0].slug}}" target="_blank">
                        <p>{{allEvents[0].title}}</p>
                        </a>
                    </div>
                    </div>
                    <div class="twe-mobile-list">
                    {% set num = 1 %}
                    {% for event in allEvents|slice(1, 10) %}
                        {% if event.published == 'published' and num < 6 %}
                            {% set startDate = date(event.startDate) %}
                            {% set endDate = date(event.endDate) %}
                            {% set eventUrl = '/' ~ event.city[0].slug ~ '/the-list/events/' ~ event.slug %}
                            <div class="twe-mobile-event">
                                <a href="/{{event.city[0].slug}}/the-list/events/{{event.slug}}" target="_blank" style="color:#000;">
                                    <img src="{{ craft.imagerx.transformImage( event.featuredImage[0].url, { quality : 80 , format : 'webp' , width : 500  }) }}" alt="{{event.title}}"/>
                                </a>
                                <div class="twe-mobile-event-info">
                                    <span class="date">{{startDate.format('M j')}}{{ startDate.format('M j') != endDate.format('M j') ? ' - ' ~ endDate.format('M j') ~ ', ' ~ endDate.format('Y') : ', ' ~ startDate.format('Y') }}</span>
                                    <a href="/{{event.city[0].slug}}/the-list/events/{{event.slug}}" target="_blank" style="color:#000;">
                                    <p>{{event.title}}</p>
                                    </a>
                                </div>
                            </div>
                            {% set num = num + 1 %}
                            {% endif %}
                    {% endfor %}
                    </div>
                </div>
            </div>
        </section>

{% else %}

{% endif %}