2

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!

Zach Mason
  • 125
  • 9
  • maybe this needs to be triggered within a component? would love to see documentation on that if that is the case – Zach Mason Oct 11 '18 at 19:51
  • would love to see an instance of this fully functioning if anyone has a link to code – Zach Mason Oct 11 '18 at 20:22
  • i've pushed this down on the config object to the very last plugin thinking that it depended on another aspect, but it still doesn't populate algollia – Zach Mason Oct 11 '18 at 22:33
  • figured it out! need the proper API key firstly, but also the transformer method changes when using airtable to transformer: ({ data }) => data.items.edges.map(({ node }) => node). the query i used was query { items: allAirtableLinked( filter: { table: { eq: "Items" } } ) { edges { node { id data { title thumbnail_url thumbnail_alt_text duration url_slug asset_type uberflip_stream_id uberflip_id } } } } } and it worked! – Zach Mason Oct 12 '18 at 16:43

1 Answers1

3

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

Zach Mason
  • 125
  • 9