[gatsby-source-wordpress] Preview for ACF flexible content not updating

[MobyDigg]

Problem:

The preview of the gatsby-source-wordpress isn't updating for flexible content elements.

My preview works for regular ACF fields or all other WordPress fields. The issue is, when I update a flexible content layout. Although the preview is produced and displays normally, it doesn't show the updated fields of the flexible content layout – just the old, published content.

Testing

• Testing was done locally with ngrok and verbose output, as suggested in the documentation. The raw remote node data shows the flexible content nodes but, as mentioned above, the old version. The node also shows a correct, updated date of modification. Besides the flexible content node, the preview works as wished.
• Other fields are shown updated in the node (eg. page title or other simple ACF fields). Also the revisions show up in the WordPress backend.
• After saving the page, then hitting the preview button, the preview shows the update. But not, when I only press "Preview Changes".

Errors

The following error is displayed in the terminal output:

error Error loading a result for the page query in "92-autosave-v1" / "92-autosave-v1". Query was not run and no cached result was found. ENOENT: no such file or directory, open '/Users/myname/dev/gatsby/website-name/public/page-data/92-autosave-v1/page-data.json'

  Error: ENOENT: no such file or directory, open '/Users/myname/dev/gatsby/website-name/public/page-data/92-autosave-v1/page-  data.json'

What I tried

• Conditional chaining in all respective files

• wp-config.php has no line such as define( 'WP_POST_REVISIONS', FALSE );

• gatsby-node.js query for allWpContentNode has no filters and no sorting going on:

exports.createPages = async ({ actions, graphql, reporter }) => {
  const {
    data: {
      allWpContentNode: { nodes: contentNodes },
    },
  } = await graphql(/* GraphQL */ `
    query ALL_CONTENT_NODES {
      allWpContentNode {
        nodes {
          nodeType
          id
          status
          slug
          ... on WpCompetence {
            language {
              slug
            }
            contentType {
              node {
                name
              }
            }
          }
          ... on WpPage {
            language {
              slug
            }
            contentType {
              node {
                name
              }
            }
          }
          ... on WpPost {
            language {
              slug
            }
            contentType {
              node {
                name
              }
            }
          }
          ... on WpProject {
            language {
              slug
            }
            contentType {
              node {
                name
              }
            }
          }
          ... on WpJob {
            language {
              slug
            }
            contentType {
              node {
                name
              }
            }
          }
        }
      }
    }
  `);

  const templates = getTemplates();
  const contentTypeTemplateDirectory = `./src/templates/`;
  const contentTypeTemplates = templates.filter((path) =>
    path.includes(contentTypeTemplateDirectory)
  );

  const contentNodesFiltered = contentNodes.filter(item => item.nodeType !== "Employee" && item.nodeType !== "MediaItem")

  await Promise.all(
    contentNodesFiltered.map(async (node, i) => {
      const {
        id,
        slug,
        language,
        nodeType,
        contentType: {
          node: { name },
        },
      } = node;

      const templatePath = `${contentTypeTemplateDirectory}${nodeType}.jsx`;

      const contentTypeTemplate = contentTypeTemplates.find(
        (path) => path === templatePath
      );

      if (!contentTypeTemplate) {
        reporter.panic(
          `[using-gatsby-source-wordpress] No template found at ${templatePath}\nfor single ${nodeType} ${
            node.id
          } with path ${
            node.uri
          }\n\nAvailable templates:\n${contentTypeTemplates.join(`\n`)}`
        );
        reporter.log(``);
        dd(node);
        reporter.log(``);
      }

      let edgePath = "";

      if (slug === "home") {
        edgePath = localPath.createPath(localeDirectories, language.slug, []);
      } else if (name === "page") {
        edgePath = localPath.createPath(
          localeDirectories,
          language.slug,
          [],
          slug
        );
      } else {
        edgePath = localPath.createPath(
          localeDirectories,
          language.slug,
          [`${name}`],
          slug
        );
      }

      await actions.createPage({
        component: resolve(templatePath),
        path: edgePath,
        context: {
          id,
          slug,
          lang: language.slug,
          next: (contentNodes[i + 1] || {}).id,
          prev: (contentNodes[i - 1] || {}).id,
        },
      });
    })
  );
};

Page query reads as follows:

export const pageQuery = graphql`
  query pagePageQuery($id: String!, $lang: String!) {
    page: wpPage(id: { eq: $id }) {
      title
      databaseId
      flex {
        content {
          __typename
          ...PageHeroSectionFragment
          ...PageHeroSectionSliderFragment
          ...PageServicesTeaserSectionFragment
          ...PageBasicSliderSectionFragment
          ...PageTeaserSectionFragment
          ...PageProgressSliderSectionFragement
          ...PageRelatedProjectsSectionFragment
          ...PageRelatedStorySectionFragment
          ...PageTextItemsColumnsSectionFragment
          ...PageJobOverviewSectionFragment
          ...PageContactPersonsSectionFragment
          ...PageLocationSectionFragment
          ...PageInquirySectionFragment
          ...PageHeadlineSectionFragment
          ...PageTextSectionFragment
          ...PageTextAndImagesColumnSectionFragment
          ...PageProjectOverviewSectionFragment
          ...PageCompetenceSectionFragment
          ...PageTeamOverviewSectionFragment
          ...PageTimelineSliderSectionFragement
          ...PageNewsOverviewSectionFragment
          ...PageCurrentNewsTeaserSectionFragment
          ...PageFeaturedContentSectionFragment
          ...PageDynamicContentSectionFragment
          ...PageJobApplicationSectionFragment
        }
      }
    }
    relatedProjects: allWpProject(
      filter: {
        id: {ne: $id},
        language: {slug: {eq: $lang}},
        title: { ne: "DO NOT DELETE" },
      }
      ) {
      edges {
        ...
      }
    }
    relatedStories: allWpPost(
      filter: {
        id: {ne: $id},
        language: {slug: {eq: $lang}},
        title: { ne: "DO NOT DELETE" },
      }) {
      nodes {
        ...
      }
    }
    employeesDE: allWpEmployee (
      filter: {title: {nin: ["DO NOT DELETE", "Karriere"]}, language: {slug: {eq: "de"}}},
      sort: {order: DESC, fields: date}
    ) {
      edges {
        ...
      }
    }
    employeesEN: allWpEmployee (
      filter: {title: {nin: ["DO NOT DELETE", "Career"]}, language: {slug: {eq: "en"}}},
      sort: {order: DESC, fields: date}
    ) {
      edges {
        node {
          ...
        }
      }
    }
  }
`

Setup

• gatsby-source-wordpress 4.0.1,
• gatsby 2.25.3,
• WP Gatsby 1.0.1,
• WP GraphQL 1.1.3 and
• WordPress 5.6.1.

Question

Is there anything I should setup to make changes in flexible content types available in the preview?

Note

I did not know where to post this, so there is the same issue here: https://github.com/gatsbyjs/gatsby/issues/29570

[MobyDigg]

@jasonbahl do you have any idea, what this might be?

[jasonbahl]

@MobyDigg are you using the Classic Editor or Gutenberg?

If you're using Gutenberg with Advanced Custom Fields, there's currently a core Gutenberg issue that prevents meta from being previewed, even in non-headless WordPress. See: https://github.com/WordPress/gutenberg/issues/16006#issuecomment-657965028

[MobyDigg]

@jasonbahl I disabled Gutenberg through the plugin "Disable Gutenberg". Does that create a problem?

[jasonbahl]

@MobyDigg hard to say.

Can you test your query in the GraphiQL IDE in the WP-Admin and see if you can query the flex field data properly for a preview post?

You can replicate in WordPress like so:

• Create a new post
• populate the flex fields
• publish the post
• make some changes to the flex fields
• do not click update, just click "preview"
• Then test in GraphiQL in the wp-admin, like so (changing your Post ID and ACF fields to match your schema)

{
  post(id: 1427, idType: DATABASE_ID, asPreview: false) {
    ...PostFields
  }
  preview: post(id: 1427, idType: DATABASE_ID, asPreview: true) {
    ...PostFields
  }
}

fragment PostFields on Post {
  id
  title
  status
  flexTestYo {
    flexTest {
      ... on Post_Flextestyo_FlexTest_Somethings {
        textBox
      }
    }
  }
}

You can see I'm able to see my published value "test" in my flex field, and the "preview" value when I query the post as a preview.

From what I can tell, things are working fine in WPGraphQL with previewing flex fields while using the classic editor.

If you're also able to see your preview data in WPGraphQL directly, but not in Gatsby, then I would think this is either a WPGatsby bug or a Gatsby Source WordPress bug.

If you're not able to see the preview data directly in WPGraphQL, then perhaps there is indeed something more we need to look into on this side of things.

[jasonbahl]

Closing as there's not been a reply since my last attempt to reproduce.