Image not found during first build after clean

[chrisworman-pela]

I'm seeing an issue regarding images in 3.6.2. The behaviour I'm seeing is that you have to run gatsby develop twice for images to work, even for gatsby build.

I have a minimal prismic/gatsby project setup. Here is some information regarding (perhaps) relevant dependencies, which are all at the latest version at the time of writing this issue:

"gatsby": "^2.21.7",
"gatsby-image": "^2.4.0",
"gatsby-source-prismic-graphql": "^3.6.2",
"gatsby-image": "^2.4.0",
"gatsby-transformer-sharp": "^2.5.0",
"gatsby-plugin-sharp": "^2.6.0",

Here is my configuration for gatsby-source-prismic-graphql in gatsby-config.js:

{
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: 'chrisworman-pela-test',
        defaultLang: 'en-us',
        accessToken: '[REDACTED]',
        sharpKeys: [
          /image|photo|picture|icon/
        ]
}

I'm processing images in queries like this:

...
image
imageSharp {
  childImageSharp {
    fluid(maxWidth: 1000) {
      ...GatsbyImageSharpFluid
    }
  }
}
...

Steps to reproduce (I have a minimal project with a handful of images):

1. Run gatsby clean
2. Run gatsby develop

I get the following error message:

  ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unexpected error value: "failed to process https://images.prismic.io/chrisworman-pela-test/fccd6c0f-f233-4bfa-a480-8f7877f4e0cc_honey-bee-case.png?auto=compress,format\nError: ENOENT: no such file or directory, open '/Users/chrisworman/Pela/pelacase-web/.cache/caches/gatsby-source-prismic-graphql/tmp-61d1f30784f90ffdf7ba0cf249b324c4.png'"

  24 |                 title
  25 |                 icon
  26 |                 iconSharp {
  27 |                   childImageSharp {
  28 |                     fluid(maxWidth: 1000) {
  29 |                       ...GatsbyImageSharpFluid
  30 |                     }
  31 |                   }
  32 |                 }
  33 |                 image
> 34 |                 imageSharp {
     |                 ^
  35 |                   childImageSharp {
  36 |                     fluid(maxWidth: 1000) {
  37 |                       ...GatsbyImageSharpFluid
  38 |                     }
  39 |                   }
  40 |                 }
  41 |               }
  42 |             }
  43 |             ... on PRISMIC_Structured_pageBodyImage_grid {
  44 |               type

File path: /Users/chrisworman/Pela/pelacase-web/src/templates/index.tsx
Url path: /
Plugin: none

Importantly, when I run gatsby develop a second time, the project builds fine.

Now if I run gatsby clean and then gatsby develop I get the same error shown above.

Similarily, if I run gatsby clean then gatsby build, I get the same error shown above, but if I run gatsby develop twice (as described above) first then run gatsby build, I get a successful build.

Purely speculation, but the error indicates that an image cannot be found on the local machine, so perhaps the issue is related to a race-condition downloading the images?

[codingwithchris]

Hey, @chrisworman-pela, check out issue #162 for a hacky workaround.

[chrisworman-pela]

I have confirmed that the workaround mentioned by @codingwithchris is working (Thanks @codingwithchris !!!). Specifically, you need to add the following to your gatsby-node.js file:

const fs = require('fs');
const dir = "./.cache/caches/gatsby-source-prismic-graphql"

exports.onPreBootstrap = () => {
    if (!fs.existsSync(dir)){
        fs.mkdirSync(dir);
    } 
 }

Is this an issue with gatsby-source-prismic-graphql or in a dependency? If it is an issue with a dependency, has it been logged as an issue in the appropriate repository?

Also, I think the documentation for gatsby-source-prismic-graphql should be updated to include the workaround since it's a prerequisite to using a documented feature.