I'm using the gatsby wordpress plugin to retrieve my posts from my hosted WP site. Locally, gatsby build works fine and all my ACF fields are retrieved. However, on my Netlify deploy the property local file seems to be null. With other fields ACF fields being retrieved correctly.
Here is my GraphQL query:
{
allWordpressPost {
edges {
node {
id
wordpress_id
date
guid
modified
slug
status
type
link
title
content
acf {
description
title
icon
link
image{
slug
title
localFile{
childImageSharp{
sizes{
sizes
}
resolutions{
srcSet
src
}
}
}
source_url
link
}
}
}
}
}
}
I have already implemented the nullify function fix in my Wordpress function file referred to in this ticket:
function nullify_empty($value, $post_id, $field)
{
if (empty($value)) {
return null;
}
return $value;
}
add_filter('acf/format_value_for_api/type=text', 'nullify_empty', 100, 3);
add_filter('acf/format_value_for_api/type=image', 'nullify_empty', 100, 3);
add_filter('acf/format_value_for_api/type=repeater', 'nullify_empty', 100, 3);
I have spotted where the build logs differ on Netlify when compared to my local log. This is where I think the issue lies:
Whereas locally it only show the following for the same warning:
:
And here an example of the ACF fields being logged on Netlify build log. Notice the localfile property:
My Gatsby environment:
System:
OS: macOS Sierra 10.12.6
CPU: x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.8.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 68.0.3440.106
Firefox: 59.0
Safari: 11.1.2
npmPackages:
gatsby: ^1.9.167 => 1.9.277
gatsby-image: ^1.0.55 => 1.0.55
gatsby-link: ^1.6.31 => 1.6.32
gatsby-pagination: ^1.1.0 => 1.1.0
gatsby-plugin-catch-links: ^1.0.14 => 1.0.14
gatsby-plugin-feed: ^1.3.15 => 1.3.15
gatsby-plugin-google-analytics: ^1.0.14 => 1.0.15
gatsby-plugin-manifest: ^1.0.10 => 1.0.12
gatsby-plugin-netlify: ^1.0.21 => 1.0.21
gatsby-plugin-netlify-cms: ^2.0.1 => 2.0.1
gatsby-plugin-nprogress: ^1.0.9 => 1.0.9
gatsby-plugin-offline: ^1.0.12 => 1.0.12
gatsby-plugin-react-helmet: ^1.0.2 => 1.0.8
gatsby-plugin-sharp: ^1.6.48 => 1.6.48
gatsby-plugin-sitemap: ^1.2.7 => 1.2.9
gatsby-plugin-twitter: ^1.0.14 => 1.0.14
gatsby-remark-autolink-headers: ^1.4.10 => 1.4.11
gatsby-remark-copy-linked-files: ^1.5.23 => 1.5.25
gatsby-remark-images: ^1.5.34 => 1.5.36
gatsby-remark-prismjs: ^1.2.24 => 1.2.24
gatsby-remark-responsive-iframe: ^1.4.16 => 1.4.16
gatsby-source-filesystem: ^1.5.10 => 1.5.11
gatsby-source-wordpress: ^2.0.93 => 2.0.93
gatsby-transformer-json: ^1.0.14 => 1.0.14
gatsby-transformer-remark: ^1.7.44 => 1.7.44
gatsby-transformer-sharp: ^1.6.27 => 1.6.27
npmGlobalPackages:
gatsby-cli: 1.1.58
gatsby-config.js:
const config = require("./data/SiteConfig");
const pathPrefix = config.pathPrefix === "/" ? "" : config.pathPrefix;
module.exports = {
pathPrefix: config.pathPrefix,
siteMetadata: {
siteUrl: config.siteUrl + pathPrefix,
rssMetadata: {
site_url: config.siteUrl + pathPrefix,
feed_url: config.siteUrl + pathPrefix + config.siteRss,
title: config.siteTitle,
description: config.siteDescription,
image_url: `${config.siteUrl + pathPrefix}/logos/logo-512.png`,
author: config.siteRssAuthor,
copyright: `${config.copyright.label} © ${config.copyright.year ||
new Date().getFullYear()}`
}
},
plugins: [
"gatsby-plugin-react-helmet",
{
resolve: `gatsby-source-wordpress`,
options: {
/*
* The base URL of the Wordpress site without the trailingslash and the protocol. This is required.
* Example : 'gatsbyjswpexample.wordpress.com' or 'www.example-site.com'
*/
baseUrl: `hiddenForSO`,
// The protocol. This can be http or https.
protocol: `http`,
// Indicates whether the site is hosted on wordpress.com.
// If false, then the asumption is made that the site is self hosted.
// If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
// If your site is hosted on wordpress.org, then set this to false.
hostingWPCOM: false,
// If useACF is true, then the source plugin will try to import the Wordpress ACF Plugin contents.
// This feature is untested for sites hosted on Wordpress.com
useACF: true,
excludedRoutes: ["/*/*/comments", "/yoast/**"],
normalizer: function({ entities }) {
return entities;
},
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {
// Class prefix for <pre> tags containing syntax highlighting;
// defaults to 'language-' (eg <pre class="language-js">).
// If your site loads Prism into the browser at runtime,
// (eg for use with libraries like react-live),
// you may use this to prevent Prism from re-processing syntax.
// This is an uncommon use-case though;
// If you're unsure, it's best to use the default value.
classPrefix: "language-",
// This is used to allow setting a language for inline code
// (i.e. single backticks) by creating a separator.
// This separator is a string and will do no white-space
// stripping.
// A suggested value for English speakers is the non-ascii
// character '›'.
inlineCodeMarker: null,
// This lets you set up language aliases. For example,
// setting this to '{ sh: "bash" }' will let you use
// the language "sh" which will highlight using the
// bash highlighter.
aliases: {},
},
},
],
},
},
"gatsby-transformer-json",
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 710
}
},
{
resolve: "gatsby-remark-responsive-iframe"
},
"gatsby-remark-prismjs",
"gatsby-remark-copy-linked-files",
"gatsby-remark-autolink-headers"
]
}
},
{
resolve: "gatsby-plugin-google-analytics",
options: {
trackingId: config.googleAnalyticsID
}
},
{
resolve: "gatsby-plugin-nprogress",
options: {
color: config.themeColor
}
},
"gatsby-plugin-sharp",
"gatsby-plugin-catch-links",
'gatsby-transformer-sharp',
"gatsby-plugin-twitter",
"gatsby-plugin-sitemap",
{
resolve: "gatsby-plugin-manifest",
options: {
name: config.siteTitle,
short_name: config.siteTitle,
description: config.siteDescription,
start_url: config.pathPrefix,
background_color: config.backgroundColor,
theme_color: config.themeColor,
display: "minimal-ui",
icons: [
{
src: "/logos/logo-192x192.png",
sizes: "192x192",
type: "image/png"
},
{
src: "/logos/logo-512x512.png",
sizes: "512x512",
type: "image/png"
}
]
}
},
{
resolve: `gatsby-plugin-netlify`,
options: {
headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria
allPageHeaders: [], // option to add headers for all pages. `Link` headers are transformed by the below criteria
mergeSecurityHeaders: true, // boolean to turn off the default security headers
mergeLinkHeaders: true, // boolean to turn off the default gatsby js headers
mergeCachingHeaders: true, // boolean to turn off the default caching headers
transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
generateMatchPathRewrites: true, // boolean to turn off automatic creation of redirect rules for client only paths
},
},
]
};
gatsby-node.js:
const path = require("path");
const _ = require("lodash");
const fs = require("fs");
const webpackLodashPlugin = require("lodash-webpack-plugin");
const siteConfig = require("./data/SiteConfig");
const {
createPaginationPages,
createLinkedPages
} = require("gatsby-pagination");
exports.createPages = ({ graphql, boundActionCreators }) => {
const { createPage } = boundActionCreators;
return new Promise((resolve, reject) => {
const indexPage = path.resolve("src/templates/index.jsx");
const postPage = path.resolve("src/templates/post.jsx");
const tagPage = path.resolve("src/templates/tag.jsx");
const categoryPage = path.resolve("src/templates/category.jsx");
const authorPage = path.resolve("src/templates/author.jsx");
resolve(
graphql(
`
{
allWordpressPost {
edges {
node {
id
wordpress_id
date
guid
modified
slug
status
type
link
title
content
acf {
description
title
icon
link
team_photo: image{
slug
title
localFile{
childImageSharp{
sizes{
sizes
}
resolutions{
srcSet
src
}
}
}
source_url
link
}
}
}
}
}
}
`
).then(result => {
if (result.errors) {
/* eslint no-console: "off" */
console.log(result.errors);
reject(result.errors);
}
// Creates Index page
createPaginationPages({
createPage,
edges: result.data.allWordpressPost.edges,
component: indexPage,
limit: siteConfig.sitePaginationLimit
});
// Creates Posts
createLinkedPages({
createPage,
edges: result.data.allWordpressPost.edges,
component: postPage,
edgeParser: edge => ({
path: edge.node.slug,
context: {
slug: edge.node.slug,
id: edge.node.id,
}
}),
circular: true
});
_.each(result.data.allWordpressPage.edges, edge => {
// Gatsby uses Redux to manage its internal state.
// Plugins and sites can use functions like "createPage"
// to interact with Gatsby.
createPage({
// Each page is required to have a `path` as well
// as a template component. The `context` is
// optional but is often necessary so the template
// can query data specific to each page.
path: `/${edge.node.slug}/`,
component: slash(pageTemplate),
context: {
id: edge.node.id,
},
})
})*/
})
);
})
};
exports.modifyWebpackConfig = ({ config, stage }) => {
if (stage === "build-javascript") {
config.plugin("Lodash", webpackLodashPlugin, null);
}
};