I'm building a dynamic gatsby app where users can log in and see a list of categories, and for each category a list of products. When a user clicks on a category, I want to dynamically render the relevant products through a graphQL query. How I want to do this is through grabbing the category slug from the URL and passing that to a graphQL query, but I keep getting errors when I pass a variable.
I've pasted my query below without a variable. Instead of "Serverless", I want a variable ${slug}.
export const query = graphql`
{
fauna {
slugMap (slug: "serverless"){
data{
name
companies{
data{
name
website
description
}
}
}
}
}
}
`
Gatsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
// Only update the `/app` page.
if (page.path.match(/^\/map/)) {
// page.matchPath is a special key that's used for matching pages
// with corresponding routes only on the client.
page.matchPath = "/map/*"
// Update the page.
createPage(page)
}
}