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.
@nyquest How do you handle union types if the content changes?
Imagine you don’t want to use the slider any more and you remove it from all your articles. The union type will then have a different name: STRAPI__COMPONENT_SHARED_MEDIASTRAPI__COMPONENT_SHARED_QUOTESTRAPI__COMPONENT_SHARED_RICH_TEXTUnion
