I have all of my artists data in a json file: artists.json. In there I also have the image name I am trying to render for each artist. I attempted to use exports.sourceNodes but I must have done something wrong. Any help you could give on this issue would be extremely helpful as I am still new to this and am having a hard time internalizing the information in the docs. The path to my images is: images/artists/headshots/ Here is my gatsby-config.js file:
const path = require('path')
module.exports = {
siteMetadata: {
title: 'Platform Showcase',
},
plugins: [
'gatsby-plugin-gatsby-cloud',
// {
// resolve: "gatsby-plugin-google-analytics",
// options: {
// trackingId: "",
// },
// },
'gatsby-plugin-react-helmet',
'gatsby-plugin-sitemap',
{
resolve: 'gatsby-plugin-manifest',
options: {
icon: 'src/images/icon.png',
},
},
'gatsby-plugin-mdx',
'gatsby-plugin-image',
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'images',
path: './src/images/',
},
__key: 'images',
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `headshots`,
path: `${__dirname}/src/images/artists/headshots`,
},
__key: 'headshots',
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'pages',
path: './src/pages/',
},
__key: 'pages',
},
`gatsby-theme-material-ui`,
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `./src/data/`,
},
},
{
resolve: 'gatsby-plugin-root-import',
options: {
src: path.join(__dirname, 'src'),
components: path.join(__dirname, 'src/components'),
containers: path.join(__dirname, 'src/containers'),
helpers: path.join(__dirname, 'src/helpers'),
images: path.join(__dirname, 'src/images'),
},
},
],
}
Here is my gatsby-node.js file:
const path = require(`path`)
const artists = require('./src/data/artists.json')
const IMAGE_PATH = './src/images/artists/headshots/'
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
artists.forEach((card) => {
const {
firstName,
lastName,
currentTeam,
bio,
city,
whatWelove,
image,
featuredVideo,
recentPerformance,
} = card
const { name, ext } = path.parse(image)
const absolutePath = path.resolve(__dirname, IMAGE_PATH, image)
const data = {
name,
ext,
absolutePath,
extension: ext.substring(1),
}
const imageNode = {
...data,
id: createNodeId(`card-image-${name}`),
internal: {
type: 'ArtistsCardImage',
contentDigest: createContentDigest(data),
},
}
// actions.create(imageNode)
const node = {
firstName,
lastName,
currentTeam,
bio,
city,
whatWelove,
image: imageNode,
// image,
featuredVideo,
recentPerformance,
id: createNodeId(`card-${firstName}${lastName}`),
internal: {
type: 'ArtistsCard',
contentDigest: createContentDigest(card),
},
}
actions.createNode(node)
})
}
Here is my artists component:
import React from 'react'
import PropTypes from 'prop-types'
import { StaticImage } from 'gatsby-plugin-image'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
import { useStyles } from './styles'
const ArtistsPage = ({ artists }) => {
const classes = useStyles()
const image = getImage(artists.allArtistsCard.nodes)
return (
...
<div className={classes.flexContainer}>
{artists.allArtistsCard.nodes
.map(({ firstName, lastName, city, currentTeam }, idx) => {
return (
<div className={classes.flexItem} key={idx}>
<div>
<GatsbyImage image={image} alt='artist-image' />
</div>
<div className={classes.artistCardName}>
{`${firstName} ${lastName}`.toUpperCase()}
</div>
<div className={classes.artistCardText}>{city}</div>
<div className={classes.artistCardText}>{currentTeam}</div>
</div>
)
})}
...
)
}
ArtistsPage.propTypes = {
firstName: PropTypes.string,
lastName: PropTypes.string,
currentTeam: PropTypes.string,
city: PropTypes.string,
image: PropTypes.string,
artists: PropTypes.array.isRequired,
}
export default ArtistsPage
And this is the set up of my json data file: data/artist.json
[
{
"artistId": 1,
"firstName": ["Carlo"],
"lastName": ["Darang"],
"bio": "Carlo Darang started his training in 2008 at Studio 429 where he joined his first dance team, Breakthrough. He later joined Choreo Cookies in 2009, and has continued to be a part of the team till present day. He currently directs the team with Jason Patio and Chris Martin. He also directs another adult team called GWOWNUPS with Amor Ledesma. Outside directing, Carlo enjoys teaching at both Building Block, Studio FX and Culture Shock Dance Center. He also has had many opportunities to teach outside of San Diego, both domestically and internationally. Carlo hopes to just be the same type of figure to others as his mentors were to him.",
"highlight": "",
"events": ["Spring 2019"],
"featuredVideo": "",
"currentTeam": "",
"twitter": "",
"instagram": "https://www.instagram.com/carlodarang/",
"city": "San Diego",
"tiktok": "",
"youtube": "",
"email": "",
"address": "",
"phoneNumber": "",
"whatWeLove": "",
"recentPerformance": "",
"image": "Carlo Darang Headshot.jpg"
},
]
What I really don't understand is why this: const image = getImage(artists.allArtistsCard.nodes) comes back as undefined. Thank you so much for your help!
