Gatsby: Updating WP REST API fields/values does not update GraphQL nodes

[jesstucker]

Description

New to Gatsby.

When I update my WP REST API (using ACF), gatsby develop runs GraphQL, which does not recognize the REST API updates... for several hours.

Sounded like a backend caching issue so I cleared all of those. No difference.

When I check the REST API endpoint in the browser, everything is instantly up to date. But GraphQL doesn't know about it.

So I cleared the .cache directory. No difference.

I thought maybe something was wrong with the gatsby-source-wordpress plugin, so I wrote my own based on the docs.... It worked! But only initially. I've since tested replacing some field values. The old ones still show up. Then a few hours went by and for some reason the new updates showed up.

Am I missing something here?

Steps to reproduce

1. Configure gatsby-source-wordpress in gatsby-config.js to your wordpress api endpoints, e.g.,

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "gatsbyjsexamplewordpress.wordpress.com",
        protocol: "http",
        hostingWPCOM: false,
        useACF: true,
        includedRoutes: [
          "**/*/*/categories",
          "**/*/*/posts",
          "**/*/*/pages",
          "**/*/*/media",
          "**/*/*/tags",
          "**/*/*/taxonomies",
          "**/*/*/users",
        ],
      },
    },
  ],
}

Make a query in a React component:

{
  allWordpressPage(filter: {slug: {eq: "my-nice-page"}}) {
    edges {
      node {
        acf {
          intro{
            header{title}
          }
        }
      }
    }
  }
}

1. Run gatsby develop. It will run correctly and process all expected nodes.
2. Make a change to your Wordpress REST API. You changed "header" to "hero". Give hero a new value in the edit page.
3. Visit your API endpoint in a browser. Verify that the API now returns those changes.
4. Update your React side GraphQL queries.

{
  allWordpressPage(filter: {slug: {eq: "my-nice-page"}}) {
    edges {
      node {
        acf {
          intro{
            hero{title}
          }
        }
      }
    }
  }
}

Expected result

GraphQL reads the API endpoint and updates the graph based on your changes to the REST API

Actual result

GraphQL reads the API endpoint and only gives old REST API fields values, reflected in the nodes. Upon reading query in React component, throws error that no such node exists.

Environment

System:
OS: macOS 10.14.1
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.9.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.2.0 - /usr/local/bin/npm
Languages:
Python: 2.7.15 - /usr/local/bin/python
Browsers:
Chrome: 71.0.3578.98
Firefox: 63.0.1
Safari: 12.0.1
npmPackages:
gatsby: ^2.0.76 => 2.0.91
gatsby-cli: ^2.4.8 => 2.4.8
gatsby-image: ^2.0.20 => 2.0.26
gatsby-plugin-manifest: ^2.0.9 => 2.0.13
gatsby-plugin-offline: ^2.0.16 => 2.0.21
gatsby-plugin-react-helmet: ^3.0.2 => 3.0.5
gatsby-plugin-sass: ^2.0.7 => 2.0.7
gatsby-plugin-sharp: ^2.0.14 => 2.0.17
gatsby-source-filesystem: ^2.0.8 => 2.0.16
gatsby-source-wordpress: ^3.0.21 => 3.0.25
gatsby-transformer-sharp: ^2.1.8 => 2.1.10
npmGlobalPackages:
gatsby-cli: 2.4.8

[sidharthachatterjee]

Then a few hours went by and for some reason the new updates showed up.

@jesstucker Could you link to a simplified reproduction of this?

From what I understand, WordPress data is cached by the plugin and restarting gatsby develop or deleting the .cache directory should get you the latest data from the API

[gatsbot[bot]]

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!

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

[jesstucker]

Then a few hours went by and for some reason the new updates showed up.

@jesstucker Could you link to a simplified reproduction of this?

From what I understand, WordPress data is cached by the plugin and restarting gatsby develop or deleting the .cache directory should get you the latest data from the API

Sorry, I can't really reproduce this given so many parts of the project require authorization. It's still an issue but I guess we will have to deal with it.

[gatsbot[bot]]

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.

Thanks again for being part of the Gatsby community!

[Vikingjonsson]

A bit late with this response and hopefully your problem is already solved.

Maybe something is missing in the WordPress setup. I guess you know this and already done it, but just to be sure or help others coming here.

In the comments in the example code for gatsby-source-wordpress plugin it says "Must be using V3 of ACF to REST to include these routes".
This one: ACF to REST API (v.3+). I guess it won't work as expected if it works at all with other plugins or versions.

It also says that "This feature is untested for sites hosted on wordpress.com."
By looking at your baseUrl this might be the problem:
baseUrl: "gatsbyjsexamplewordpress.wordpress.com"

Sometimes you needed to refresh the /___grapglq page to be able to query the new data.

[kepi0809]

I'm experiencing the same issue, if you could fix it and find the source of the problem it would be nice if you could share it 👍

I'm experiencing the same thing, when I update a post and make gatsby develop it gets the old data of the post some kind of caching mechanism in gatsby-source-wordpress I suppose. (even when I do it with gatsby clean && gatsby develop.

And the rest endpoint is ofc updated so the source of the problem is probably on the gatsby side and not the wp side. :/

[jacknugent]

I am also getting the same issue. I noticed if I deploy to production by building and deploying to S3 then the problem does not happen, so it's only a development issue.

It's definitely a problem with Gatsby, not WP because WP changes I can see in /wp-json/wp/v2/posts immediately, I just can't see it while developing locally in Gatsby.

[jacknugent]

I figured out my problem! I wasn't flushing the cache in WP. I am hosting on Pantheon so for me that was under Settings -> Pantheon Page Cache -> Clear Cache.