## Description
I love love love Gatsby...But I'm another person struggling 😭😭😭 …for 12+ hours now with "Field "image" must not have a selection since type "String" has no subfields."
I'm trying to to use netlify-cms and gatsby (with several popular gatsby image plugins).
I think this is a relative paths image problem but nothing has helped. I really just need someone to look at my setup.
Research:
I tried the various suggestions found at this issues.
[gatsby issue 4123](https://github.com/gatsbyjs/gatsby/issues/4123) [gatsby issue 11412](https://github.com/gatsbyjs/gatsby/issues/11412) [gatsby issue 11534](https://github.com/gatsbyjs/gatsby/issues/11534) [gatsby issue 2050](https://github.com/netlify/netlify-cms/issues/2050) [gatsby issue 3531](https://github.com/gatsbyjs/gatsby/issues/3531)[gatsby remark plugin issue 2](https://github.com/danielmahon/gatsby-remark-relative-images/issues/2) [netlify-cms issue 325](https://github.com/netlify/netlify-cms/issues/325)
### Steps to reproduce
Here's the pertinent parts of the code
`[bunch of imports]
```
const CoursePage = ({ data }) => {
const { markdownRemark: post } = data
return (
<Layout>
<p>{post.frontmatter.title}</p>
<p> {post.html} </p>
/>
</Layout>
)
}
export default CoursePage
export const CoursePageQuery = graphql`
query CoursePage($id: String!) {
markdownRemark(id: { eq: $id }) {
html
frontmatter {
title
image {
// everything works except when I put this
childImageSharp {
fluid(maxWidth: 2048, quality: 100) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
```
## Actual markdown for a course:
```
---
templateKey: single-course
title: intermediate React
date: 2019-04-15T16:43:29.834Z
description: An intermediate React course
difficulty: Intermediate
image: /img/gatsby-astronaut.png
---
what a course, what a course...what a course, what a coursewhat a course, what a course...what a course, what a course
what a course, what a course...what a course, what a course
what a course, what a course...what a course, what a course
what a course, what a course...what a course, what a course
```
## Confirming that case and spelling are right
## gatsby-config.js
```
module.exports = {
siteMetadata: {
title: `appendTo Material Gatsby`,
description: "hi",
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
// 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/images`,
name: 'images',
},
},
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-relative-images',
},
{
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: 590,
},
},
{
resolve: 'gatsby-remark-copy-linked-files',
options: {
destinationDir: 'static',
},
},
],
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-netlify-cms`,
{
resolve: `gatsby-plugin-material-ui`,
options: {
// Add any options here
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// 'gatsby-plugin-offline',
],
}
```
## gatsby-node.js
```
const path = require(`path`)
const { createFilePath } = require('gatsby-source-filesystem')
const { fmImagesToRelative } = require('gatsby-remark-relative-images')
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions
return graphql(`
{
allMarkdownRemark(limit: 1000) {
edges {
node {
id
fields {
slug
}
frontmatter {
templateKey
}
}
}
}
}
`).then(result => {
if (result.errors) {
result.errors.forEach(e => console.error(e.toString()))
return Promise.reject(result.errors)
}
const posts = result.data.allMarkdownRemark.edges
posts.forEach(edge => {
const id = edge.node.id
createPage({
path: edge.node.fields.slug,
tags: edge.node.frontmatter.tags,
component: path.resolve(
`src/templates/${String(edge.node.frontmatter.templateKey)}.js`
),
// additional data can be passed via context
context: {
id
},
})
})
})
}
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
fmImagesToRelative(node)
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
name: `slug`,
node,
value,
})
}
}
```
## package.json
relevant parts:
```
"gatsby-image": "^2.0.23",
"gatsby-plugin-netlify": "^2.0.6",
"gatsby-plugin-netlify-cms": "^3.0.9",
"gatsby-plugin-purgecss": "^3.1.0",
"gatsby-plugin-react-helmet": "^3.0.4",
"gatsby-plugin-sass": "^2.0.7",
"gatsby-plugin-sharp": "^2.0.15",
"gatsby-remark-copy-linked-files": "^2.0.7",
"gatsby-remark-images": "^3.0.1",
"gatsby-remark-relative-images": "^0.2.1",
"gatsby-source-filesystem": "^2.0.12",
"gatsby-transformer-remark": "^2.1.15",
"gatsby-transformer-sharp": "^2.1.9",
"lodash": "^4.17.5",
```
# All code here: https://github.com/kpennell/notworkinggatsbyrelativeimageproblem
### Expected result
GraphQL should be able to query for the images (using the right path?) and have the transformers plugins work vs. only being able to query for a string.
### Actual result
Infamous: `"Field "image" must not have a selection since type "String" has no subfields."`
### Environment
```
System:
OS: macOS 10.14
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.4.0 - ~/.nvm/versions/node/v11.4.0/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v11.4.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 72.0.3626.119
Firefox: 66.0.3
Safari: 12.0
npmPackages:
gatsby: ^2.3.24 => 2.3.24
gatsby-image: ^2.0.34 => 2.0.34
gatsby-plugin-manifest: ^2.0.24 => 2.0.24
gatsby-plugin-material-ui: ^1.2.4 => 1.2.4
gatsby-plugin-netlify-cms: ^3.0.17 => 3.0.17
gatsby-plugin-offline: ^2.0.25 => 2.0.25
gatsby-plugin-react-helmet: ^3.0.10 => 3.0.10
gatsby-plugin-sharp: ^2.0.15 => 2.0.35
gatsby-remark-copy-linked-files: ^2.0.11 => 2.0.11
gatsby-remark-images: ^3.0.1 => 3.0.10
gatsby-remark-relative-images: ^0.2.1 => 0.2.2
gatsby-source-filesystem: ^2.0.26 => 2.0.27
gatsby-transformer-remark: ^2.3.4 => 2.3.8
gatsby-transformer-sharp: ^2.1.9 => 2.1.18
npmGlobalPackages:
gatsby-cli: 2.4.14
```