gatsby-source-strapi
gatsby-source-strapi copied to clipboard
strapi
Build breaks trying to display RichText changes (richtext.data = null)
Hi there,
I hope this is the right place to address this issues, maybe it has to do with another plugin I am using, currently not sure. So I start here, because I can't find anything on the web regarding this.
My problem is around previewing richtext content updates, AFTER they are initially filled. So in a single-type (/previewtest), I have a richtext-field and when I initially put content in there and hit the blue gatsby-preview button, the (incremental) build is fine and shows as deployed. All as intended.
But when I go back to Strapi and change the richtext field again (bold some text, or add another paragraph) and hit the preview button again, the build seems to be fine (Gatsbycloud says its built and deployed) but the preview shows as plain text and the console is throwing the following error;
XHR GET https://preview-exampleproject.gtsb.io/usr/src/app/www/public/page-data/previewtest/page-data.json [HTTP/2 404 Not Found 520ms]
This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.
Preview build error
There was an error when building the preview page for this page ("/previewtest/").
TypeError: Cannot read property 'richtext' of null
at PreviewTest (/usr/src/app/www/.cache/page-ssr/routes/webpack:/exampleproject/src/pages/previewtest.js:17:43)
at d (/usr/src/app/www/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
at bb (/usr/src/app/www/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
at a.b.render (/usr/src/app/www/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
at a.b.read (/usr/src/app/www/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
at renderToString (/usr/src/app/www/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
at Object.staticPage [as default] (/usr/src/app/www/.cache/page-ssr/routes/webpack:/exampleproject/.cache/static-entry.js:295:22)
at _bluebird.default.map.concurrency (/usr/src/app/www/node_modules/gatsby/src/utils/worker/child/render-html.ts:162:11)
"previewtest" is my single-type which holds the richtext data. "exampleproject" is my projectname in gatsby.
Further information:
It all works as intended, if I change any other field from that single-type (previewtest). With changes in media-fields and/or non-html text, it all builds a correct preview and shows the content changes in the frontend.
Query:
{ strapiPreviewtest { updatedAt headline richtext { data { id richtext childMarkdownRemark { html } } } image { alternativeText localFile { url childImageSharp { gatsbyImageData(aspectRatio: 1.7) } } } } }
frontend rendering:
<div dangerouslySetInnerHTML={{__html: previewtest.richtext.data.childMarkdownRemark.html}} />
system: Strapi v4.1.9 (heroku) Gatsby v4.13.0 (gatsby cloud)
(some) plugins I am using;
- gatsby-source-strapi
- gatsby-transformer-remark
- strapi-plugin-gatsby-preview
Can someone point me towards the right direction? Is this a cache problem? Does it has to do with the content-sync of gatsbycloud? Or strapi-chaching? Or dangerouslySetInnerHTML? Thank you for any help on this.
Hi again,
I built a test case based on this official strapi video: https://www.youtube.com/watch?v=XQ1SYI684VA Step by step and it all works perfectly. Until I change a richtext field and make a paragraph bold (or any other change in a richtext field).
Incremental builds on gatsby cloud are NOT working with data-updates from strapi, even without modifiying your strapi-gatsby-starter-blog. If you change an image or the short headline field of a page, its fine. But not rich text fields. Did anyone test this https://github.com/strapi/starters-and-templates/tree/main/packages/starters/gatsby-blog and can confirm that this is not working as intended?
thank you!
Hi again,
I built a test case based on this official strapi video: https://www.youtube.com/watch?v=XQ1SYI684VA Step by step and it all works perfectly. Until I change a richtext field and make a paragraph bold (or any other change in a richtext field).
Incremental builds on gatsby cloud are NOT working with data-updates from strapi, even without modifiying your strapi-gatsby-starter-blog. If you change an image or the short headline field of a page, its fine. But not rich text fields. Did anyone test this https://github.com/strapi/starters-and-templates/tree/main/packages/starters/gatsby-blog and can confirm that this is not working as intended?
thank you!
Did you manage to solve this problem?
Not yet, spent SO much time on this. I'll post it here if I'll ever crack the case.
Having the same issue. Can't use caching in production.
It doesn't have to be a change in the RichText content, any change the parent will cause it to return null on content field.
@remidej Not sure if this helps but the error behavior is different if the field belongs to a single-type vs collection-type.
Collection types when updated will produce null Single types when updated keep old value
Hello, we're currently working on finding a fix to this issue. Could you try installing gatsby-source-strapi from this github branch and let us know if it fixes your issue:
yarn add strapi/gatsby-source-strapi#hotfix/richtext-refresh
# or
npm install strapi/gatsby-source-strapi#hotfix/richtext-refresh
⚠️ Please be aware that it includes a breaking change though, as you won't be able to query the children node inside a richtext node. We'll be working on fixing this soon
@remidej I just commented out the same line from the normalize.js and it appears to have fixed the issue with no side effects for myself; although I use the showdown package to parse the markdown so I'm not certain if it will cause issues with others using the remark plugin. I'll double check tomorrow but for now that appears to have been the problem.
So after further testing it seems to have fixed the issue with null values on collection types.
The issue with the single types appears to a different problem and imo outside the scope of this ticket. That issue doesn't just affect richtext fields and is caused from the way localization is handled on single types. #341
Additionally I would recommend adding a prepare script to the package.json as npm 8 and possibly other versions won't put the files where they need to be when building from git.
Relating to @MRDRMUFN's last note, for anyone running into this error when installing strapi/gatsby-source-strapi#hotfix/richtext-refresh from github:
Error: Cannot find module './lib/gatsby-node'
I worked around it by adding this to my package.json:
"scripts": {
"postinstall": "cd node_modules/gatsby-source-strapi && yarn && yarn build",
...
}
@remidej When can we expect to merge the changes into the official plugin? :)
sadly gatsby cloud with incremental builds is useless atm with strapi - is there any plan when this will be fixed in production?
hi, I was able to make incremental builds work on gatsby-cloud with this alternative plugin from @relate-app.
https://github.com/relate-app/gatsby-source-strapi-graphql
I had to rewrite some queries and restructure things here and there, but it mostly worked out of the box and fixed all problems I had with this 'official' plugin here.
"gatsby": "^4.17.0"
"@strapi/strapi": "4.2.2"
I haven't tried this with newer versions of strapi and gatsby.
Hello, we just released version 2.1.0-alpha.0 to fix this issue. Please try it and let us know if you notice any issue, so we can ship this fix as a stable soon. Ping @ianspringer :)
2.1.0-alpha.0
After installing the new version, an error occurred and returns null in local file in photos. With various tests, it turned out that when strapi works locally, photos that are on the computer and not on aws work correctly.
Also, I think with the new updated image changes, there needs to be some better error handling? Now if an image is missing it throws a non-descript error and stops processing all together spamming console with 100 error messages for localfile fields missing.
same here version 2.1.0-alpha.0 solves the refreshing issues I was also having. But with this version for some reason the images of my articles no longer work (the localFile is returned as null). All my other images work fine however.
My issue with the null localFile for my Articles is resolved if I revert the commit to extract the images for relationships, which can be found here: https://github.com/strapi/gatsby-source-strapi/pull/344/commits/630c9496dd696b3911dc3a0bee0d2652bc6eb83b
@remidej not sure why this was added but it seems it has some side-effects
@rsaarloos I forked and did the same if you need localfile downloads. Otherwise you can use the skipFileDownloads in the strapi config to ignore localfile nodes, but that has its own host of issues. I am confused by the changes as well since there was a comment there noting the issues/side effects caused by extracting images via relations and it seems like the code was uncommented without any adjustments.
2.1.0-alpha.0 appears to fix the refreshing issue. can someone re-comment the localfile downloads and release version 2.1.0?
I am also having the same issue, I have tried to fix it by using 2.1.0-alpha.0 but it causes my singleTypes to disappear.
