Gatsby-source-wordpress-experimental: Gatsby Preview with Posts and ACF breaks cache

[lnikell]

Hi guys, thank you for the great work. The new experience with Gatsby and this plugin is much better than before. I wanted to report a weird bug that we experience with it. Probably it will help you to fix it or you will give us some good advice for a potential workaround.

Our setup:

Wordpress - 5.5 (but the issue was with 5.4 too)
WP GraphQL - 0.12.0
WP Gatsby - 0.4.14
WPGraphQL for Advanced Custom Fields - 0.3.5
gatsby-source-wordpress-experimental - 1.3.6

On localhost I run Gatsby Preview with ENABLE_GATSBY_REFRESH_ENDPOINT=true. The same I experience on the deployed instance.

I will send the detailed video link to you in Twitter @TylerBarnes, I hope you don't mind :)

Steps to reproduce:

1. Run gatsby preview server
2. Check blog posts (everything works fine), everything works well
3. Go to WP open blog post and click preview(if it works first time, close and open it again)
4. It crashes with the error about missing image in ACF, after that cache drops somehow
5. Try to open again this blog post directly from localhost instead of WP Preview, you will see that error still persist.

[TylerBarnes]

Hey @lnikell thanks for reporting this. I'm currently working on rewriting the internal Preview logic and that may fix this incidentally but I can have a look at this while I'm building out the new preview experience. Are you able to share a reproduction repo and or GraphQL API url I can use to debug? You can email it to me at [email protected]

Thanks!

[TylerBarnes]

The preview work is being tracked in https://github.com/gatsbyjs/gatsby-source-wordpress-experimental/issues/97

[lnikell]

Hi, @TylerBarnes thank you! Just updated all plugins to the latest version, the issue still persists.

"gatsby-source-wordpress-experimental": "^2.1.0",

Our workaround at this moment that we created our own fork of the plugin and disabled fetching unsaved data for previews https://github.com/pixel-point/gatsby-source-wordpress-experimental/commit/433c58ec9426c414ea541349b7b65355fc01298b
So that allows use a preview normally but only after you save the post/page.

[TylerBarnes]

Makes sense! I'm currently re-working preview to be much more reliable. I should have a release out later this week or early next. I have it on my list to check this out before I ship that release.

[TylerBarnes]

I'm happy to say this appears to not be an issue in the new preview experience. I haven't shipped it quite yet, but it'll be out this week :)

[lnikell]

@TylerBarnes That’s a great news. Thanks a lot! Looking forward to try.

[TylerBarnes]

If you're interested you can test out the latest WP Preview now with [email protected] and installing this branch of WPGatsby in your WP instance gatsbyjs/wp-gatsby#50 :)

[TylerBarnes]

The preview re-work has shipped in [email protected]. Let me know if this is still an issue on latest

[lnikell]

Hi, @TylerBarnes thanks for the great update. I like the new loading preview screen and the rebuild time significantly decreased, however, the issue is still there.

Maybe that the part of this issue you described in the changelog. It's happening on blog posts where we use Gutenberg and there are some acf attached.

[TylerBarnes]

Ahhh, yep that would be it! It's really unfortunate as Gutenberg did fix it but had to revert the change due to some unexpected side effects. Good news is folks are still discussing fixes here https://github.com/WordPress/gutenberg/issues/16006 and I'm sure this will be fixed at some point in the near future. Please let me know if you run into any issues with the new Preview!

[lnikell]

@TylerBarnes thanks for the answer, it’s actually very sad that this issue seems to be there since 2019 and still not fixed. I’m surprised that it affects as well just ordinary WP users.

[lnikell]

@TylerBarnes since the plugin got significant updates could you point me what could be the alternative to the fix we used before https://github.com/pixel-point/gatsby-source-wordpress-experimental/commit/433c58ec9426c414ea541349b7b65355fc01298b in a new set up
will be very nice to have a workaround with an updated version too.

[TylerBarnes]

@inikell does your workaround use "publish" as the preview?

[lnikell]

@TylerBarnes yep

[TylerBarnes]

Wouldn't you just need to have a preview instance hooked up and press "publish" then? And disable Gatsby Preview in WP altogether (there's a checkbox in the settings)

[lnikell]

@TylerBarnes so basically the workaround we have for clients at this moment just to save the post and then click preview to see how does it look like, without a need of rebuilding the website. So I basically need a way to open within Preview iframe the already saved version without fetching draft one.

[TylerBarnes]

Ahh got it. I don't think that will work with the new preview setup 🤔 since the new preview sends back information about where the previewed node's page was built. But it does that as part of sourcing preview data, so if you disabled preview sourcing it will likely hang and then time out.

[TylerBarnes]

You'll likely need to disable preview in WPGatsby settings and add your own custom preview template in this case, since it's an unsupported workaround.

[lnikell]

Hi @TylerBarnes, thanks for your help! After spending some time understanding the new 3.0.0 version I temporary came up with the following dirty solution https://github.com/pixel-point/gatsby-source-wordpress-experimental/blob/f5bb45548292ec0b79adf09a1a0aea6ea75ff095/plugin/src/steps/source-nodes/update-nodes/wp-actions/update.js#L144-L162

I tried to remove asPreview option from query generator, it works from perspective of fetching the already saved data instead of preview, however, it breaks preview generation. I honestly did not find the process of building plugin super smooth :) maybe I'm doing something wrong, but I have to restart the gatsby server each time I want to check the assumption, wait for a build, even with a test project it anyway takes some time.

The above solution has a very simple logic - we just fetch data from the saved node and assign ACF fields to data prepared for the preview version. But it has the limitation that you have to put your ACF field under acf named field.

If there could be a more elegant solution, please let me know.

[TylerBarnes]

Yeah, restarting Gatsby is needed unfortunately. It'd be nice if we didn't have to :) could save me some time haha. A slightly better solution would be to merge the two node objects together using something like lodash.merge. The only problem with that is you might not be able to preview removing a field. Ideally we would implement our filters api here so that you wouldn't have to make a fork (there's a nodeFilter() and applyNodeFilter() internally that's barely used but works similar to WP filters).

[lnikell]

@TylerBarnes Thank you! Yep I also thought about 😁I just spent half of the day testing and playing with it, and did tons of restarts which in your case many many more.
Looking forward for filtering functionality.

[lnikell]

If someone also has that issue and looking for a solution. There is another one that could help you have a preview link from WP for your customers but only display the already saved content. Add the following line to your functions.php file of WP theme:

add_filter( 'preview_post_link', 'the_preview_fix', 10, 2);

function the_preview_fix($preview_link, $post) {
    $slug = parse_url(get_permalink($post))["path"];
    return "https://vshn-preview.pixelpoint.io$slug";
}

[Khoded-Andy]

I have managed to fix this by installing and activating the Disable Gutenberg plugin and defining WP_POST_REVISIONS to 3:

define( 'WP_POST_REVISIONS', 3 );

Seems to have done the trick for published posts/pages.

Unbelievable that an issue like this has been known for so long and Gutenberg is even considered a MVP. Crazy. But here we are. Hopefully this fix works for others as well.