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.
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?
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.
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.
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.
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.