Preview does not retrieve new data
Closed this issue · 4 comments
MobyDigg commented
I have preview active with GatsbyCloud and WPEngine as backend host. Builds are fast (8-30 seconds) and previews builds are a bit slower (30 - 90 seconds). When I edit a post in the WP backend and hit "Preview Changes", a page appears but doesn't show an updated but the old page. The builds work fine, but after looking in the raw logs, there are some errors.
Questions:
- Why differ the builds in duration so significantly?
- In the demo I saw, that the preview window updated automatically after a few seconds – unfortunately, this doesn't work with my setup. Any ideas why?
- Any ideas, why the new data isn't appearing in the preview? Is this related to the non-nunllable fields (see log below)?
What I tried and didn't work:
- I waited until the preview build was done on GatsbyCloud, refreshed the preview page.
- I cleared the cache (first regular build, then preview build) and reinitiated the preview build.
- I tried different post-types, none worked.
gatsby-config:
{
resolve: `gatsby-source-wordpress-experimental`,
options: {
url: `https://mysite.com/graphql`,
verbose: true,
schema: {
queryDepth: 5,
typePrefix: `Wp`,
timeout: 30000,
},
develop: {
nodeUpdateInterval: 3000,
hardCacheMediaFiles: true,
},
debug: {
graphql: {
writeQueriesToDisk: true,
showQueryOnError: true,
showQueryVarsOnError: true,
copyQueryOnError: true,
panicOnError: false,
onlyReportCriticalErrors: true,
},
},
excludeFieldNames: [`blocksJSON`, `saveContent`],
type: {
Post: {
limit: process.env.NODE_ENV === `development` ? 35 : null,
},
Project: {
limit: process.env.NODE_ENV === `development` ? 35 : null,
},
Employee: {
limit: process.env.NODE_ENV === `development` ? 35 : null,
},
CoreParagraphBlockAttributes: {
exclude: true,
},
CoreParagraphBlockAttributesV2: {
exclude: true,
},
CorePullquoteBlockAttributes: {
exclude: true,
},
User: {
exclude: true,
},
UserRole: {
exclude: true,
},
Comment: {
exclude: true,
},
PostFormat: {
exclude: true,
},
Tag: {
exclude: true,
},
},
},
},
Raw log of the latest preview build:
17:33:33 PM:
success gatsby-source-wordpress diff schemas - 1.126s
17:33:34 PM:
success gatsby-source-wordpress ingest WPGraphQL schema - 1.983s
17:33:35 PM:
success createSchemaCustomization - 2.423s
17:33:36 PM:
⠀
17:33:36 PM:
info gatsby-source-wordpress Preview for project 7240 was updated at /en/projects/alpine-style-meets-modern-clarity/.
17:33:36 PM:
⠀
17:33:37 PM:
success Checking for changed pages - 0.010s
17:33:37 PM:
success source and transform nodes - 2.007s
17:33:38 PM:
info Total nodes: 2467, SitePage nodes: 126 (use --verbose for breakdown)
17:33:38 PM:
success createPages - 1.250s
17:33:38 PM:
success Checking for changed pages - 0.145s
17:33:39 PM:
success update schema - 1.155s
17:33:39 PM:
success onPreExtractQueries - 0.021s
17:33:40 PM:
success extract queries from components - 1.067s
17:33:41 PM:
success write out requires - 0.008s
17:33:41 PM:
success run static queries - 0.863s - 1/1 1.16/s
17:33:51 PM:
ERROR There was an error in your GraphQL query:
Cannot return null for non-nullable field WpProject.uri.
The field "WpProject.uri." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes" in gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.org/docs/schema-customization/#fixing-field-types
556 | }
557 |
558 | fragment PageFeaturedContentSectionFragment on WpPage_Flex_Content_FeaturedContentSection {
559 | sectionHeadline
560 | items {
561 | text
562 | internallLink {
563 | __typename
564 | ... on WpContentNode {
565 | __typename
> 566 | uri
| ^
567 | }
568 | }
569 | linkTarget
570 | linkText
571 | image {
572 | sourceUrl
573 | mediaDetails {
574 | height
575 | width
576 | }
File path: /usr/src/app/www/src/templates/Page.jsx
Url path: /
Plugin: none
ERROR There was an error in your GraphQL query:
Cannot return null for non-nullable field WpPost.uri.
The field "WpPost.uri." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes" in gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.org/docs/schema-customization/#fixing-field-types
556 | }
557 |
558 | fragment PageFeaturedContentSectionFragment on WpPage_Flex_Content_FeaturedContentSection {
559 | sectionHeadline
560 | items {
561 | text
562 | internallLink {
563 | __typename
564 | ... on WpContentNode {
565 | __typename
> 566 | uri
| ^
567 | }
568 | }
569 | linkTarget
570 | linkText
571 | image {
572 | sourceUrl
573 | mediaDetails {
574 | height
575 | width
576 | }
File path: /usr/src/app/www/src/templates/Page.jsx
Url path: /
Plugin: none
17:33:52 PM:
ERROR There was an error in your GraphQL query:
Cannot return null for non-nullable field WpPost.uri.
The field "WpPost.uri." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes" in gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.org/docs/schema-customization/#fixing-field-types
100 | fragment CompetenceServicesTeaserSectionFragment on WpCompetence_Flex_Content_ServicesTeaserSection {
101 | headline
102 | teaserHeadline
103 | teaserText
104 | teaserLinkText
105 | teaserLinkTarget
106 | teaserInternalLink {
107 | __typename
108 | ... on WpContentNode {
109 | __typename
> 110 | uri
| ^
111 | }
112 | }
113 | fade
114 | images {
115 | imageCaption
116 | image {
117 | sourceUrl
118 | mediaDetails {
119 | height
120 | width
File path: /usr/src/app/www/src/templates/Competence.jsx
Url path: /kompetenzen/innenarchitektur
Plugin: none
17:33:52 PM:
ERROR There was an error in your GraphQL query:
Cannot return null for non-nullable field WpProject.uri.
The field "WpProject.uri." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes" in gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.org/docs/schema-customization/#fixing-field-types
336 |
337 | fragment CompetenceProgressSliderSectionFragement on WpCompetence_Flex_Content_ProgressSliderSection {
338 | headline
339 | teaserHeadline
340 | teaserText
341 | teaserLink
342 | teaserInternalLink {
343 | __typename
344 | ... on WpContentNode {
345 | __typename
> 346 | uri
| ^
347 | }
348 | }
349 | teaserLinkText
350 | teaserBild {
351 | sourceUrl
352 | mediaDetails {
353 | height
354 | width
355 | }
356 | altText
File path: /usr/src/app/www/src/templates/Competence.jsx
Url path: /kompetenzen/innenarchitektur
Plugin: none
ERROR There was an error in your GraphQL query:
Cannot return null for non-nullable field WpProject.uri.
The field "WpProject.uri." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes" in gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.org/docs/schema-customization/#fixing-field-types
336 |
337 | fragment CompetenceProgressSliderSectionFragement on WpCompetence_Flex_Content_ProgressSliderSection {
338 | headline
339 | teaserHeadline
340 | teaserText
341 | teaserLink
342 | teaserInternalLink {
343 | __typename
344 | ... on WpContentNode {
345 | __typename
> 346 | uri
| ^
347 | }
348 | }
349 | teaserLinkText
350 | teaserBild {
351 | sourceUrl
352 | mediaDetails {
353 | height
354 | width
355 | }
356 | altText
File path: /usr/src/app/www/src/templates/Competence.jsx
Url path: /kompetenzen/innenarchitektur
Plugin: none
Setup
- WordPress hosted on WPEngine backend connected to GatsbyCloud
- Custom Post Type UI 1.8.1 for the creation of the custom post types
- WPGatsby v. 0.5.4
- WPGraphQL v. 0.14.0
- WPGraphQL for Advanced Custom Fields v. 0.3.5
- WP GraphQL Polylang v. 0.5.0
- gatsby-source-wordpress-experimental v. ^2.0.1
TylerBarnes commented
Hi @MobyDigg , the current preview experience is a little lacking. This is due to loading state and error handling across remote services not being fully handled. I have a new Preview PR here #252 which we're working on merging this week 🤞 Def follow that because it handles the remote state management which has been a big problem with the current preview implementation. In addition it fixes a bunch of cases where previews wouldn't be sourced into Gatsby properly.
TylerBarnes commented
Also, if you're interested you can test out the latest WP Preview by using gatsby-source-wordpress-experimental@3.0.0--preview.9 and installing this branch of WPGatsby in your WP instance gatsbyjs/wp-gatsby#50
MobyDigg commented
Hi @MobyDigg , the current preview experience is a little lacking. This is due to loading state and error handling across remote services not being fully handled. I have a new Preview PR here #252 which we're working on merging this week 🤞 Def follow that because it handles the remote state management which has been a big problem with the current preview implementation. In addition it fixes a bunch of cases where previews wouldn't be sourced into Gatsby properly.
Hi @TylerBarnes, thanks! That sounds promising! I am definitely looking forward to see that, as it will be a HUGE addition to the usability of the stack.
Also, if you're interested you can test out the latest WP Preview by using
gatsby-source-wordpress-experimental@3.0.0--preview.9and installing this branch of WPGatsby in your WP instance gatsbyjs/wp-gatsby#50
I will test that today! Thanks again.
TylerBarnes commented