Wordpress and gatsby cache/refesh wordpress content

[nelsonmiew]

Hello,
I'm trying to build a gatsby solution with Wordpress CMS content.
When I update Posts on WordPress, i need to restart the gatsby server to get new content on gatsby solution.

What's the best solution to keep content updated on frontend gatsby? thanks.

[jonniebigodes]

@nelsonmiew i'm inclined to believe that you're using gatsby with the appropriate plugin gatsby-source-wordpress, correct? That plugin is intented only to fetch items you've configured during the build process. When you update, add or delete the content. You'll have to restart the development server. A while ago there was a addition to gatsby that would allow you to refresh the data, more on that here, see if this helps in with your issue.

Feel free to provide feedback so that we can close this issue or continue to work on it until we find a suitable solution.

[DmacTorstar]

@jonniebigodes I'm having this same issue.
It seems that this __refresh endpoint is extremely useful, and should be more prominent, and easier to trigger. Perhaps gatsby should have a configuration option to refresh the data on every page reload, or on every build?
This would be invaluable for when a developer is building out the UI and the content model in parallel, because currently the flow of updating/debugging the model and adding/updating data in the CMS is extremely tedious and painful.
I was almost ready to give up on gatsby until I found this tidbit, and I'm so glad I did, because it's exactly what I was looking for.

Currently, the workaround is just to add axios.post('/__refresh') at the top of the index.js file so that it is called on every refresh, but I think this could be handled more elegantly and in a way that is more obvious in the documentation.

[jonniebigodes]

@DmacTorstar from what i remember this was introduced to address this type of issue, it's a bit cumbersome i understand, but when it was added, it was to allow plugins to fetch content like this one and other sources. Fetching the data at every page load would defeat a bit the purpose of the plugin. I think a better approach would probably be refetch at regular intervals something like gatsby-source-graphql does here.

[DmacTorstar]

@jonniebigodes Yes I think its a step in the right direction. Having a refresh interval would be good, but a manual way to do it would be great also while developing. In production, there is much less of a need to refresh the data so often. But during development, even 60 seconds is kind of a long time when you are going back and forth editing the data.

[jonniebigodes]

@DmacTorstar the refresh interval would be applied to development mode. For production mode i believe the safe bet would be the de facto stance on how gatsby does it. As it's really hard for gatsby to know what changed and that could lead to more bugs and inconsistencies in the data.

[leepowelldev]

Just been playing with the __refresh hook - very handy. Thanks. Seems to work great with Wordpress except on trashing/deleting pages ... even when they're deleted via the admin area and non-existant in the DB the graphql query is still returning them upon refresh as being published. Even in GraphiQL I can query and see them.

[leepowelldev]

By the way, I'm using refresh from my wordpress theme like so:

function refresh_gatsby() {
  $http = new WP_Http();
  $http->post('http://host.docker.internal:8002/__refresh');
}
add_action('wp_insert_post', 'refresh_gatsby');

[leepowelldev]

After some investigation last night it seems that Gatsby (maybe this is the responsibility of gatsby-source-wordpress) quite happily adds new nodes upon refresh but isn't removing nodes that are not returned from the refresh of source data. I've managed to get this working as a POC for now by utilising the normalizer callback in gatsby-config.js:

normalizer: function({ entities, deleteNode, getNode, getNodes }) {
  const currentNodeIds = getNodes()
    .filter(node => node.internal.owner === 'gatsby-source-wordpress')
    .map(entity => entity.id);

  const nextNodeIds = entities.map(entity => entity.id);

  const deletedNodeIds = currentNodeIds.filter(
    x => !nextNodeIds.includes(x)
  );

  deletedNodeIds.forEach(id => {
    const node = getNode(id);
    deleteNode({ node });
  });

  return entities;
},

I've only tested this with removing pages/posts from Wordpress - so not sure how it'd adapt to other node types - but I'm thinking that shouldn't Gatsby be doing this internally?

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[sriinnu]

This is what I have in my functions.php file. When a page or post or a menu is updated, there is a refresh.

add_action('save_post', 'reload_gatsby', 10, 11);
function reload_gatsby($post_ID, $post)
{
	// $post_id = $post["post_ID"];
	if (!(wp_is_post_revision($post) || wp_is_post_autosave($post))) {
		$curl_refresh_gatsby = curl_init('http://localhost:8000/__refresh');
		curl_setopt($curl_refresh_gatsby, CURLOPT_POST, true);
		$response_2 = curl_exec($curl_refresh_gatsby);

	}
}

[Tasemu]

This is what I have in my functions.php file. When a page or post or a menu is updated, there is a refresh.

add_action('save_post', 'reload_gatsby', 10, 11);
function reload_gatsby($post_ID, $post)
{
	// $post_id = $post["post_ID"];
	if (!(wp_is_post_revision($post) || wp_is_post_autosave($post))) {
		$curl_refresh_gatsby = curl_init('http://localhost:8000/__refresh');
		curl_setopt($curl_refresh_gatsby, CURLOPT_POST, true);
		$response_2 = curl_exec($curl_refresh_gatsby);

	}
}

This is perfect, however what would you do in production when you want the gatsby front-end to rebuild on wordpress changes? I've not found an answer anywhere for this. :(

[nelsonmiew]

Well, I have hosted my project in Netlify. It provides a link to rebuild the entire website. You can use the code from @Tasemu (not tested yet!)