jbolda / gatsby-source-airtable Goto Github PK

The version of the Airtable API client currently being used uses an old version of lodash which has a known security vulnerability. We should upgrade this repo to version 0.7.0 or greater to fix this.

Happy to make a PR updating the NPM package, but as I haven't contributed before, I wanted to drop an issue first and make sure it wasn't already a known issue. Thanks!

Hi there!

First off - this is an awesome project. It's worked basically flawlessly and I've been really impressed. So, kudos.

I wanted to reach out about a bit of confusion I had around the mapping feature. I've got a formula field (isHidden) that does an OR on two other fields and produces either 0 or 1. This pulls into graphql just fine. I read the following:

Optionally, you may provide a "mapping". This will alert the plugin that column names you specify are of a specific, non-string format of your choosing

and took that to mean I could transform the data to a different data type. In my case, I could coerce my formula output into a boolean. There's a very good chance I'm misunderstanding what that feature is supposed to do.

Expected:

{ isHidden: 1 }
       + 
{ mapping: { isHidden: 'Boolean' } }

// becomes

{ isHidden: true }

Actual:

{ isHidden: 1 } 
       + 
{ mapping: { isHidden: 'Boolean' } }

// becomes

{
  isHidden: {
    id: "abc-123",
    raw: 1
  }
}

Anyway, feel free to let me know if I'm doing something foolish. This is mostly for testing anyway, so no big priority.

Firstly, thank you all for the greate package.

I'm facing the issue when I'm running gatsby develop command.
Below are the error messages:

warn Multiple node fields resolve to the same GraphQL field `Airtable.data.Project` - [`Project`, `Project___NODE`]. Gatsby will use `Project___NODE`.
warn Multiple node fields resolve to the same GraphQL field `Airtable.data.Publication` - [`Publication`, `Publication___NODE`]. Gatsby will use `Publication___NODE`.

Package versions:

"gatsby": "^2.18.13",
"gatsby-source-airtable": "^2.0.8",

So anyone has the solution to resolve yet? Many thanks

hello, this might be due to my misunderstanding how gatsby-source-airtable queries using GraphQL, but are duplicate field names across tables not allowed/deprecated?

I've just run into an issue where my mappings where not correctly applying. I managed to try this down to me using the cleanedKey not the actual column name as is in Airtable.

Do you think this is a bug in the code and we should be using the cleanedKey here: https://github.com/jbolda/gatsby-source-airtable/blob/master/gatsby-node.js#L194

Or is this behavour expected?

Happy to I open a PR to either fix the code or clarify that you need to use the actual column name within your gatsby-config.js?

Hey! I noticed that when specifying the tableView option that the results of the query do not come back in the same order as the records in the view.

For example, here are the records:

And here is the query and response:

Thanks!

When I run gatsby clean && gatsby build && gatsby serve I am getting 404s for some file attachments from Airtable.

• gatsby-source-airtable@^2.0.10
• gatsby-source-filesystem@^2.1.38

I have a page with 37 records that get pulled from airtable. The first 27 work and for the last 10 all the images end up 404ing. All the urls for the images look something like like this, the first 27 work and the last 10 get 404s:

static/b06e88f3b8a3788b42e8dc5b475f67b7/5d6e7/jacob-randall-square.jpg

I can't figure out why this is happening. The build logs don't show any obvious errors

I know this isn't a great bug-report with a proper reproducible case, but I don't have much else to go on, I was hoping someone who knows how the internals of the library works might be able to point me in the right direction for debugging.

Thanks 🙌

Hello,

Does anybody have a working example of pulling in remote image URLs from Airtable and making them available within gatsby-image (i.e. for lazy loading / optimization etc..)

Thanks!

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? 😕

Hi, thanks again for the work on this very helpful plugin. This is not a bug, just a question about GraphQL filtering strategy. I can ask elsewhere if that seems appropriate.

I have a table of organizations, and each organization has members. Some members are marked as public, but some are private.

I am trying to create a query that lists all the organizations with members, excluding the private members.

(I can't do this on the client side since the private members would still be in the JSON cache.)

So in my organization page template I'm trying to do something like this, which works (slightly modified for brevity):

export const pageQuery = graphql`
  query organizationQuery($slug: String!) {
    organization: airtable(
      fields: { slug: { eq: $slug } }
    ) {
      data {
        Name
        Description
        Person {
              id
              data {
                Name
                Public
              }
          }
      }
    }
  }
`

So I'm hoping to do something like Person(Public: true) and filter out the private members. Any ideas how to approach this — does the plugin support it, or can I somehow configure the schema to accept?

I am trying to make a simple algolia and airtable search engine.

I am able to query the airtable DB into the algolia API.

My issue is that when i want to create a page for each of the results the airtable query does not work.

However, the query works in the gatsby.config but no where else in the repo.

I have the correct plugins installed (i am using NPM & i have tried Yarn) and I have the correct API keys installed because i can see it works on the dev branch and in algolia.

What's strange is that in the graqphQL explorer airtable is not an option and returns an error. But then how does it work getting into Algolia in the gatsby.config file?? I have used a ton of example repos including this one.

Wonder if anyone has seen this before

the master repo
https://github.com/ethaneisenhard/gatsby-algolia-airtable2

the dev working repo (just the airtable to algolia connection)
https://github.com/ethaneisenhard/gatsby-algolia-airtable2/tree/dev

the issue NOT working repo (airtable to algolia connection plus the createPage node attempt)
https://github.com/ethaneisenhard/gatsby-algolia-airtable2/tree/issue

the issue repo is using a different Base in my Airtable API than the working Dev. I copied the issue base one from the recipe example in this repo.

https://github.com/jbolda/gatsby-source-airtable/tree/master/examples/recipes-with-photos

I was trying to follow the tutorial here but after adding the plugin config for gatsby-source-airtable I get the following error:

$ gatsby develop
success delete html and css files from previous builds — 0.014 s
success open and validate gatsby-config — 0.004 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success copy gatsby files — 0.009 s
success onPreBootstrap — 0.435 s
error Plugin gatsby-source-airtable returned an error

  TypeError: Cannot destructure property `createNode` of 'undefined' or 'null'.
  
  - gatsby-node.js:10 Object.exports.sourceNodes
    [airtable-test]/[gatsby-source-airtable]/gatsby-node.js:10:43
  
  - api-runner-node.js:110 runAPI
    [airtable-test]/[gatsby]/dist/utils/api-runner-node.js:110:36
...

Environment

• OS: MacOS 10.14.3
• node: 10.15.1
• gatsby-cli: 2.4.12

To reproduce:

gatsby new airtable-test https://github.com/davad/gatsby-hampton-theme
cd airtable-test
# this actually fails in my environment due to libvips vs sharp
# it's necessary to add a key to package.json e.g. resolutions.sharp = "0.21.3"
yarn # repeat install due to previous failure
# edit gatsby-config.js to add `gatsby-source-airtable` and one table as described in README (tutorial looks out of date)
gatsby develop
# fails with error as above

I'm fairly new to gatsby, am I missing something?

This plugin is extremely useful, I have been building the third project with it.

Now, however with my latest project I would like to optimize the image that are being pulled in, by using the example here that uses gatsby-transform-sharp.

I have tried to debug for a few days now, here is the most noteworthy behaviour:

When I query childImageSharp, it seems to exist:

However when I try to get the width property gatsby fails without warning and gives me back this message in graphql:

I have tried reinstalling, changing the order of the plugins, trying different names for the variable, narrowing the database down to 1 row, so that I don't get error for empty fields, taken out all query except one to be sure that is the problem.

Here are the dependencies I am using:

{
  "name": "HH",
  "description": "D",
  "version": "1.0.0",
  "author": "",
  "dependencies": {
    "antd": "^3.24.2",
    "babel-plugin-styled-components": "^1.10.6",
    "gatsby": "^2.18.5",
    "gatsby-image": "^2.2.33",
    "gatsby-plugin-catch-links": "^2.0.13",
    "gatsby-plugin-feed": "^2.2.0",
    "gatsby-plugin-google-analytics": "^2.0.19",
    "gatsby-plugin-lodash": "^3.0.5",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-nprogress": "^2.0.10",
    "gatsby-plugin-offline": "^2.1.0",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sharp": "^2.3.2",
    "gatsby-plugin-sitemap": "^2.1.0",
    "gatsby-plugin-styled-components": "^3.1.13",
    "gatsby-plugin-twitter": "^2.0.13",
    "gatsby-remark-autolink-headers": "^2.0.16",
    "gatsby-remark-copy-linked-files": "^2.0.12",
    "gatsby-remark-images": "^3.0.11",
    "gatsby-remark-prismjs": "^3.2.9",
    "gatsby-remark-responsive-iframe": "^2.1.1",
    "gatsby-source-airtable": "^2.0.12",
    "gatsby-source-filesystem": "^2.1.38",
    "gatsby-transformer-remark": "^2.3.12",
    "gatsby-transformer-sharp": "^2.3.6",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "prismjs": "^1.16.0",
    "react-cookie-consent": "^2.4.0",
    "react-disqus-comments": "^1.4.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-mailchimp-subscribe": "^2.1.0",
    "react-player": "^1.12.0",
    "react-share": "^2.4.0",
    "react-twitter-embed": "^3.0.3",
    "react-twitter-widgets": "^1.7.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.1",
    "styled-components": "^4.3.2",
    "url-join": "^4.0.0"
  },
  "devDependencies": {
    "cli-glob": "^0.1.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.2.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "gh-pages": "^2.0.1",
    "prettier": "^1.17.0",
    "remark-cli": "^6.0.1",
    "remark-preset-lint-recommended": "^3.0.2",
    "stylefmt": "^6.0.3",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.3.0",
    "write-good": "^1.0.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "",
  "main": "n/a",
  "scripts": {
    "develop": "gatsby develop",
    "dev": "npm run develop",
    "serve": "gatsby serve",
    "build": "gatsby build",
    "build:pp": "gatsby build --prefix-paths",
    "build:gh": "npm run clean && npm run build:pp && gh-pages -d public",
    "clean": "rm -rf public && rm -rf .cache",
    "lint:js": "eslint --ext .js,.jsx .",
    "format:js": "prettier '**/*.{js,jsx}' --write"
  },
  "remarkConfig": {
    "plugins": [
      "remark-preset-lint-recommended"
    ]
  }
}

and my config file:

`const urljoin = require("url-join");
const config = require("./data/SiteConfig");
require("dotenv").config({
  path: '.env.${process.env.NODE_ENV}',
})

module.exports = {
  pathPrefix: config.pathPrefix === "" ? "/" : config.pathPrefix,
  siteMetadata: {
    siteUrl: urljoin(config.siteUrl, config.pathPrefix),
    rssMetadata: {
      site_url: urljoin(config.siteUrl, config.pathPrefix),
      feed_url: urljoin(config.siteUrl, config.pathPrefix, config.siteRss),
      title: config.siteTitle,
      description: config.siteDescription,
      image_url: '${urljoin(
        config.siteUrl,
        config.pathPrefix
      )}/logos/logo_favicon.png',
      copyright: config.copyright
    }
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-styled-components',
      // options: {
      //   // Add any options here
      // }
    },
    // {
    //   resolve: 'gatsby-source-filesystem',
    //   options: {
    //     name: 'src',
    //     path: '${__dirname}/src/',
    //   },
    // },

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "assets",
        path: '${__dirname}/static/'
      }
    },
    {
      resolve: 'gatsby-source-airtable',
      options: {
        apiKey: process.env.AIRTABLE_API_KEY, // specify via env
        tables: [
          {
            baseId: process.env.AIRTABLE_BASE, // specify via env
            tableName: process.env.AIRTABLE_TABLE_NAME, // specify via env
            tableView:'published',
            queryName: 'posts', // optional
            mapping: { myimage: 'fileNode' },
            tableLinks: ['reviews', 'brand']
          },
          {
            baseId: process.env.AIRTABLE_BASE,
            tableName: process.env.AIRTABLE_TABLE_NAME_LINKED
          },
          {
            baseId: process.env.AIRTABLE_BASE,
            tableName: process.env.AIRTABLE_TABLE_NAME_LINKED2
          }
        ]
      }
    },
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 690
            }
          },
          {
            resolve: "gatsby-remark-responsive-iframe"
          },
          "gatsby-remark-prismjs",
          "gatsby-remark-copy-linked-files",
          "gatsby-remark-autolink-headers"
        ]
      }
    },
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: config.googleAnalyticsID
      }
    },
    {
      resolve: "gatsby-plugin-nprogress",
      options: {
        color: config.themeColor
      }
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-catch-links",
    "gatsby-plugin-twitter",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: config.siteTitle,
        short_name: config.siteTitleShort,
        description: config.siteDescription,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: "minimal-ui",
        icons: [
          {
            src: "/logos/logo_favicon.png",
            sizes: "192x192",
            type: "image/png"
          },
          {
            src: "/logos/logo_favicon.png",
            sizes: "512x512",
            type: "image/png"
          }
        ]

      }
    },
    "gatsby-plugin-offline",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-lodash",
    {
      resolve: "gatsby-plugin-feed",
      options: {
        setup(ref) {
          const ret = ref.query.site.siteMetadata.rssMetadata;
          ret.allMarkdownRemark = ref.query.allMarkdownRemark;
          ret.generator = "HardwareHero";
          return ret;
        },
        query: '
        {
          site {
            siteMetadata {
              rssMetadata {
                site_url
                feed_url
                title
                description
                image_url
                copyright
              }
            }
          }
        }
      ',
        feeds: [
          {
            serialize(ctx) {
              const { rssMetadata } = ctx.query.site.siteMetadata;
              return ctx.query.allAirtable.edges.map(edge => ({
                date: edge.node.data.date,
                title: edge.node.data.title,
                url: rssMetadata.site_url + "/" + edge.node.data.slug,
                guid: rssMetadata.site_url + "/" + edge.node.data.slug,
                custom_elements: [
                  { reviews: edge.node.data.reviews ? edge.node.data.reviews[0].data.score : null },
                  { brand: edge.node.data.brand ? edge.node.data.brand[0].data.name : null },
                  { category: edge.node.data.category }
                ]
              }));
            },
            query: `
            {
              allAirtable(
                limit: 1000
                sort: {fields: data___date, order: DESC}
                filter: {data: {status: {eq: "publish"}}}
              ) {
                edges {
                  node {
                    data {
                      slug
                      date
                      title
                      tags
                      price
                      category
                      brand {
                        data{
                          name
                        }
                      }
                    }
                  }
                }
              }
            }
            ',
            output: config.siteRss
          }
        ]
      }
    }
  ]
};
`

Here is my query:

export const pageQuery = graphql`
  query IndexQuery($dateFormat: String) {
    allAirtable(
      limit: 2000
      sort: {fields: data___date, order: DESC}
      filter: { data : { tags: { eq: "Phone" }, status: {eq: "publish"} } }
    ) {
      edges {
        node {
          data {
            slug
            date(formatString: $dateFormat)
            title
            tags
            category
            myimage {
              localFiles{
                childImageSharp {
                  fluid{
                    src
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

It's possible this is expected behavior somehow, or I'm configuring it wrong. Feedback welcome.

Problem

I have a base where different tables have the same field name, but different types. Sometimes (when one is an array/multiple choice and the other field is string/single choice) this is handled gracefully with a warning. But other times (when one is a number and one is a string) the error was an unhandled rejection that was difficult to track down.

Temporary solution

I had to change the Airtable field types to match, and in the future I'll have to manually check to make sure that new field types don't conflict with any of the existing fields.

Better solutions

• I was surprised that the field names conflict at all. Perhaps this could be avoided somehow.
• Alternatively, I would expect there to always be a more friendly warning about conflicting types, not an unhandled rejection.

Extra details:

The friendly warning was like this:

This is what happens with Array[string] type (multiple choice) vs. String (single choice) type conflicts.

(Ideally this warning would include the name of both tables involved — currently it only shows one of the table names.)

warning There are conflicting field types in your data. GraphQL schema will omit those fields.
Airtable.data.Sector:
 - type: array<string>
   value: [ 'Life Sciences' ]
 - type: string
   value: 'Materials'

The unhandled rejection:

This is what happens with a Number type vs. String type conflict.

error gatsby-node.js returned an error


  TypeError: Cannot read property 'publicProjectsAndOrganizations' of undefined

  - gatsby-node.js:306 graphql.then.result
    /Users/chrisblow/git/thedataguild.com/gatsby-node.js:306:21

  - util.js:16 tryCatcher
    [lib]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  - promise.js:606 Promise._settlePromiseCtx
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:606:10

  - async.js:138 Async._drainQueue
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:138:12

  - async.js:143 Async._drainQueues
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:17:14


error UNHANDLED REJECTION


  TypeError: Cannot read property 'filter' of undefined

  - api-runner-node.js:274 Promise.mapSeries.catch.then.results
    [thedataguild.com]/[gatsby]/dist/utils/api-runner-node.js:274:42

  - util.js:16 tryCatcher
    [thedataguild.com]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [thedataguild.com]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [thedataguild.com]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [thedataguild.com]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [thedataguild.com]/[bluebird]/js/release/promise.js:693:18

  - async.js:133 Async._drainQueue
    [thedataguild.com]/[bluebird]/js/release/async.js:133:16

  - async.js:143 Async._drainQueues
    [thedataguild.com]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [thedataguild.com]/[bluebird]/js/release/async.js:17:14

According to the gatsby docs, you can "query the publicURL field of File nodes found in your data layer to trigger copying those files to the public directory and get URLs to them."

localFiles does not seem to have this field. I'd appreciate any insight on how one might be able to query airtable image attachments and move them to /public/. The idea being that I could reference images directly in my markdown.

Maybe this needs to be done in a custom gatsby-node script (iterate over Photos array, idk), but I haven't been able to fund much useful documentation on how to approach this...

Let me know if you have any ideas, and how I can help.

Hello, my Airtable column contains URL strings to remote images, not attachments. So I am unable to use the example in examples/recipes-with-photos, since those are attachments.

My understanding is that gatsby-source-airtable uses gatsby-plugin-remote-images under the hood, so how can I set this up?

view looks to be an optional parameter when using the Airtable node library, so perhaps this library's options.tables[N].tableView parameter could also be made optional? I'm not using a view and, unless I provide an empty string, am met with the following error when building my application:

Error: AssertionError [ERR_ASSERTION]: Airtable: invalid parameters for 'select': * the value for 'view' should be a string

There is a missing comma in the example code in the readme.

I have a GatsbyJS project that is solely using Airtable at the moment, and during build I am able to fetch the data, but it immediately throws this error on the step that follows which I believe is build:

...
12:49:49 AM: success onPreBootstrap — 0.672 s
12:49:49 AM: success delete html and css files from previous builds — 0.104 s
12:49:49 AM: success copy gatsby files — 0.016 s
12:49:50 AM: fetch all Airtable rows from 1 tables: 536.460ms
12:49:50 AM: error Plugin gatsby-source-airtable returned an error
12:49:50 AM: 
12:49:50 AM:   TypeError: Promise.all(...).reduce is not a function
12:49:50 AM:   
12:49:50 AM:   - gatsby-node.js:115 Object.exports.sourceNodes
12:49:50 AM:     [repo]/[gatsby-source-airtable]/gatsby-node.js:115:59
12:49:50 AM:   
12:49:50 AM:   
12:49:50 AM:   - next_tick.js:189 process._tickCallback
12:49:50 AM:     internal/process/next_tick.js:189:7
12:49:50 AM:   
12:49:50 AM: 
12:49:50 AM: error Command failed with exit code 1.
12:49:50 AM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
12:49:50 AM: Caching artifacts
12:49:50 AM: Started saving node modules
...
12:49:50 AM: Error running command: Build script returned non-zero exit code: 1
12:49:50 AM: Failing build: Failed to build site
12:49:50 AM: failed during stage 'building site': Build script returned non-zero exit code: 1
12:49:50 AM: Finished processing build request in 45.602681982s

This seems to have occurred both when I had no data being fetched and when I did, so I changed line number 115 in gatsby-node.js

let flattenedChildNodes = await Promise.all(childNodes).reduce(
    (accumulator, currentValue) => accumulator.concat(currentValue),
    []
);

to

let flattenedChildNodes = await Promise.all(childNodes).then(nodes => nodes.reduce(
    (accumulator, currentValue) => accumulator.concat(currentValue),
    []
));

and it works fine now. Some versions details:

"node": 8.12.0
"gatsby": "next",
"gatsby-source-airtable": "^2.0.0-beta.1",

Continuing our discussion:
gatsbyjs/gatsby#9056

I will keep doing some debug and update this post in the next few hours :-)

Could it be the stringify calls in
gatsby-node.js?

Would it be possible to update to the latest version the Airtable package please?
It looks like there is a vulnerability in the previous one.
Thanks a lot! :)

Screenshot of the email I received this morning.

very confused how i can make use this to create pages at /fieldvalue. field in airtable is "name"

ENV vars prefixed with GATSBY_ are sent to the client.

OS Env Vars which are prefixed with GATSBY_ will become available in browser JavaScript.

If you don't want someone having access to the API key that you're putting in gatsby-config.js, you almost certainly don't want to be sending it to the client/browser.

Since 2.0, I am seeing an issue where it seems that fields of the "Formula" type in Airtable are not recognized by gatsby-source-airtable. Is this a known limitation or bug?

I have an Airtable column for image attachments mapped as a fileNode in gatsby-config.js and am grabbing those images and performing a resize on them with sharp with no problems for small sets of images (e.g., 20 rows).

The build succeeds and the following GraphQL gives me the thumbnails I want:

products: allAirtable(filter: {table: {eq: "Prints"}}) {
  edges {
    node {
      data {
        Name
        Image_File {
          localFiles {
            childImageSharp {
              resize(width: 440) {
                src
              }
            }
          }
        }
        Reference
      }
    }
  }
}

However, when I throw my full set of production data (> 500 rows) the build will stall out (I have to ^C to kill it eventually) when I start getting errors from localFileCheck() in gatsby-source-airtable:

You specified a fileNode, but we caught an error. First check that you have gatsby-source-filesystem installed?
 TypeError: Cannot read property 'id' of undefined
at Promise.all.map.attachmentNode (/Users/jonesbp/src/store-demo/node_modules/gatsby-source-airtable/gatsby-node.js:281:42)

Each of which is preceded by a warning from gatsby-source-filesystem:

**Failed to process remote content https://dl.airtable.com/.attachments/6895bafdd284a8d711d89dc8440e549f/f6a8dc3c/2dI1uQ-JTcGJkNCp5ODKqAz-1-edit-1.jpeg**

Where the URL will be whatever URL is associated with that row of Airtable data. If I copy the URL to my browser, the image will load.

So my suspicion of what is happening is that I am (through gatsby-source-filesystem via gatsby-source-airtable) making too large a burst of HTTP requests and Airtable begins to block my requests. gatsby-source-filesystem then gives undefined data back to gatsby-source-airtable generating the error.

I have been trying to find the best place to add a throttle to gatsby-source-airtable to test this theory (and to mitigate this problem if the theory is correct), but so far have not been successful and feel like I need to ask for help from someone that understands how the remote requests work better than I do.

I have an Airtable column that can link to multiple records. I'm able to retrieve these fine in GraphQL but when the column is empty I get a null instead of an empty list [ ]. Is there any way to ensure that I get an empty list instead?

Hello I just opened an issue in the gatsbyjs repository if you can help me please.

gatsbyjs/gatsby#8175

gatsby new airtableExample

yarn add gatsby-source-airtable

add in gatsby.config airtable data.

run gatsby develop or build, will get # is not an iterator. losing my mind

There is extensive documentation around how to deep link across tables but I wonder if it is possible to link between records within the same table?

My use case in this instance is I have a list of words within a table. I have a "Related Words" column which links to other records in the same table.

I can't see this use case detailed in the documentation so maybe it is not supported.

I tried upgrading gatsby-source-airtable plugin from 2.0.3 ❯ 2.4.2 and the source plugin stopped working and my build has started failing.

The full stacktrace says:

 TypeError: tableOptions.tableLinks.map is not a function
  
  - gatsby-node.js:75 tables.forEach.tableOptions
    [***]/[gatsby-source-airtable]/gatsby-node.js:75:82
  
  - Array.forEach
  
  - gatsby-node.js:46 Object.exports.sourceNodes
    [***]/[gatsby-source-airtable]/gatsby-node.js:46:10

The plugin was working just fine in version 2.0.3

Here is my package.json for reference:

{
  "name": "****",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "develop": "gatsby develop",
    "start": "npm run develop",
    "build": "npm run clean && gatsby build",
    "test": "jest --modulePaths=src",
    "clean": "rm -rf public && rm -rf .cache",
    "serve": "gatsby serve",
    "lint": "eslint --fix ./src"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/***.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/***/issues"
  },
  "homepage": "https://github.com/#readme",
  "devDependencies": {
    "@types/react-dom": "^16.8.4",
    "babel-jest": "^24.8.0",
    "babel-preset-gatsby": "^0.1.11",
    "dotenv": "^8.0.0",
    "eslint": "^5.16.0",
    "eslint-config-gatsby-standard": "^2.1.1",
    "eslint-plugin-jest": "^22.5.1",
    "fs-extra": "^7.0.1",
    "gatsby-plugin-root-import": "^2.0.5",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.4",
    "husky": "^2.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.8.0",
    "jest-dom": "^3.2.0",
    "jest-fetch-mock": "^2.1.2",
    "node-sass": "^4.12.0",
    "prettier": "^1.17.0",
    "pretty-quick": "^1.10.0",
    "prop-types": "^15.7.2",
    "react-hot-loader": "^4.8.4",
    "react-mock": "^6.0.1",
    "react-test-renderer": "^16.8.6",
    "react-testing-library": "^7.0.0"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "dependencies": {
    "@emotion/core": "^10.0.10",
    "@emotion/styled": "^10.0.10",
    "bootstrap": "^4.3.1",
    "cookie": "^0.3.1",
    "final-form": "^4.12.0",
    "final-form-calculate": "^1.3.1",
    "gatsby": "^2.4.2",
    "gatsby-plugin-emotion": "^4.0.6",
    "gatsby-plugin-google-tagmanager": "^2.0.13",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-rollbar": "^1.0.0",
    "gatsby-source-airtable": "^2.0.3",
    "gatsby-source-filesystem": "^2.0.33",
    "qs": "^6.7.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-dropdown": "^1.6.4",
    "react-final-form": "^4.1.0",
    "react-final-form-listeners": "^1.0.2",
    "react-helmet": "^5.2.1",
    "react-intersection-observer": "^8.23.0",
    "react-loadable": "^5.5.0",
    "react-simple-dropdown": "^3.2.3",
    "react-slick": "^0.24.0",
    "slick-carousel": "^1.8.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick staged"
    }
  }
}

Here is what my mappings config looks like:

    {
      resolve: `gatsby-source-airtable`,
      options: {
        apiKey: process.env.AIRTABLE_API_KEY,
        tables: [
          {
            baseId: process.env.AIRTABLE_BASE_ID,
            tableName: `Homepages`,
            tableView: `Grid view`,
            tableLinks: `SearchByDomainLinks`,
          },
          {
            baseId: process.env.AIRTABLE_BASE_ID,
            tableName: `SearchByDomainLinks`,
            tableView: `Grid view`,
            tableLinks: `Homepages`,
          },
        ],
      },
    },

Thank you so much for such a useful source plugin! I seem to be running into an issue with combining text/markdown and fileNode in the same mapping key on a table. If I just use one or the other, things work as expected, so I could theoretically just use a markdown component and have the markdown fields be text, but this feels like it should work. If I use both together, I get an error like this:

AirtableField.raw:
 - type: array<object>
   value: [ { id: 'attK6ZPYWYZPEI9Ut', url: 'https://dl.airtable.com/.attachments/6bdc2db7bea5ca8572a8fa4e74e1c656/3c5578
7f/some-image.png', filename: 'some-image.png', size: 65808, type: 'image/png', thumbnails: [Object] } ]  
 - type: string
   value: 'Wow, such cms. *Wow*. It\'s a thing.'  

I'm sure you can guess which field is which 😂 Is there something special I need to do to account for both or have I stumbled across a bug? I haven't tried putting the two fields in different tables for whatever that's worth.

Edit: Including the config in case that's useful:

    {
      resolve: 'gatsby-source-airtable',
      options: {
        tables: [
          {
            baseId: 'asdfasdf',
            tableName: 'Foo',
            mapping: { Description: 'text/markdown', Banner: 'fileNode' },
          },
        ],
      },
    },

This is a great Gatsby plugin! I used it to replace gatsby-source-airtable when I realized it wasn't really designed for multiple tables.

I just had some quick feedback notes. I found a couple spots in the readme where some additional clarification would be good, the language is a little ambiguous.

If you are using a field type of Link to a Record, you may specify the field name in tableLinks (matching the name shown in Airtable, not the escaped version) and this plugin will create the graphql links for you.

• I think "you may specify" should be "you must specify".
• Perhaps clarify it is the name of the linked-from field, not the name of the linked-to field, which must be specified in the tableLinks array.

Additionally you may provide a "mapping". This will alert the plugin that column names you specify are of a specific, non-string format. This is particularly useful if you would like to have gatsby pick up the fields for transforming, e.g. text/markdown.

• You "may provide X, which is helpful for Y" could perhaps be better phrased as "must provide X in order to Y." (Assuming it is actually required.)
• Perhaps clarify explicitly that "string format is the default" (if that is true.)

Also:

• It's not clear to me when I would use the queryName or why I need the tableView. (This was also not clear to me on gatsby-source-airtable ... adding and removing it seems to have no effect in my case.)

Overall it would be super helpful to have a public example base and a project that referenced those field names. Perhaps if I have time I can work on this ticket, but I wanted to go ahead and file it since I just encountered these issues while getting started. Again, thanks for your work here! 👏

is it possible to render images from within markdown

ie.

![Live Nativity](/images/livenativity.jpg)

so that these could be processed by gatsby like it does with general markdown files

using gatsby-transformer-remark with the files being hosted with the codebase

For allAirtable / airtable queries, if your base's table has a column heading for, say, column3, but none of the rows have values for column3, making a graphql query using column3 returns an error with message:

"message": "Cannot query field \"[column3]\" on type \"AirtableData\".",

In my instance, column3 stands for a text field that will supply alt text, when appropriate - none of my records currently have alt text, and I want to have my application react dynamically depending on whether or not the alt text is there.

My workaround for now is to use a record with a value that I then filter in the allAirtable query - by having a record in the table with values in my column3 field but then filtering it, the other column3's for the records not excluded come across, as I would expect, as null.

Let me know if you need any more info, happy to assist!

When I try running gatsby develop I get an error: Error: <user_directory>\node_modules\gatsby-source-airtable-linked\gatsby-node.js:4 exports.sourceNodes = async({ boundActionCreators }, SyntaxError: Unexpected token (

I'm trying a very basic Todo app with an airtable with fields of "text" and "done".

Running this first request from GraphiQL works great:

{
  allAirtable(filter:{table: {eq: "Todos"}}){
    edges{
      node{
        id
        data{
          text
          done
        }
      }
    }
  }
}

The above returns the result below:

{
  "data": {
    "allAirtable": {
      "edges": [
        {
          "node": {
            "id": "61a3f023-0dbe-51db-8602-dced48b86e67",
            "data": {
              "text": "eat",
              "done": null
            }
          }
        },
        {
          "node": {
            "id": "5807002b-ab6d-5eb8-9435-dcc3daa1d84e",
            "data": {
              "text": "sleep",
              "done": true
            }
          }
        },
        {
          "node": {
            "id": "390ed75e-36fa-5459-986e-b0dda9974208",
            "data": {
              "text": "code",
              "done": null
            }
          }
        }
      ]
    }
  }
}

When I update a field in airtable then make another request, I the results never change (unless I stop and restart the server). Any ideas? Thanks so much for all the time you've put into this.

While I was doing the development build, I get the following error :

error Plugin gatsby-source-airtable returned an error


  TypeError: data[key].map is not a function

  - gatsby-node.js:195 fieldKeys.forEach.key
    [d2c-listing]/[gatsby-source-airtable]/gatsby-node.js:195:41

  - Array.forEach

  - gatsby-node.js:180 processData
    [d2c-listing]/[gatsby-source-airtable]/gatsby-node.js:180:19

  - gatsby-node.js:130 allRows.map
    [d2c-listing]/[gatsby-source-airtable]/gatsby-node.js:130:31

  - Array.map

  - gatsby-node.js:122 Object.exports.sourceNodes
    [d2c-listing]/[gatsby-source-airtable]/gatsby-node.js:122:28

  - next_tick.js:77 process.internalTickCallback
    internal/process/next_tick.js:77:7


warning The gatsby-source-airtable plugin has generated no Gatsby nodes. Do you need it?

I am on v 2.0.6. Uncertain what could be causing this.

I have a Gatsby site that sources around 130 images from 4 tables. Starting just within the last few hours, the sourcing process is being cut short by my static host, Netlify, and just was able to recreate on Render.com.

This particular part of the build script completes fine with a local build at around 22 seconds

fetch all Airtable rows from 4 tables: 966.588ms
success source and transform nodes - 22.539 s

On Netlify, it seems that the process is getting truncated, and I'm afraid I don't have any version bumps or new plugin additions to test against.

9:00:25 PM: fetch all Airtable rows from 4 tables: 622.436ms
9:00:33 PM: success source and transform nodes — 9.333 s

It's grabbing the first 15-20 images in the proper order, so I'm guessing maybe some sort of API pagination issue is causing static hosts build images to think the sourcing is completed before it's meant to be.

My deps:

    "babel-plugin-styled-components": "^1.8.0",
    "gatsby": "^2.5.0",
    "gatsby-image": "^2.1.0",
    "gatsby-plugin-google-analytics": "^2.0.9",
    "gatsby-plugin-layout": "^1.1.0",
    "gatsby-plugin-manifest": "^2.0.5",
    "gatsby-plugin-nprogress": "^2.0.7",
    "gatsby-plugin-offline": "^2.0.11",
    "gatsby-plugin-react-helmet": "^3.0.0",
    "gatsby-plugin-sharp": "^2.0.7",
    "gatsby-plugin-sitemap": "^2.0.4",
    "gatsby-plugin-styled-components": "^3.0.3",
    "gatsby-source-airtable": "^2.0.8",
    "gatsby-source-filesystem": "^2.0.36",
    "gatsby-transformer-sharp": "^2.1.4",
    "nuka-carousel": "^4.4.3",
    "path": "^0.12.7",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-helmet": "^5.2.0",
    "styled-components": "^4.1.1",
    "underscore": "^1.9.1"

I tried updating the concurrency value from 1-5, 10, 20, 50, 100. No dice.

Curious if this has happened to anyone else today or maybe I've hit some sort of temporary rate limiting.

Thanks!

Hi and thank you for the amazing plugin!

I'm wondering if there's a way to query table descriptions from my base. That's the text that appears when you hover the small ℹ️ on a table (if the description was provided):

Forgive me if this is already documented, but I couldn't find any mention to it anywhere.

When some fields are empty on a certain row, the api result from airtable doesn't include the field in that row.

{
  "records": [
    {
      "id": "recR4fJQsMlpWyy5A",
      "fields": {
        "Name": "John"
      },
      "createdTime": "2018-12-30T07:10:11.000Z"
    },
    {
      "id": "recoqit7jOBr8m6JK",
      "fields": {
        "Name": "Michael",
        "Notes": "Note1"
      },
      "createdTime": "2018-12-30T07:10:11.000Z"
    }
  ]
}

You can see "Notes" field is missing at the first row. Could we have a fields option?

    {
      resolve: 'gatsby-source-airtable',
      options: {
        apiKey: 'xxx',
        tables: [
          {
            baseId: 'xxx',
            tableName: 'xxx',
            tableView: 'xxx',
            fields: ['Name', 'Notes']
          },
        ],
      },
    }

When fields is specified, the result will always include all the fields with null as default value if none.
This is to prevent graphql query from failing. Refer to gatsbyjs/gatsby#2392

What do you think?

First I want to thank you so much for this wonderful package, airtable plus gatsby has been a game changer. Having people like you out there working on these tools makes it a real joy to be a new developer!

Sorry that I don't know if this is a question, bug, or feature request, I'll try to keep it short:
When I follow your docs and map a column to "text/markdown", I am able to traverse markdownRemark and find the content. However, I can't identify which record the content come from i.e. query it in any meaningful way.

I can render the content column to html right in my components using unified.js, and it works great, but I'm trying to implement some of gatsby-transformer-remark's lovely plugins which seem to be intended for static .md files...

Is there something I am overlooking here? Thanks!

odd, because when I am in developing locally, http://localhost:8000/___graphql, accepts allAirtable

gatsby-node.js

Return new Promise(async resolve => {
      const result = await graphql(`
        {
          allAirtable {
            edges {
              node {
                data {
                  name
                  marketcap
                }
              }
            }
          }
        }
      `)
      console.log(result)

      // For each path, create page and choose a template.
      // values in context Object are available in that page's query
      result.data.allAirtable.edges.forEach(({ node }) => {
        // const isPage = node.table === 'Pages'
        createPage({
          path: node.data.name,
          component: path.resolve(`./src/templates/cipTemplate.js`),
          context: {
            name: node.data.name,
          },
        })
      })
      resolve()
    })

This is a duplicate of #54, but I cannot re-open it. I have however discovered the culprit

The data being returned by Airtable is in the order according to the view, but the order is not respected by the call to Bluebird.map, which is noted in the official docs. This is true even when concurrency is set to 1.

I don't see any official way to fix this with bluebird. Perhaps it could use mapSeries instead of map when concurrency is set to 1? Or not actually create any nodes and create them after (as the return value of map() is a promise which resolves to all the returned values).

Alternately, it could use a different library (such as async.mapLimit https://caolan.github.io/async/v3/docs.html#mapLimit) which does respect data order?

hello, I have two tables,

• "Shows" with a list of exhibitions
• "People" with a list of people

the "Shows" table has a field linked to the "People" table so I can pull in multiple people associated with the exhibitions.

now my gatsby-config looks like this:

    {
      resolve: `gatsby-source-airtable`,
      options: {
        apiKey: process.env.GATSBY_AIRTABLE_APIKEY, 
        tables: [
          {
            baseId: process.env.GATSBY_AIRTABLE_BASEID,
            tableName: `Shows`,
            tableView: `Gallery`,
            tableLinks: [`Entities`, `People`],
            mapping: { Images: `fileNode` }
          },
          {
            baseId: process.env.GATSBY_AIRTABLE_BASEID,
            tableName: `People`,
            tableView: `Main`,
            tableLinks: [`Shows`]
          }
        ]
      }
    }

Now if I do

{
  allAirtable(filter:{table:{eq:"Shows"}}) {
    edges {
      node {
        data {
          Artists
        }
      }
    }
  }
}

I get a array of Artist ids as strings.

But this isn't what I need; I need them 'denormalised' I guess.

How to do so?

Hey there - love the plugin, been testing it out on a new project.

Having a small issue getting the dynamically generated pages to render as static html when the app is built. Wondering if you've seen this issue. I've mimicked the setup in the recipes example in this repo, however in my template, I've commented out the pageQuery and am just passing down the pageContext props into my render method.

Here's what my source looks like in the built app:

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 2.0.18"/><title data-react-helmet="true"></title><link rel="shortcut icon" href="/icons/icon-48x48.png"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#222"/><link as="script" rel="preload" href="/component---node-modules-gatsby-plugin-offline-app-shell-js-0691004cd9de246c1542.js"/><link as="script" rel="preload" href="/app-6373714011b83eb9b224.js"/><link as="script" rel="preload" href="/webpack-runtime-f957ea13a2d82e33112b.js"/><link rel="preload" href="/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json" as="fetch" crossOrigin="use-credentials"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.page={"componentChunkName":"component---node-modules-gatsby-plugin-offline-app-shell-js","jsonName":"offline-plugin-app-shell-fallback-a30","path":"/offline-plugin-app-shell-fallback/"};window.dataPath="520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-6373714011b83eb9b224.js"],"component---node-modules-gatsby-plugin-offline-app-shell-js":["/component---node-modules-gatsby-plugin-offline-app-shell-js-0691004cd9de246c1542.js"],"component---src-templates-charity-template-js":["/component---src-templates-charity-template-js.57ce12669c538349e638.css","/component---src-templates-charity-template-js-8c053edc7291a4faba3f.js"],"component---src-pages-404-js":["/component---src-pages-404-js.13a3da962e6f2e5fc5d2.css","/component---src-pages-404-js-c70d22de1f4612384841.js"],"component---src-pages-index-js":["/component---src-pages-index-js.13a3da962e6f2e5fc5d2.css","/component---src-pages-index-js-8ecae847018a28215e24.js"]};/*]]>*/</script><script src="/webpack-runtime-f957ea13a2d82e33112b.js" async=""></script><script src="/app-6373714011b83eb9b224.js" async=""></script><script src="/component---node-modules-gatsby-plugin-offline-app-shell-js-0691004cd9de246c1542.js" async=""></script></body></html>

Any notes would be helpful, thanks!

Hello

Thanks for this excellent source plugin. While in development I was wondering if there is a way to force to refresh the GraphQl nodes when I update Airtable data.

Currently, the only solution I found was to kill my dev server and start it again.

Maybe there is another trick?

Thanks

I am trying to attach .md files and bring them in using the "fileNode" mapping as stated in your docs.

I can attach, bring in, and locate .txt files without error, but then gatsby-transformer-remark does not recognize these as markdown. So then when I attach .md files instead, it causes the following typeError:

source and transform nodes
fetch all Airtable rows from 2 tables: 806.941ms
error Plugin gatsby-transformer-remark returned an error
  TypeError: Cannot read property 'resolve' of undefined
  - index.js:186 resolve
    [airtable-markdown-docs]/[gatsby]/dist/redux/index.js:186:39
  - debuggability.js:313 Promise._execute
    [airtable-markdown-docs]/[bluebird]/js/release/debuggability.js:313:9

Is this something to do with the way gatsby-source-airtable is bringing in attachments mapped as fileNode? Because obviously gatsby-transformer-remark should have no problem with .md files.

When I specify values for tableLinks, I get TypeError: Cannot read property 'internal' of null

I am specifying the tables like this:

tables: [
        {
          baseId: 'somebase',
          tableName: 'Books',
          tableView: 'Grid view',
          tableLinks: [`Chapters`],
        },
        {
          baseId: 'somebase',
          tableName: 'Chapters',
          tableView: 'Grid view',
        },
]

In this, the linked field in the "Books" table is called "Chapters" which links to records in a table of the same name. Is this the correct usage?

So I'm using this plugin to pull images from my airtable.

In my gastby-config I've mapped my attachment column as filenode:

mapping: {'image': fileNode},

In GraphiQL gatsby image plugins seem to be working
This query:

{ airtable(table: {eq: "table-1"}, data: {slug: {eq: "test-1"}}){ data{ image{ localFiles{ childImageSharp{ fluid(maxWidth: 400) { src } } } } } } }

Provides this response:

{ "data": { "airtable": { "data": { "image": { "localFiles": [ { "childImageSharp": { "fluid": { "src": "/static/08baa0d1735184a4d0dd141d90f564d4-28158c2eb0b0b748efeabc0ec551c623-7eb65.jpg" } } } ] } } } } }

and then going to that src generates the image and appears in browser.

However when i try use this with gatsby-image:

<Img fluid={post.data.image.localFiles.childImageSharp.fluid} />

export const query = graphql query PostQuery { airtable(table: {eq: "table-1"}, data: {slug: {eq: "test-1"}}){ data{ image{ localFiles{ childImageSharp{ fluid(maxWidth: 400) { ...GatsbyImageSharpFluid } } } } } } }

I get this error:

WebpackError: TypeError: Cannot read property 'fluid' of undefined

Is this the plugin's fault? Am i doing something wrong? Any assistant would be appreciated

I can fetch data from airtable using gatsby graphql playground while gatsby running on development mode, but I am unable to push data pulled from airtable into gatsby to algolia when I run npm run build.

gatsby-config.js

const queries = require("./src/utils/algolia")

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-airtable`,
      options: {
        apiKey: `${process.env.AIRTABLE_API_KEY}`,
        tables: [
          {
            baseId: `${process.env.AIRTABLE_BASE_ID}`,
            tableName: `Products`
          },
          {
            baseId: `${process.env.AIRTABLE_BASE_ID}`,
            tableName: `Categories`
          }
        ]
      }
    },
    {
      resolve: `gatsby-plugin-algolia`,
      options: {
        appId: `${process.env.GATSBY_ALGOLIA_APP_ID}`,
        apiKey: `${process.env.ALGOLIA_ADMIN_KEY}`,
        indexName: `${process.env.ALGOLIA_INDEX_NAME}`,
        queries,
        chunkSize: 10000,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
  ],
}

algolia.js

const ProductsQuery = `{
  allAirtable(filter: {table: {eq: "Products"}}) {
    nodes {
      data {
        productId
        name
        slug
        sku
        description
        price
        categories
      }
    }
  }
}`

const flatten = arr =>
  arr.map(({ data }) => ({
    ...data
  }))

const queries = [
  {
    query: ProductsQuery,
    transformer: ({ data }) => flatten(data.allAirtable.nodes),
  }
]

module.exports = queries

Error message
ERROR #11321 PLUGIN
"gatsby-source-airtable" threw an error while running the sourceNodes lifecycle:
Could not find what you are looking for(NOT_FOUND)[Http code 404]
⠧ source and transform nodes
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: gatsby build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kayali/.npm/_logs/2019-10-09T17_46_13_630Z-debug.log

/Users/kayali/.npm/_logs/2019-10-09T17_46_13_630Z-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/shopgo/Desktop/kayali/snipcart/myjam-gatsby/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/mongodb/bin:/usr/local/mongodb/bin:/usr/local/mongodb/bin
9 verbose lifecycle [email protected]~build: CWD: /Users/shopgo/Desktop/kayali/snipcart/myjam-gatsby
10 silly lifecycle [email protected]~build: Args: [ '-c', 'gatsby build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `gatsby build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/shopgo/Desktop/kayali/snipcart/myjam-gatsby
16 verbose Darwin 18.7.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v10.16.2
19 verbose npm  v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `gatsby build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]