Included Cache doesn't get refresh when adding elements

[WHITE-developer]

We use includeCached tag in the head of our website and in there we use categories and nodes from the Verbb Navigation plugin.

We see a problem where we add a new node to the navigation or add a new category. We would expect that the included cache file would be refreshed, but nothing is triggered.

Then when we move the new element in it's structure, Blitz picks it up and then refreshes the cache.

So for now we advise our customers to drag the element up or down and after the cache is refreshed, drag it back to it's original place. Or maybe there is another workaround, but it isn't ideal.

We use Blitz 4.5.2 and Craft 4.4.15

Settings:

  blitz:
    edition: standard
    enabled: true
    licenseKey:
    schemaVersion: 4.5.0
    settings:
      apiKey: ''
      cacheControlHeader: 'public, s-maxage=31536000, max-age=0'
      cacheDuration: null
      cacheElementQueries: true
      cacheElements: true
      cacheGeneratorSettings:
        __assoc__:
          -
            - concurrency
            - '3'
      cacheGeneratorType: putyourlightson\blitz\drivers\generators\HttpGenerator
      cacheNonHtmlResponses: false
      cachePurgerType: putyourlightson\blitz\drivers\purgers\DummyPurger
      cacheStorageSettings:
        __assoc__:
          -
            - folderPath
            - '@webroot/cache/blitz'
          -
            - createGzipFiles
            - ''
          -
            - createBrotliFiles
            - ''
      cacheStorageType: putyourlightson\blitz\drivers\storage\FileStorage
      cachingEnabled: false
      debug: true
      deployerType: putyourlightson\blitz\drivers\deployers\DummyDeployer
      driverJobPriority: 100
      esiEnabled: false
      excludedQueryStringParams:
        -
          __assoc__:
            -
              - siteId
              - ''
            -
              - queryStringParam
              - gclid
        -
          __assoc__:
            -
              - siteId
              - ''
            -
              - queryStringParam
              - fbclid
      generatePagesWithQueryStringParams: true
      hintsEnabled: true
      includedQueryStringParams:
        -
          __assoc__:
            -
              - siteId
              - ''
            -
              - queryStringParam
              - '.*'
      includedUriPatterns:
        -
          __assoc__:
            -
              - siteId
              - ''
            -
              - uriPattern
              - '.*'
      injectScriptEvent: DOMContentLoaded
      integrations:
        - putyourlightson\blitz\drivers\integrations\FeedMeIntegration
        - putyourlightson\blitz\drivers\integrations\SeomaticIntegration
      maxRetryAttempts: 10
      mutexTimeout: 1
      nonCacheableElementTypes:
        - craft\elements\Asset
        - craft\elements\User
        - verbb\wishlist\elements\Item
      outputComments: true
      purgeAssetImagesWhenChanged: true
      queryStringCaching: 2
      queueJobTtr: 3600
      refreshCacheAutomaticallyForGlobals: true
      refreshCacheJobPriority: 110
      refreshCacheWhenElementMovedInStructure: true
      refreshCacheWhenElementSavedNotLive: false
      refreshCacheWhenElementSavedUnchanged: false
      refreshMode: 1
      sendPoweredByHeader: false
      ssiEnabled: true
      trackElementQueries: true
      trackElements: true

[bencroker]

Then when we move the new element in it's structure, Blitz picks it up and then refreshes the cache.

Do you mean that you reorder the new element within the Verbb Navigation plugin or where exactly?

[WHITE-developer]

Yes,
My guess is that because of the navigation itself not being an element, it's not picking up the change until a node (which is an element) is getting changed.

A way to manually clear/refresh a single include would be nice, as I don't think there is an option for that at the moment?

[bencroker]

In my tests the cached include is being refreshed as expected. Can you show me how you are outputting the navigation items?

[WHITE-developer]

{% for menuItem in craft.navigation.nodes("navigation").level(1).with(['children']).all() %}
			<li>
				{% if menuItem.title == 'Sale' %}
					<a href="{{ menuItem.url }}" class="{{ menuItem.classes }} menu-sale" id="menu-sale"
					   {% if menuItem.newWindow %}target="_blank"{% endif %}>
						{{ menuItem.title }}
					</a>
				{% elseif menuItem.title == 'Vuurwerk' %}
					<a href="{{ menuItem.url }}" class="{{ menuItem.classes }}"
					   {% if menuItem.newWindow %}target="_blank"{% endif %}>
						{{ menuItem.title }}
					</a>
				{% else %}
					<a href="{{ menuItem.url }}" class="{{ menuItem.classes }} mobile-toggle-megamenu"
					   {% if menuItem.newWindow %}target="_blank"{% endif %}>
						{{ menuItem.title }}
						<i class="material-icons visible-xs pull-right keyboard_arrow_down"></i>
					</a>
				{% endif %}

				{% if menuItem.children|length %}
					{% if menuItem.title == 'Sale' %}
						<div class="megamenu menu-sale-megamenu">
							<div class="masonry-grid">
								<div class="hidden-xs">
									<div class="megamenu-title menu-sale-megamenu-title">{{ 'Coppens sale' | t }}</div>
								</div>
								<div class="col-xs-12 masonry-column hidden-xs">
									<div class="menu-sale-megamenu-subtitle">{{ 'Kies een categorie' | t }}</div>
								</div>
								<div class="text-center menu-sale-megamenu-categories">
									{% for menuItem in menuItem.children %}
										<a class="btn" href="{{ menuItem.url }}"
										   {% if menuItem.newWindow %}target="_blank"{% endif %}
										   title="{{ menuItem.title }}">
											{{ menuItem.title }}
										</a>
									{% endfor %}
								</div>
								{% if showSaleProducts %}
									<div class="col-xs-12 masonry-column hidden-xs">
										<div class="menu-sale-megamenu-subtitle">{{ 'Topdeals' | t }}</div>
									</div>
									<div class="col-xs-12">
										{{ sprig('_components/navigationProducts', {'limit': 4}, {'s-trigger': 'load'}) }}
									</div>
								{% endif %}
							</div>
						</div>
					{% else %}
						<div class="megamenu">
							{% if craft.categories.id(menuItem.elementId).one.longTitle %}
								<div class="col-xs-12 hidden-xs">
									<div class="megamenu-title">{{ craft.categories.id(menuItem.elementId).one.longTitle }}</div>
								</div>
							{% endif %}
							{% for menuItem in menuItem.children %}
								{% if menuItem.children|length %}
									<div class="col-sm-3 menu-column">
										{% for menuItem in menuItem.children.all() %}

											<ul class="masonry-column">
												<li class="megamenu-item">
													{% if menuItem.type == 'Asset' %}
														<img src="{{ menuItem.url }}">
													{% else %}
														<a href="{{ menuItem.url }}"
														   {% if menuItem.newWindow %}target="_blank"{% endif %}
														   title="{{ menuItem.title }}">
															{{ menuItem.title }}
														</a>
														{% if menuItem.children|length %}
															<div class="">
																<ul>
																	{% for menuItem in menuItem.children.all() %}
																		<li>
																			{% if menuItem.type == 'Asset' %}
																				<img src="{{ menuItem.url }}">
																			{% else %}
																				<a href="{{ menuItem.url }}"
																				   {% if menuItem.newWindow %}target="_blank"{% endif %}
																				   title="{{ menuItem.title }}">
																					{{ menuItem.title }}
																				</a>
																			{% endif %}
																		</li>
																	{% endfor %}
																</ul>
															</div>
														{% endif %}
													{% endif %}
												</li>
											</ul>
										{% endfor %}
									</div>
								{% endif %}
							{% endfor %}
						</div>
					{% endif %}
				{% endif %}
			</li>
		{% endfor %}

[bencroker]

Thanks. In my local tests, adding an entry (or category) still results in the cached include being refreshed as expected.

Can you please describe exact steps you took so I can recreate the issue?

[WHITE-developer]

Looks like it's working now,
Maybe just some corrupted data in the cache tables after some updates

[bencroker]

Great!

[WHITE-developer]

Looks like there still goes something wrong, when editing only the title, no refresh jobs are getting created, when debugging it prevents refreshing, because the Node element doesn't track changes and the canonicalId is set (https://github.com/craftcms/cms/blob/develop/src/base/Element.php#L4271), is there a way to enable refreshCacheWhenElementSavedUnchanged for a specific element type?

[bencroker]

Thanks, I can confirm this issue and have created a discussion at craftcms/cms#13619 to see how to best handle this going forward.

[bencroker]

As of verbb/navigation#367, this should now be working in version 2.0.21 of the Navigation plugin, can you please confirm?