putyourlightson / craft-blitz

Intelligent static page caching for creating lightning-fast sites with Craft CMS.
https://putyourlightson.com/plugins/blitz
Other
149 stars 36 forks source link

Cache not breaking on index page when "Replace File" is used on an Asset. #514

Closed joshuapease closed 1 year ago

joshuapease commented 1 year ago

I'm entirely sure if this is a bug or if I just need to configure something differently.

I have an "Our Team" setup on a site that's structured like so.

The "Our Team" page queries all "People" entries. Those "People" entries have a profile image field.

image

I've noticed that when I use "Replace File" on the profile images, the "Our Team" page doesn't pick up on the change.

We are using putyourlightson/craft-blitz-cloudfront.

image

Craft and Plugin Versions

Craft: Craft Pro 4.4.13
Amazon S3: 2.0.3
Blitz: 4.4.5
Classnames: 2.0.0
Control Panel CSS: 2.6.0
CP Field Inspect: 1.4.4
Design Tokens: 1.0.3
Expanded Singles: 2.0.1
Imager X: 4.1.13
MatrixMate: 2.1.3
Navigation: 2.0.18
Redactor: 3.0.4
Retour: 4.1.12
SEOmatic: 4.0.27
Simple Mailchimp: 2.0.2
Two-Factor Authentication: 3.2.0
Typed link field: 2.1.5
Typogrify: 4.0.1
Video Embed: 2.0.2
Vite: 4.0.6

Composer JSON

"born05/craft-twofactorauthentication": "3.2.0",
"craftcms/aws-s3": "2.0.3",
"craftcms/cms": "4.4.13",
"craftcms/redactor": "3.0.4",
"doublesecretagency/craft-cpcss": "2.6.0",
"leowebguy/simple-mailchimp": "2.0.2",
"mmikkel/cp-field-inspect": "1.4.4",
"nystudio107/craft-retour": "4.1.12",
"nystudio107/craft-seomatic": "4.0.27",
"nystudio107/craft-typogrify": "4.0.1",
"nystudio107/craft-vite": "4.0.6",
"putyourlightson/craft-blitz": "4.4.5",
"putyourlightson/craft-blitz-cloudfront": "^3.0",
"sebastianlenz/linkfield": "2.1.5",
"spacecatninja/imager-x": "4.1.13",
"trendyminds/craft-design-tokens": "1.0.3",
"vaersaagod/matrixmate": "2.1.3",
"verbb/expanded-singles": "2.0.1",
"verbb/navigation": "2.0.18",
"viget/craft-classnames": "^2.0.0",
"viget/craft-video-embed": "^2.0.2",
"viget/craft-viget-base": "^5.0.2",
"vlucas/phpdotenv": "^5.4.0",
"yiisoft/yii2-redis": "~2.0.0"
bencroker commented 1 year ago

My guess is that the image has been cached by Cloudflare and that replacing it maintains the same filename, meaning that the stale cached file is served by Cloudflare. You can test this by renaming the file in the asset.

Blitz 4.4.0 added purging of asset image URLs, which should purge the cached version of the file on Cloudflare. Are you perhaps using another service to store/serve/cache images?

joshuapease commented 1 year ago

We are using Imgix as our image service. However, I'm not so sure that it's holding on to the cached version of the file.

The URL changes when I use "Replace file". And the proper image loads on the "Person" entry.

Proper Image URL (Person Entry) image

Old Image URL (Our Team Entry) image

I'm not sure if Imgix is at play here because by doing the following steps, I'm able to get the image to appear.

  1. First I clicked "Purge Cache" thinking that Cloudfront is holding on to the markup of the page. That didn't resolve the issue.
  2. I cleared the cache (deleting all pages in Blitz's cache).
  3. I purged the Cloudfront cache again. This time the new image was used.

image

bencroker commented 1 year ago

Imgix does cache images, so you’ll need to ensure that the replaced image has a different filename.

However, it looks like Blitz is not refreshing the cache when the filename changes. I’ve changed this behaviour, as well as the scenario in which the file (in your case image) is replaced but the filename stays the same, in https://github.com/putyourlightson/craft-blitz/commit/7d4527f1d98c131612168d7eb034f50bffa4f288 and https://github.com/putyourlightson/craft-blitz/commit/3ef02169a0055e7f4ed1faa04177a84d19afc4bf respectively, for the 4.5.0 release.

joshuapease commented 1 year ago

Thanks for the fast change. I've run composer require putyourlightson/craft-blitz:4.5.0.x-dev to test it out. So far I'm not seeing the issue I've run into resolved.

I've done some further local testing with the following steps:

After following the same steps, using "Replace File" on the profile image still results in the "Our Team" page showing the previous image.

Viewing source for that page shows that the timestamp for Cached by Blitz never changes.

bencroker commented 1 year ago

I confirmed this was working locally. Did you clear the cache before testing using the steps above?

joshuapease commented 1 year ago

Apologies for the slow reply. I needed to shift over to another project.

I can confirm that I cleared my cache. I also just tested a few more things.

It feels like the underlying issue is that the "Our Team" page isn't properly tracking that it's using the Profile Image for each Person image (see original diagram).

I re-tested "Replace File" and also thought to test editing the title field for the Profile Image Asset.

The following Jobs get added to the queue when I modified the title.

RefreshCacheJob - Refreshing Blitz cache

{
    "description": null,
    "data": {
        "cacheIds": [],
        "elements": {
            "craft\\elements\\Asset": {
                "elementIds": {
                    "17618": true
                },
                "changedAttributes": {
                    "17618": {
                        "title": true
                    }
                },
                "isChangedByAttributes": {
                    "17618": true
                },
                "isChangedByFields": {
                    "17618": false
                }
            }
        }
    },
    "forceClear": false,
    "forceGenerate": false
}

Once that executes, the following job is added.

It's referencing the individual Person's entry, but not the "Our Team" page.

DriverJob - Purging Blitz cache

{
    "description": "Purging Blitz cache",
    "siteUris": [
        {
            "siteId": 1,
            "uri": "who-we-are/our-people/leon-clarke"
        }
    ],
    "driverId": "cachePurger",
    "driverMethod": "purgeUrisWithProgress"
}

I'll work on setting up a reduced test case to make sure there isn't anything fishy going on with our project's code.

joshuapease commented 1 year ago

I put together a reduced test case and am serving it locally with DDEV.

https://github.com/joshuapease/Blitz-Reduced-Test-Case

If I remove this with statement, I get the behavior that I'd expect.

bencroker commented 1 year ago

Than you for taking the time to create that test case, it really helped in tracking down the bug, which I’m working on a fix for.

bencroker commented 1 year ago

Just released the fix in version 4.4.6 (and merged into 4.5.0.x-dev). Please let me know if that resolves the issue for you.

joshuapease commented 1 year ago

@bencroker Awesome! In my test case, 4.4.6 resolved the issue with changing the asset title. And then 4.5.0.x-dev resolved replace file.

I'm still having a little trouble with our actual site. But it has the extra layer of a cloudfront reverse proxy in front of the pages.

I think most likely it's some user error on my part. But I'll keep you posted if I find anything else.

Thanks so much for your help! Blitz is definitely a go-to plugin for all our sites.

bencroker commented 1 year ago

That’s great to hear! Let me know if I can help with any other issues (preferably in another GitHub issue). I have some final testing to do on 4.5.0 but am hoping to release it next week.

joshuapease commented 1 year ago

@bencroker Working well in our staging setup that's using Cloudfront as too. I probably failed to clear a cache or something.

bencroker commented 1 year ago

Released in version 4.5.0.