I've been working on creating pages in Gatsby JS from a csv file and everything seemed to be going smoothly. However, when it comes to displaying the data on these generated pages, I keep running into issues with undefined variables and can't seem to figure out how to resolve them.
While I've had success outputting data from markdown or other sources, I'm hitting a roadblock with this particular project. I've attempted to tweak various blog templates to accommodate my data, but without any luck :/
This is a snippet of the template where I'm encountering the problem:
import React from "react"
class ProductTemplate extends React.Component {
render() {
const data = this.props.productsCsv
return (
<div>
<h1>{data.name}</h1>
</div>
)
}
}
export default ProductTemplate
export const SingleProductQuery = graphql`
query ProductByPath($slug: String!) {
productsCsv(slug: {eq: $slug}) {
name
price
image
}
}
`;
If anyone has any ideas or tips on how to troubleshoot this issue, your input would be greatly appreciated :)