CODEWITHSUNDEEP
graphqlgatsby
Casey
Casey

Reputation: 552

Images outside of directory cause Field "image" must not have a selection since type "String" has no subfields

I am using Gatsby to add images to my site. This is how I want to setup my images directory.

$PROJECT
- src
-- images
--- projects
---- project1
----- project1.png
-- data
--- projects.json

The projects.json file is where I define the locations of the images along with other attributes such as project title and etc.

However, with this setup I get this error: Field "image" must not have a selection since type "String" has no subfields. I also get this error if I just place the image in the src directory and reference it as ../project1.png. I have gone through all the Google results for this error and tried their fixes. This included reordering imports, adding transformer-remark, removing empty fields, and checking to see if the directory and filenames are correct (they are, I checked all of them by taking the "string" from GraphQL and ran test -F <the path> which all came back as true.

This is my gatsby-config setup:


module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/data`,
      },
    },
    `gatsby-transformer-json`
  ],
}

I can access the images if I move all my photos into the data directory where I have the projects.json file and reference them like ./project1.png.

Upvotes: 0

Views: 229

Answers (1)

molebox
molebox

Reputation: 585

You have to add another gatsby-source-filesystem and point it to the folder that contains the images. Your gatsby-config.js can contain as many instances of gatsby-source-file system as you need, pointing to different parts of your filesystem

module.exports = {
  plugins: [
   `gatsby-plugin-sharp`,
   `gatsby-transformer-sharp`,
   {
     resolve: `gatsby-source-filesystem`,
     options: {
     path: `${__dirname}/src/data`,
   },
   },
   {
     resolve: `gatsby-source-filesystem`,
     options: {
     path: `${__dirname}/src/images/projects/project1`,
   }, 
   },
    `gatsby-transformer-json`
 ],
}

Upvotes: 2

Related Questions