title: Gatsby - fetching remote images with createRemoteFileNode
body: <p>I've been trying to fetch images from remote URL to Gatsby Source File system, to take advantage of lazy loading with <code>gatsby-image</code> plugin. I have a restful API which returns json with a string containing the image url. I followed <a href="https://www.wildsmithstudio.com/blog/remote-images-with-gatsby/" rel="nofollow noreferrer">this guide</a> as I'm quite new to Gatsby Node Api and wasn't sure how to tackle this. Everything worked well until the point with adding additional properties to image with <code>createNodeField</code>. The properties seem to be added (I can see the object with <code>fields</code> property when I log the fileNode to the console. However, when trying to query the images, I get an error:</p>
  <p><a href="https://i.stack.imgur.com/RFDjQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RFDjQ.png" alt="enter image description here" /></a></p>
  <p>I'm wondering if there's something wrong in my code or is it due to the changes in gatsby? I'm using gatsby version <code>2.0.2</code>. Is there a better option to somehow add additional properties to the image in order to be able to query just the needed ones?</p>
  <p>Here's how my <code>gatsby.node.js</code> looks like:</p>
  <pre class="lang-js prettyprint-override"><code>const axios = require('axios');
  const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
      
  exports.sourceNodes = ({ actions, createNodeId, node, store, cache } =&gt; {
    const { createNode, createNodeField } = actions;
    const processProject = project =&gt; {
      project.photos.forEach(async photo =&gt; {
        let fileNode;
  
        try {
          fileNode = await createRemoteFileNode({
            url: photo.photo.url,
            store,
            cache,
            createNode,
            createNodeId: id =&gt; `projectPhoto-${photo.id}`,
          });
  
          await createNodeField({
            node: fileNode,
            name: 'ProjectPhoto',
            value: 'true',
          });
  
          await createNodeField({
            node: fileNode,
            name: 'created_at',
            value: photo.created_at,
          });
        } catch (error) {
          console.warn('error creating node', error);
        }
      });
    }
    
    return axios.get(baseApiUrl).then(res =&gt; {
      res.data.forEach(project =&gt; {
        const nodeData = processProject(project);
        createNode(nodeData);
      });
    });
  }
  </code></pre>