LekoArts / gatsby-themes

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.
https://themes.lekoarts.de
MIT License
1.88k stars 544 forks source link

Errors encountered attempting to shadow homepage - starter minimal blog #1187

Closed gcomlish closed 1 year ago

gcomlish commented 1 year ago

Discussed in https://github.com/LekoArts/gatsby-themes/discussions/1186

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}

<Link to={replaceSlashes(`/${basePath}/${blogPath}`)}>Read all posts</Link> ) } 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??
LekoArts commented 1 year ago

Should be discussed in https://github.com/LekoArts/gatsby-themes/discussions/1186 - if you can share a repository one could clone it would be easier to help :)