Question

我是第一次构建Gatsby源插件，并且在获取数据时遇到了问题。

我一直遵循this教程，但想尝试使用其他API。

我想使用我的“商店定位器小部件” API密钥。 https://www.storelocatorwidgets.com/admin/api/v1/locations?api_key=API_KEY_GOES_HERE

我遵循相同的步骤并修改了api URL，但在终端中收到以下错误消息：

TypeError: data.locations.forEach is not a function

这是我的gatsby-node.js文件：

const fetch = require("node-fetch")
const queryString = require("query-string")

exports.sourceNodes = (
  { actions, createNodeId, createContentDigest },
  configOptions
) => {
  const { createNode } = actions

  // Gatsby adds a configOption that's not needed for this plugin, delete it
  delete configOptions.plugins
  // Convert the options object into a query string
  const apiOptions = queryString.stringify(configOptions)
  // Join apiOptions with the Pixabay API URL
  const apiUrl = `https://www.storelocatorwidgets.com/admin/api/v1/locations?${apiOptions}`
  // Gatsby expects sourceNodes to return a promise
  return (
    // Fetch a response from the apiUrl
    fetch(apiUrl)
      // Parse the response as JSON
      .then(response => response.json())
      // Process the JSON data into a node
      .then(data => {
        // For each query result (or 'hit')
        data.locations.forEach(address => {
          console.log("address data is:", address)
        })
      })
  )
}

这是我的gatsby-config.js文件：

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },

    {
      resolve: "gatsby-source-pixabay",
      options: {
        api_key: "f360e50a2c34ffb4a149d10372fe700e",
      },
    },

    `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`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // 'gatsby-plugin-offline',
  ],
}

这是应该获取但不是的JSON对象：

{
  "status": "OK",
  "locations": {
    "13466445": {
      "name": "Village Green Society",
      "display_order": "999999",
      "filters": null,
      "createstamp": "1536191260",
      "editstamp": "1546982631",
      "geocodestatus": "Manual",
      "geocodetimestamp": "0",
      "google_placeid": "",
      "locationid": "13466445",
      "description": "",
      "address": "2043 16th St, Boulder, CO, 80302, US",
      "image": "",
      "website": "https://villagegreenboulder.com/",
      "website_text": "",
      "facebook": "",
      "instagram": "https://www.instagram.com/villagegreenboulder/",
      "twitter": "",
      "phone": "(720) 389-5726",
      "phone2": "",
      "fax": "",
      "email": "",
      "hours_Monday": "",
      "hours_Tuesday": "",
      "hours_Wednesday": "",
      "hours_Thursday": "",
      "hours_Friday": "",
      "hours_Saturday": "",
      "hours_Sunday": "",
      "store_list_footer": "",
      "print_directions_button": null,
      "map_lat": "40.019788",
      "map_lng": "-105.275335",
      "priority_type": "",
      "priority_setting": "Random",
      "z_index": "",
      "visibility": "",
      "markerid": "default"
    },
  },
}

我错过了一步吗？似乎应该可以，但这是我第一次尝试创建源插件，因此我对这个过程并不熟悉。任何帮助将不胜感激。

Answer 1

TypeError：data.locations.forEach不是函数

forEach(...)是一种数组方法，它的终点似乎不是将位置作为数组返回，而是将每个位置的ID作为键的对象。尝试将data.locations转换为数组：

Object.keys(data.locations).forEach(address => {
  console.log("address data is:", address)
})

创建gatsby源插件时遇到问题

1 个答案: