Блог

Я впервые создаю плагин Gatsby source и сталкиваюсь с проблемами при извлечении данных.

Я следовал этому руководству, но хотел попробовать использовать другой API.

Я хочу использовать свой ключ API виджетов локатора магазина. https://www.storelocatorwidgets.com/admin/api/v1/locations?api_key=API_KEY_GOES_HERE

Я выполнил те же действия и изменил URL api, но получил это сообщение об ошибке в терминале:

 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"
    },
  },
}
  

Я пропустил какой-то шаг? Кажется, что это должно сработать, но это моя первая попытка создания плагина с исходным кодом, поэтому я не так хорошо знаком с процессом. Буду признателен за любую помощь.

Ошибка типа: данные.местоположения.forEach — это не функция

forEach(...) это метод array, и похоже, что ваша конечная точка возвращает местоположения не в виде массива, а объекта с идентификатором каждого местоположения в качестве ключа. Попробуйте превратить data.locations в массив:

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