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