Errors encountered attempting to shadow homepage - starter minimal blog

[gcomlish]

Hi there, first of all I have been very please with @LekoArts ' starter minimal blog theme. Its been a joy to work with.

I have encountered a problem making a small change and after two full days of time slippage I thought I would reach out for help.

Goal: I want to change homepage-query.tsx to include the last 10 posts rather than the last three. The reasoning here may seem to contradict the concept of a minimal layout with a lot of whitespace. However, as a personal blog site, I want it to be easier to see a larger range of my posts so that people can see what I am working on without navigating further.

This should be really easy to achieve if I shadow that file and change :
query {
allPost(sort: { fields: date, order: DESC }, limit: 3) {
...
There are several problems with this.
The first is that "Exported queries are only executed for page components." - so I cannot just shadow the file and change the limit from 3 to 10.

Following the message, I understand that I need to use useStaticHook, which I have also done:
import { useStaticQuery, graphql } from "gatsby"

const HomepageQuery = () => {
const data = useStaticQuery(graphqlquery { allPost(sort: { fields: date, order: DESC }, limit: 10) { nodes { slug title date(formatString: "MMMM DD, YYYY") excerpt timeToRead description tags { name slug } } } })

return data

}

But this doesnt work either.

1. It seems to mean that I must also shadow the file where this query gets used, like so:
   /** @jsx jsx */
   import { jsx } from "theme-ui"
   import { Link } from "gatsby"
   import Layout from "@lekoarts/gatsby-theme-minimal-blog/src/components/layout"
   import Title from "@lekoarts/gatsby-theme-minimal-blog/src/components/title"
   import Listing from "@lekoarts/gatsby-theme-minimal-blog/src/components/listing"
   import List from "@lekoarts/gatsby-theme-minimal-blog/src/components/list"
   import useMinimalBlogConfig from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config"
   import useSiteMetadata from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-site-metadata"
   import replaceSlashes from "@lekoarts/gatsby-theme-minimal-blog/src/utils/replaceSlashes"
   import { visuallyHidden } from "@lekoarts/gatsby-theme-minimal-blog/src/styles/utils"
   import Seo from "@lekoarts/gatsby-theme-minimal-blog/src/components/seo"
   import Hero from "@lekoarts/gatsby-theme-minimal-blog/src/texts/hero.mdx"
   import Bottom from "@lekoarts/gatsby-theme-minimal-blog/src/texts/bottom.mdx"
   import HomepageQuery from "../../gatsby-theme-minimal-blog-core/templates/homepage-query"

const Homepage = () => {
const { basePath, blogPath } = useMinimalBlogConfig()
const { siteTitle } = useSiteMetadata()

// Fetching data using HomepageQuery component
const data = HomepageQuery({ formatString: "MMMM DD, YYYY" })
const posts = data.allPost.nodes

return (
    <Layout>
        <h1 sx={visuallyHidden}>{siteTitle}</h1>
        <section sx={{ mb: [5, 6, 7], p: { fontSize: [1, 2, 3], mt: 2 }, variant: `section_hero` }}>
            <Hero />
        </section>
        <Title text="Latest Posts">
            <Link to={replaceSlashes(`/${basePath}/${blogPath}`)}>Read all posts</Link>
        </Title>
        <Listing posts={posts} showTags={false} />
        <List>
            <Bottom />
        </List>
    </Layout>
)

}

export default Homepage
export { Seo }

This then gives me an error when I run gatsby develop:
One unhandled runtime error found in your files. See the list below to fix it:

Error in function throwOnInvalidObjectType in ./node_modules/react-dom/cjs/react-dom.development.js:14887
Objects are not valid as a React child (found: object with keys {allPost}). If you meant to render a collection of children, use an array instead.

Can someone help me please??