Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Field "image" must not have a selection since type "String" has no subfields." #13469

Closed
kpennell opened this issue Apr 18, 2019 · 5 comments

Comments

Projects
None yet
2 participants
@kpennell
Copy link

commented Apr 18, 2019

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 gatsby issue 11412 gatsby issue 11534 gatsby issue 2050 gatsby issue 3531gatsby remark plugin issue 2 netlify-cms issue 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

image

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


@jonniebigodes

This comment has been minimized.

Copy link
Contributor

commented Apr 18, 2019

@kpennell if you don't mind the wait, i'm cloning your repo and i'm going to create a detailed answer to your issue probably still tonight or at the very latest tomorrow. Sounds good?

@kpennell

This comment has been minimized.

Copy link
Author

commented Apr 18, 2019

@jonniebigodes Thanks so much...and for responding to probably a half dozen of these now. Really wish you didn't have to

@kpennell

This comment has been minimized.

Copy link
Author

commented Apr 18, 2019

I think I figured it out. In Gatsby-config, the order of plugins does matter here:

Not only that, it'll be best if you include 'gatsby-transformer-sharp' 'gatsby-plugin-sharp' and 'gatsby-transformer-remark' before any other plugin in gatsby-config.js. Not doing this will definitely lead to 'Field "image" must not have a selection since type "String" has no subfields' error.

from here: https://theleakycauldronblog.com/blog/problems-with-gatsby-image-and-their-workarounds/



module.exports = {
  siteMetadata: {
    title: `appendTo Material Gatsby`,
    description: "hi",
    author: `@gatsbyjs`,
  },
  plugins: [
    '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',
            },
          },
        ],
      },
    },
    `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',
      },
    },
    {
      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',
  ],
}

Hoping this helps someone in the future. Thank you @jonniebigodes

@kpennell kpennell closed this Apr 18, 2019

@jonniebigodes

This comment has been minimized.

Copy link
Contributor

commented Apr 18, 2019

@kpennell no need to thank. Glad you managed to figure it out.

@kpennell

This comment has been minimized.

Copy link
Author

commented Apr 19, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.