gatsby-source-directus: Children of imageFile are null on build when requesting an image twice

[jarne]

Describe the Bug

Using gatsby-source-directus, when requesting a specific image using a GraphQL query in a static page query and in gatsby-node.js/page query of page created by gatsby-node.js, the children of the imageFile property are null on the second query.

The issue only happens on gatsby build, everything works fine when using gatsby develop.

To Reproduce

https://github.com/jarne/gatsby-source-directus-bug-repro

• See first commit for specific reproduction code added
• When removing one of the queries (gatsby-node.js or index.js, comment out one of them), everything works
• The error only appears when building using gatsby build, not when running gatsby develop

Errors Shown

 ERROR 

(node:35867) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./public/" in the "exports" field module
resolution of the package at /Users/jarne/Downloads/gatsby-source-directus-bug-repro/node_modules/extract-files/package.json.
Update this package.json to use a subpath pattern like "./public/*".
(Use `node --trace-deprecation ...` to show where the warning was created)

success Building production JavaScript and CSS bundles - 5.278s
success Building HTML renderer - 7.714s
success Execute page configs - 0.016s
success Caching Webpack compilations - 0.001s
success run queries in workers - 0.480s - 2/2 4.17/s
success Merge worker state - 0.003s
success Rewriting compilation hashes - 0.001s
success Writing page-data.json files to public directory - 0.012s - 3/4 339.23/s

 ERROR 

Page data from page-data.json for the failed page "/": {
  "componentChunkName": "component---src-pages-index-js",
  "path": "/",
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": [
    "1673888159"
  ]
}

failed Building static HTML for pages - 1.895s

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  36 |         return (
  37 |           <GatsbyImage
> 38 |                         image={pl.cover.imageFile.childImageSharp.gatsbyImageData}
     |                                                                   ^
  39 |                         style={{
  40 |                             width: "80%",
  41 |                             maxWidth: 175,


  WebpackError: TypeError: Cannot read properties of null (reading 'gatsbyImageData')
  
  - index.js:38 
    gatsby-starter-minimal/src/pages/index.js:38:67
  
  - index.js:31 
    gatsby-starter-minimal/src/pages/index.js:31:31
  
  - index.js:25 
    [gatsby-starter-minimal]/[camelcase]/index.js:25:1
  
  - extends.js:8 
    [gatsby-starter-minimal]/[@babel]/runtime/helpers/extends.js:8:1
  
  - extends.js:14 
    [gatsby-starter-minimal]/[@babel]/runtime/helpers/extends.js:14:40
  
  - extends.js:13 
    [gatsby-starter-minimal]/[@babel]/runtime/helpers/extends.js:13:1
  
  - index.js:44 
    [gatsby-starter-minimal]/[camelcase]/index.js:44:1
  
  - static-entry.js:295 
    gatsby-starter-minimal/.cache/static-entry.js:295:22
  
  - history.js:22 
    [gatsby-starter-minimal]/[@gatsbyjs]/reach-router/es/lib/history.js:22:1
  


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
jarne@Jarnes-iMac gatsby-source-directus-bug-repro %

What version of Directus are you using?

9.7.0

What version of Node.js are you using?

16.14.2

What database are you using?

Postgres 13.6

What browser are you using?

Firefox, Safari

How are you deploying Directus?

Docker

[JakubOlejnik1155]

Any fix for that? I have the same issue in development to.

[rijkvanzanten]

Any fix for that? I have the same issue in development to.

Wanna create a PR?

[JakubOlejnik1155]

I had to add an ID to make it work fine in the development version. But when building a production version, it still doesn't download the same photo second time.
@jarne Have you solved this problem somehow?

[jarne]

I had to add an ID to make it work fine in the development version. But when building a production version, it still doesn't download the same photo second time.

@jarne Have you solved this problem somehow?

Unfortunately no, I've tried to debug it and found out it might have something to do with createRemoteFileNode not returning the children of the query, but I wasn't able to fix it yet. I've temporarily commented out the images from my website.

[chmielulu]

I've the same problem. I've temporarily solved it by writing the data to a JSON file in the gatsby node in the development, then importing and using that file everywhere.

[xshadowlegendx]

hello @chmielulu, could you please tell me how you do it thou, I've tried yarn develop and copy the page-data dir to one side, then during yarn build, I copy the page-data dir back in, it does complete the build but resulting in image not found on section that has the disappearing image

[chmielulu]

I think the reason for this bug is the old approach to fetch data from directus. Since version 4 plugins should do it in a different way. https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/#do-not-create-nodes-in-custom-resolvers

[chmielulu]

I'll try to create PR soon.

[rijkvanzanten]

Linear: ENG-62