Блог

У меня есть проект gatsby, в котором мне нужно сделать запрос API для получения списка автомобилей, которые я буду использовать для динамического создания страниц для каждого автомобиля. Данные ответа API выглядят так:

 {
  "Fleet_Data": [
      {
          "Make": "Honda",
          "Model": "Pilot"
      },
      {
          "Make": "Honda",
          "Model": "CRV"
      },
      {
          "Make": "Honda",
          "Model": "Accord"
      }
  ]
}
 

Я использую плагин gatsby-source-custom-api. Вот мое gatsby-config.js досье:

 {
  resolve: "gatsby-source-custom-api",
  options: {
    url: "https://api.fleetdata.com/",
    headers: {
      Authorization: 'Basic API_KEY'
    },
    rootKey: "Fleet_Data",
    schemas: {
      Fleet_Data: `
                    Make: String
                    Model: String
                `
    }
  }
}
 

У меня в файле узла нет ничего, кроме отладки, но вот мой gatsby-node.js

 const path = require("path");

exports.createPages = async ({ graphql }) => {
  console.log("IT WORKED")
};
 

Но когда я запускаю gatsby build , я получаю следующую ошибку в консоли:

 "gatsby-source-custom-api" threw an error while running the sourceNodes lifecycle:

invalid json response body at https://api.fleetdata.com/ reason: Unexpected token : in JSON at position 4

  23 |
  24 |   const URL = getUrl(process.env.NODE_ENV, url)
> 25 |   const data = await fetch(URL).then(res => res.json())
     |                ^
  26 |
  27 |   const typeDefs = getTypeDefs(schemas, imageKeys)
  28 |   createTypes(typeDefs)

File: node_modules/gatsby-source-custom-api/gatsby-node.js:25:16



  FetchError: invalid json response body at https://api.fleetdata.com/ reason: Unexpected token : in JSON at position 4
  
  - index.js:272 
    [ProjectCars]/[node-fetch]/lib/index.js:272:32
  
  - task_queues.js:95 processTicksAndRejections
    internal/process/task_queues.js:95:5
  
  - gatsby-node.js:25 Object.exports.sourceNodes
    [ProjectCars]/[gatsby-source-custom-api]/gatsby-node.js:25:16
  
  - api-runner-node.js:429 runAPI
    [ProjectCars]/[gatsby]/src/utils/api-runner-node.js:429:16
  

not finished source and transform nodes - 3.913s
 

Что я здесь делаю не так?

Это было решено простым вызовом api выборки в gatsby-node.js файле вместо использования плагина. gatsby-source-custom-api Плагин, похоже, не предназначен для использования в данном конкретном случае, несмотря на его название и документацию..

Обычно эта проблема вызвана undefined ответом API, обычно вызванным простоем сервера, неправильной конфигурацией и т.д.

В вашем случае я протестировал его с помощью Postman, и он выдает ошибку: https://api.fleetdata.com/ не отвечает, поэтому, поскольку вы не заключаете его в a try/catch или не фиксируете исключение, это не удается, потому что плагин не может извлечь данные.

В качестве альтернативы, поскольку вы делегируете свою реализацию стороннему плагину, я не думаю, что есть способ решить эту проблему без пиара или настройки/настройки плагина. Ваша реализация довольно «базовая» или стандартная, поэтому, чтобы исправить ее, вам, возможно, потребуется открыть поток в репозиторий автора.

Вы всегда можете добавить fetch запрос в свой API и соответствующим образом настроить данные узлы.