Search code examples
javascriptreactjsalgoliagatsbyairtable

trying to connect data pulled in from airtable into gatsby graphql to algolia, plugin not working


https://github.com/algolia/gatsby-plugin-algolia

this plugin doesn't seem to be working in my gatsby-config when i run a build (doesn't populate my algolia index) -- i've already pushed data into my index using algoliasearch and a json file, but i want this to be automatically hooked up whenever i build -- so the data is always current with my airtable data.

i've tried the 'gatsby-plugin-algolia' approach via the documentation on github (placed in my gatsby-config.js file)

const myQuery = `{
  allSitePage {
    edges {
      node {
        # try to find a unique id for each node
        # if this field is absent, it's going to
        # be inserted by Algolia automatically
        # and will be less simple to update etc.
        objectID: id
        component
        path
        componentChunkName
        jsonName
        internal {
          type
          contentDigest
          owner
        }
      }
    }
  }
}`;

const queries = [
  {
    query: myQuery,
    transformer: ({ data }) => data.allSitePage.edges.map(({ node }) => node), 
    indexName: 'cardDemo',
  },
];

module.exports = {
  plugins: [
        {
      resolve: 'gatsby-source-airtable-linked',
      options: {
        apiKey: process.env.MY_API_KEY,
        tables: [
          {
            baseId: process.env.MY_BASE_ID,
            tableName: 'Streams',
            tableView: 'DO NOT MODIFY',
          },
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-algolia',
      options: {
        appId: process.env.MY_AGOLIA_APP_ID,
        apiKey: process.env.MY_AGOLIA_API_KEY,
        indexName: 'cardDemo',
        queries,
        chunkSize: 1000000,
      },
    },
  ],
};

i've also subbed out the 'myQuery' for a more specific instance that i'm using on a component via airtable, shown below

const myQuery = `{
      items: allAirtableLinked(
      filter: {
        table: { eq: "Items" }
      }
    ) {
      edges {
        node {
          id
          data {
            title
            thumbnail_url
            thumbnail_alt_text
            url_slug
            uberflip_stream_id
            uberflip_id
          }
        }
      }
    }
    }`;

if anyone has this plugin running and working -- i could definitely use some hints as to how to get this working (not much documentation on this package)

thank you!


Solution

  • figured it out! anyone running into this same issue, do these steps:

    1. check that you have the proper API key
    2. check that the transformer method changes to match the object queried in graphql. mine had to change to this:

    transformer: ({ data }) => data.items.edges.map(({ node }) => node) 

    1. check that your query works in graphql, make sure it's syntactically correct, and is pulling the correct data. the query i used was

    const pageQuery = `query {
      items: allAirtableLinked(
        filter: {
          table: { eq: "Items" }
          data: { hubs: { eq: "cf4ao8fjzn4xsRrD" } }
        }
      ) {
        edges {
          node {
            id
            data {
              title
              thumbnail_url
              thumbnail_alt_text
              duration
              url_slug
              asset_type
              uberflip_stream_id
              uberflip_id
            }
          }
        }
      }
    }`;

    1. lastly, it's cleaner if you abstract the query and queries into a ultil directory housed in src, then require that into the config file so it's cleaner :

    i got this idea from this repo, very helpful! check out this example