Mapping an attachment field causes it to disappear from it’s node

[brandonweiss]

I’ve got a “Companies” table with an attachment field called “logo”. When I query it like this:

allAirtable(filter: { table: { eq: "Companies" } }) {
  edges {
    node {
      data {
        logo {
          id
        }
      }
    }
  }
}

I get back the ID of the attachment, which is what I’d expect.

However, when I add a mapping in the config to try to turn it into a file node.

{
  tableName: "Companies",
  mapping: {
    logo: 'fileNode',
  },
}

The “logo” field disappears off of the company node.

{
  "errors": [
    {
      "message": "Cannot query field \"logo\" on type \"AirtableData\".",
      "locations": [
        {
          "line": 6,
          "column": 11
        }
      ],
      "stack": [
        "GraphQLError: Cannot query field \"logo\" on type \"AirtableData\".",
        "    at Object.Field (node_modules/graphql/validation/rules/FieldsOnCorrectType.js:53:31)",
        "    at Object.enter (node_modules/graphql/language/visitor.js:324:29)",
        "    at Object.enter (node_modules/graphql/language/visitor.js:375:25)",
        "    at visit (node_modules/graphql/language/visitor.js:242:26)",
        "    at validate (node_modules/graphql/validation/validate.js:73:24)",
        "    atnode_modules/express-graphql/index.js:121:32",
        "    at runMicrotasks (<anonymous>)",
        "    at processTicksAndRejections (internal/process/task_queues.js:93:5)"
      ]
    }
  ]
}

However, now I can see airtableField and allAirtableField queries in the GraphQL explorer. If I query them:

allAirtableField {
  nodes {
    raw {
      filename
    }
  }
}

I can get the file node.

{
  "data": {
    "allAirtableField": {
      "nodes": [
        {
          "raw": [
            {
              "filename": "apollo.svg"
            }
          ]
        }
      ]
    }
  }
}

I’m not a Gatsby pro… is this what is supposed to happen? Or am I doing something wrong? 😕

[jbolda]

What we do here is create a new node that ties this field to that new file node that is created. You may just need to restart the gatsby develop if you haven't. I don't think this will rebuild itself save (e.g. hot reloading).

You will likely go from a node that mirrors the JSON data Airtable would send like below:

to a node with a localFiles:

The localFiles will contain that file node that you are seeing in your query of allAirtableField. My assumptions may very well be wrong, but please let me know if this helps.

[brandonweiss]

Hmm, I don’t seem to have a localFiles field 🤔

I dug through the code and I can see that there is a conditional where you check if there are any local files before creating that field.

But I just traced it through and the localFiles___NODE property is getting set to an array containing the node’s ID. So it seems like it should work… 🤔

[jbolda]

Hmm, part of me wonders if it is specifically an issue with a svg? I see your example using it.

[brandonweiss]

Or wait, I think I misunderstood. What I was looking at is the new node for the “AirtableField” being created? But when I look at processedData in checkChildNode, I can see that it has the link:

{
  logo___NODE: '16f22541-3d66-5a9f-902d-7215f455e333'
}

It seems like it should work?

[brandonweiss]

Ach, I misunderstood on what node the localFiles field was supposed to be. Sorry, I’m a bit new to Gatsby, let me start over.

The AirtableField is all good. I can see the localFiles property. That node appears to be fine. The problem is what I originally thought. The logo field that should be linked to the AirtableField node just isn’t there for some reason.

[brandonweiss]

Hmm, maybe I found the problem?

processedData is passed into checkChildNode here:

https://github.com/jbolda/gatsby-source-airtable/blob/6935e9a4539a3ce6774d785d5d0f371e156210fd/gatsby-node.js#L221

processedData is mutated to create the link here:

https://github.com/jbolda/gatsby-source-airtable/blob/6935e9a4539a3ce6774d785d5d0f371e156210fd/gatsby-node.js#L257-L259

But if you step back out of that function, processedData doesn’t seem to have been mutated. When I inspect it here:

https://github.com/jbolda/gatsby-source-airtable/blob/6935e9a4539a3ce6774d785d5d0f371e156210fd/gatsby-node.js#L238

It doesn’t have the logo___NODE property.

[brandonweiss]

FML. I updated some seemingly unrelated packages (gatsby-image, gatsby-plugin-sharp, and gatsby-transformer-sharp) and now it works 🙄

[jbolda]

There is some async/promise things going on which may explain why your log didn't see it mutated. We only mutate locally to "build" up the data on the node, and when that is complete we use it to create the node.

Well, I am glad that you figured it out at least. It seems that upstream has been having a few issues and eating the true error, then giving us unhelpful remains.

[brandonweiss]

Ah, that makes sense! Thanks for your help!