Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
Originally posted by **gcomlish** May 22, 2023
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(graphql`
query {
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 (
{siteTitle}
Read all posts
)
}
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??
Discussed in https://github.com/LekoArts/gatsby-themes/discussions/1186
{siteTitle}