代码之家 › 专栏 › 技术社区 › Zach Mason

尝试将从airtable中拉入的数据连接到gatsby graphql和algolia,插件不工作

airtable gatsby algolia reactjs javascript

Zach Mason · 技术社区 · 6 年前

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

当我运行一个构建(不填充我的algolia索引)时,这个插件似乎在我的gatsby配置中不起作用——我已经使用algoliasearch和一个json文件将数据推送到了我的索引中,但是我希望在构建时自动连接这个插件——所以数据总是与我的airtable数据保持一致。

我已经通过Github上的文档(放在我的gatsby-config.js文件中)尝试了“gatsby plugin algolia”方法。

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,
      },
    },
  ],
};

我还将“myquery”替换为一个更具体的实例,该实例是我通过airtable在组件上使用的,如下所示

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
          }
        }
      }
    }
    }`;

如果有人正在运行和工作这个插件——我肯定会使用一些关于如何使这个插件工作的提示(这个包上没有太多的文档)。

谢谢您!

1 回复 | 直到 6 年前

Zach Mason 6 年前

明白了!任何遇到相同问题的人,请执行以下步骤:

检查您是否具有正确的API密钥
检查transformer方法是否更改以匹配graphql中查询的对象。我的不得不改为:

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

检查您的查询是否在graphql中工作,确保它在语法上是正确的,并且正在提取正确的数据。我使用的查询是

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
        }
      }
    }
  }
}`;

最后,如果您将查询和查询抽象到SRC中包含的一个ultil目录中,然后要求将其放入配置文件中,这样更干净:

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