refactor: create share card from buffer #309
Conversation
|
✔️ Deploy Preview for satellytes-website-storybook ready! 🔨 Explore the source changes: 7756eac 🔍 Inspect the deploy log: https://app.netlify.com/sites/satellytes-website-storybook/deploys/61c47a4d97ffc00007544f97 😎 Browse the preview: https://deploy-preview-309--satellytes-website-storybook.netlify.app |
Gatsby Cloud Build Reportsatellytes.com-main 🎉 Your build was successful! See the Deploy preview here. Build Details🕐 Build time: 2m PerformanceLighthouse report
|
| createNodeField({ | ||
| node, | ||
| name: 'socialCard', | ||
| value: imagePath, | ||
| name: `socialCard`, |
There was a problem hiding this comment.
I think the name socialCardId would be a better fit, as this field represents the id and not the whole object.
There was a problem hiding this comment.
yeah I bounced that idea forth and back and now you convinced me ✨
| name: `socialCard`, | ||
| value: imagePath, | ||
| }); | ||
| const fileNode = await createFileNodeFromBuffer({ |
There was a problem hiding this comment.
This function creates AND links the node to the parent, right? A comment above would make this more clear, as I was just wondering at which place the actual connection between the Markdown/SyJob and the file is happening.
There was a problem hiding this comment.
I'll add the following comment to make things clear:
The util function
createFileNodeFromBufferfrom the official gatsby source plugingatsby-source-filesystem
creates a file node from a given file buffer. The value ofparentNodeIdcreates the necessary relationship
between the original node and the actual file node so it's not garbage collected.The actual foreign key relationship is resolved through
createSchemaCustomization
in gatsby-node.js for all node types thecreatePreviewCardis invoked for.
Ideally we create a plugin "create social cards" or such that would bundle this invocation (tied to onCreateNodde) and the fk lookup which is tied to createSchemaCustomization. Feels like a random split while it's technically required. That's our next small local plugin we can extract (and configure) 🙏
georgiee
force-pushed
the
gk-cards-buffer
branch
from
0d32c24 to
7756eac
Compare
I have created a Gatsby PR to fix this situation for the future and other lost souls:
gatsbyjs/gatsby#34313
This will change the social cards generation. Instead of writing directly into
public/which happily works we move closer to the gatsby way of doing things by creating an actual file node. We can do this withcreateFileNodeFromBufferfrom gatsby-source-filesystem.In order to save that node to our original node we can't just save the ID of the file in some fields. We need to tell gatsby about the foreign key relationship. This was usually done with the
myField___NODEnotation which is now deprecated.That's why we have to create a custom graphql schema addition which is also included in there.
Preview:
https://satellytescommain21751-gkcardsbuffer.gtsb.io/
Still works
We have swapped from file to buffer and the files are still work. You can see the switch after looking the the generated path
https://satellytescommain21751-gkcardsbuffer.gtsb.io/static/93ec6b3d62c7099eaea57bcea3aad6a6/468fb/social-card.jpg👍via metatags.io
Insights
Another thing that we struggled a lot with: The created files are fine, but only on the initial build. Any incremental build (repeated starts of gatsby) throw away the files and the value were null then. We tried so many things because we didn't know why this was happening while using standard gatsby functions.
In the end the solution is a single line:
parentNodeId: node.idwhich we pass in addition tocreateFileNodeFromBuffer. This solves the problem because now gatsby leaves the file as is. It seems they have been deleted before because gatsby though they are dangling files without an owner.The problematic thing here is
createRemoteFileNoderequires the parent id while thecreateFileNodeFromBufferhappily set null as a default. I think that's a bug worth to submit with this feedback.Here the referenced source for createFileNodeFromBuffer
https://github.com/gatsbyjs/gatsby/blob/b9f7749f36ace526bf0ba05b80731091cc0f2ceb/packages/gatsby-source-filesystem/src/create-file-node-from-buffer.js#L125
vs createRemoteFileNode
https://github.com/gatsbyjs/gatsby/blob/b9f7749f36ace526bf0ba05b80731091cc0f2ceb/packages/gatsby-source-filesystem/src/create-remote-file-node.js#L100
I also found this issue talking about a similar thing:
gatsbyjs/gatsby#4537
referencing this PR but it's not really explaining thinks even though Kyle asked for that:
https://github.com/gatsbyjs/gatsby/pull/6793/files#diff-b746772e1ad7ebd3e0f347c527f10886ffd1f7e74eb29ee957f1d7946241781aR108-R121
The actual foreign key documentation can be found here:
https://www.gatsbyjs.com/docs/node-creation/