Help creating remote file nodes and querying for them

[juanbiberretta]

Hello!

I've carefully followed and read this tutorial here: https://www.gatsbyjs.com/docs/how-to/images-and-media/preprocessing-external-images/

It seemed pretty straightforward but it I kept getting null for nodes that I knew I had created. After much trial and error this is what ended up working for me:

exports.onCreateNode = async ({ node, actions: { createNode }, createNodeId, getCache }) => {
  if (node.id === 'SitePage /') {
    const shopReminderImageNode = await createRemoteFileNode({
     // Random image from google, real value comes from the API, otherwise I'd use StaticImage
      url:
        'https://static.wikia.nocookie.net/zelda/images/8/80/Link_Defending_%28Soulcalibur_II%29.png/revision/latest?cb=20090726014102',
      parentNodeId: node.id,
      createNode,
      createNodeId,
      getCache,
    });

    node.shopReminderImage___NODE = shopReminderImageNode.id;
  }
};

Notice that I'm not defining the types with createSchemaCustomization , because adding those types in gives breaks the implementation, example:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;

  createTypes(`
    type SitePage implements Node {
      shopReminderImage: File @link(from: "shopReminderImage___NODE")
    }
  `);
};

exports.onCreateNode = async ({ node, actions: { createNode }, createNodeId, getCache }) => {
  if (node.id === 'SitePage /') {
    const shopReminderImageNode = await createRemoteFileNode({
     // random URL I got off Google, this actually comes from the API, otheriwse I'd be using StaticImage...
      url:
        'https://static.wikia.nocookie.net/zelda/images/8/80/Link_Defending_%28Soulcalibur_II%29.png/revision/latest?cb=20090726014102',
      parentNodeId: node.id,
      createNode,
      createNodeId,
      getCache,
    });

    node.shopReminderImage___NODE = shopReminderImageNode.id;
  }
};

I've read up on how foreign-key fileds work here, https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#foreign-key-fields and it makes sense to me, but I don't understand why manually defining the type somehow breaks the link that the type inference was able to make by itself...

In our project we have single page builds, and the useStaticQuery calls for this field is only on the homepage, but what that means is that unless I can get the type definition working, I have to build the homepage every time so that I can guarantee those fields will be there for the query. Otherwise build fails because it says it cannot query for fields that do not exist (one thing I'm not entirely clear on is why the static queries run even when I'm not building the page they're being used on?).

Any help would be appreciated!!

System:
OS: Linux 4.4 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 12.13.0 - /tmp/yarn--1619022608269-0.10842656233188586/node
Yarn: 1.22.5 - /tmp/yarn--1619022608269-0.10842656233188586/yarn
npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
npmPackages:
gatsby: ^3.3.0 => 3.3.0
gatsby-plugin-image: ^1.3.0 => 1.3.0
gatsby-plugin-lodash: ^4.2.0 => 4.2.0
gatsby-plugin-manifest: ^3.2.0 => 3.2.0
gatsby-plugin-minify-classnames: ^0.2.3 => 0.2.3
gatsby-plugin-no-sourcemaps: ^3.2.0 => 3.2.0
gatsby-plugin-react-helmet: ^4.2.0 => 4.2.0
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-sass: ^4.2.0 => 4.2.0
gatsby-plugin-sharp: ^3.3.0 => 3.3.0
gatsby-plugin-styled-components: ^4.2.0 => 4.2.0
gatsby-plugin-typescript: ^3.2.0 => 3.2.0
gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5
gatsby-source-filesystem: ^3.3.0 => 3.3.0
gatsby-transformer-sharp: ^3.3.0 => 3.3.0