Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Works on My Machine (I mean with Gatsby build)
import React, { useState, useEffect } from "react"
import { graphql, useStaticQuery } from "gatsby"
import Layout from "../components/Layout"
const importBlock = blockName =>
import(`../components/blocks/${blockName}/index.js`).then(
component => component.default
)
export default () => {
const [components, setComponents] = useState([])
const { allDirectory } = useStaticQuery(graphql`
{
allDirectory(filter: { relativePath: { ne: "" } }) {
edges {
node {
relativePath
id
}
}
}
}
`)
useEffect(() => {
function loadComponents() {
allDirectory.edges.map(async ({ node }) => {
const component = await importBlock(node.relativePath)
setComponents(loadedComponents => loadedComponents.concat(component))
})
}
loadComponents()
}, [allDirectory])
return (
<Layout>
{components.map(Component => (
<Component key={Component} />
))}
</Layout>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.