Image query fails in preview mode

[honzik]

Description

When I add imageSharp version of image field of my image from Prismic and try to obtain in using fluid or fixed optimization, preview fails with a weird error. When I remove the imageSharp property from GraphQL query, it works well and preview is displayed correctly with live data from Prismic.

Without preview, when I test published sectors only, all works just fine.

I know preview is not supposed to use Gatsby image optimizations. But in Readme you state that the query will go through, and I only need to test if imageSharp is null.

Site config

gatsby-config part:

{
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: '###',    
        accessToken: '***',        
        previews: true,      
        path: '/preview',
        pages: [{
          type: "Websitesector",
          match: '/sectors/:uid',
          path: '/sector-preview',
          component: require.resolve('./src/templates/sector.js')
        }

        ],
        sharpKeys: [
          /image|photo|picture/, // (default)
          'images',
        ],        
      }
    }

sector.js template query that fails:

export const query = graphql`
query SectorQuery($uid: String) {  
  prismic {
    allWebsitesectors(uid: $uid) {
      edges {
        node {
          title
          description
          images {
            image 
            imageSharp {
              childImageSharp {
                fixed {
                  ...GatsbyImageSharpFixed
                }
              }
            }
          }
        }
      }      
    }
  } 
}
`

Component code is not relevant here, this error depends solely on including or removing the imageSharp property from GraphQL query.

This is the error I am getting in console:

index.js:2177 Error: Network error: Error writing result to store for query:
 {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SectorQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"uid"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"directives":[]}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allWebsitesectors"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"uid"},"value":{"kind":"Variable","name":{"kind":"Name","value":"uid"}}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"description"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"images"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image"},"arguments":[],"directives":[]},null,{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}}]}}],"loc":{"start":0,"end":206}}
Cannot read property 'directives' of undefined
    at new ApolloError (bundle.esm.js:63)
    at bundle.esm.js:1247
    at bundle.esm.js:1559
    at Set.forEach (<anonymous>)
    at bundle.esm.js:1557
    at Map.forEach (<anonymous>)
    at QueryManager../node_modules/apollo-client/bundle.esm.js.QueryManager.broadcastQueries (bundle.esm.js:1555)
    at bundle.esm.js:1161
__stack_frame_overlay_proxy_console__ @ index.js:2177
(anonymous) @ WrapPage.js:177
Promise.catch (async)
componentDidMount @ WrapPage.js:171
componentDidMount @ react-hot-loader.development.js:704
commitLifeCycles @ react-dom.development.js:22100
commitLayoutEffects @ react-dom.development.js:25343
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
commitRootImpl @ react-dom.development.js:25081
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
commitRoot @ react-dom.development.js:24921
finishSyncRender @ react-dom.development.js:24328
performSyncWorkOnRoot @ react-dom.development.js:24306
scheduleUpdateOnFiber @ react-dom.development.js:23697
updateContainer @ react-dom.development.js:27102
(anonymous) @ react-dom.development.js:27527
unbatchedUpdates @ react-dom.development.js:24432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:37
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ linkResolver.js:1
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793

And my package.json

"dependencies": {
    "gatsby": "^2.19.12",
    "gatsby-image": "^2.2.40",
    "gatsby-plugin-sharp": "^2.4.5",
    "gatsby-source-prismic": "^2.3.0-alpha.3",
    "gatsby-source-prismic-graphql": "^3.4.0-beta.2",
    "gatsby-transformer-sharp": "^2.3.14",
    "prismic-reactjs": "^1.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }

[pkroyer]

I'm running into the same issue receiving the same error message on a recent project. Whenever an imageSharp property is present in the query the error appears in preview mode.

What is interesting is that the same setup (using the same dependency versions) works fine with another Prismic repository I created a few months ago. Could it be that the way images are served for preview is a bit different on more recent Prismic repositories and this causes the error?

[jodiedoubleday]

I'm having the same issue which can be seen here - https://prismic.link/38EUXwj Im using imageSharp and following the same way in which its use is described here - https://github.com/birkir/gatsby-source-prismic-graphql#working-with-gatsby-image

Falling back to the normal image if image if sharpImage is not present

[damian-tripbuddi]

Is there any updates with this issue?

It seems that the documentation that describes falling back to a normal image is no longer correct.

If you include sharpImage in your query, the entire preview query fails and reverts to show content from master (due to the above error).

For now I have no choice but to remove imageSharp from my query all together.

[alexanderfountain]

Same issue here as above comment.

I was able to resolve by setting fetch-policy: 'no-cache'

As stated here: https://github.com/Digitaliseringsbyran/gatsby-source-prismic-graphql/commit/a0e2556d140a4d4bd9ac0329a7a341f72818d3b0

[go-cristian]

I tested this on 3.6.3-alpha.12, but is also failing when using the fallback image, the query keeps failing when calling a sharp image, any workarounds on this?

[LukeTongue]

I am also getting this issue, preview works fine when not using imageSharp in a query. If I apply the fix suggested by @alexanderfountain to the latest release (3.6.2) this does indeed fix the issue.

[jimmyn]

I'm having the same issue with the latest version

Cannot read property 'directives' of undefined