Gatsby Graphql Reading image - graphql

Question

I want to read a path to an image file from YAML, and use the gatsby-image to create responsive images, but it doesn't let me do what I want.
data.yaml
fileKey: data
profile:
- name: Foo
image: image.jpg
- name: Bar
image: image2.jpg
My query looks like:
query DataQuery {
pagesYaml(fileKey: {eq: "data"}) {
profile {
name
image {
childImageSharp {
fluid(maxWidth: 2048, quality: 100) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
This gives me this error Field "image" must not have a selection since type "String" has no subfields.
However, this below works.
query DataQuery {
pagesYaml(fileKey: {eq: "data"}) {
profile {
name
}
profileImage: file(relativePath: { eq: "image.jpg" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
profileImage2: file(relativePath: { eq: "image2.jpg" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
The nice thing about the first query is that I can place the profile image inside the profile, so it's easier to manage the data in JavaScript. Is it possible to place the image inside the profile object in the query?
Here's my gatsby-config.js. The images are stored in src/img/.
const proxy = require('http-proxy-middleware');
const yaml = require('./src/yaml');
module.exports = {
siteMetadata: {
title: 'Gatsby + Netlify CMS Starter',
description:
'This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.',
},
plugins: [
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-plugin-robots-txt',
options: {
policy: [{ userAgent: '*', disallow: '/' }]
}
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
exclude: [`/admin`]
}
},
'gatsby-plugin-sass',
'gatsby-transformer-yaml',
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/img`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/img`,
name: 'images',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/data`,
name: 'data',
},
},
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
engines: { yaml },
plugins: [
{
resolve: 'gatsby-remark-relative-images',
options: {
name: 'uploads',
},
},
{
resolve: 'gatsby-remark-images',
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 2048,
},
},
{
resolve: 'gatsby-remark-copy-linked-files',
options: {
destinationDir: 'static',
},
},
],
},
},
{
resolve: 'gatsby-plugin-web-font-loader',
options: {
custom: {
families: ['Appli Mincho']
}
}
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
{
resolve: 'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
options: {
develop: true, // Activates purging in npm run develop
purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
},
}, // must be after other CSS plugins
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
// for avoiding CORS while developing Netlify Functions locally
// read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
developMiddleware: app => {
app.use(
'/.netlify/functions/',
proxy({
target: 'http://localhost:9000',
pathRewrite: {
'/.netlify/functions/': '',
},
})
)
},
}

Answer 1

This is likely occurring because Gatsby is inferring your profile.image field as a String instead of a File. This can happen if one or more of the provided path strings does not resolve to a file when you boot Gatsby. Note that Gatsby will not rerun type-inference for existing fields after it boots, so you will need to restart the development server to pick up these changes.