If you are familiar with our blog you must have seen that we've released a series of tutorials on how to make blogs using Strapi with a lot of frontend frameworks: React, Next.js, Vue, Nuxt.js or Angular.
The tutorial doesn’t work with Strapi 4. Maybe a title update could be better
Thanks for the heads-up! We are planning to update it as soon as we have the new gatsby-source-strapi plugin, stay tuned!
It feels like there are just too many copy and paste happening in this blog post, too many in fact I have to stop the half way and reply to this thread to express it. Is it just me?
Maybe add a link in the blog to the repo on GitHub? starters-and-templates/packages/starters/gatsby-blog at main · strapi/starters-and-templates · GitHub
I agree with madwyn.
Could you at least explain a little bit, especially the graphql in the blocks-renderer.js?
Thanks for the tutorial. I can load all 5 articles in index.js but the image thumbnails all goes black without rendering. Other things work and show correctly.
How do we handle the Blocks fragment (in block-renderer.js) so the query doesn’t fall over if only some of the blocks are being used?
Hi
As this is unanswered, here some hints:
Take a look at the strapi Components inside strapi, mainly the Category “Shared” (Media, Quote, Rich Text, Slider) as block-renderer.js bases on those types.
The BlocksRenderer creates a array of the react components (BlockRichText, BlockMedia, BlockQuote, BlockSlider) according to the strapi data-typename (STRAPI__SHARED_) as defined in componentsMap.
The graphql query exports a reusable graphql fragment (set of fields) which is then used in pages/about.js and templates/article-post.js (…Blocks is just replaced which this fragment)
You can use GraphiQL (http://localhost:8000/_graphql) to explore/define the query you need (the STRAPI types and fields are defined by the strapi plugin. The union type (STRAPI__COMPONENT_SHARED_MEDIASTRAPI__COMPONENT_SHARED_QUOTESTRAPI__COMPONENT_SHARED_RICH_TEXTSTRAPI__COMPONENT_SHARED_SLIDERUnion) is also defined by strapi. It matches to the strapi instance shipped in the starter, these are custom types and might need to be adjusted.
Hope this helps.
Best
I found only one, and very poor solution.
About page as example.
{
strapiAbout {
title
internal {
content
}
}
}
then JSON.parse(internal.content).
then work with JSON resulted, render markdown and so on…
no …fragment sugar for us.
Custom image component and/or image preprocessing are also needed.
WIP screenshot:
This consistently fails with the same or similar error after going through all the steps;
./node_modules/slick-carousel/slick/slick-theme.css
TypeError: (0 , _schemaUtils.validate) is not a function
No idea how to fix this. I found that one of the node modules mini-css-extract-plugin has the offending call to a function which apparently isn’t a function.
The article provides code from the starter template enriched by the “copy this there” guidance. Thanks for the template, but the article is not a tutorial. I don’t know what any of the snippets does, and consequently, I don’t know how to customize it.
Hello, did you find the solution, because I have the same error
I tried to run installation from the project
npx create-strapi-starter my-project gatsby-blog
And got this error
The project source code and folders are present, but gatsby develop failed to run.
[develop:backend ] TypeError: minimatch is not a function
Like all documentations, versions information is important. This page is the “goto” link from both Gatsby site and Strapi. I think it worths a bit update and polishing.