#javascript #node.js #reactjs #gatsby #gatsby-plugin
Вопрос:
У меня есть проект 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
Что я здесь делаю не так?
Ответ №1:
Это было решено простым вызовом api выборки в gatsby-node.js
файле вместо использования плагина. gatsby-source-custom-api
Плагин, похоже, не предназначен для использования в данном конкретном случае, несмотря на его название и документацию..
Ответ №2:
Обычно эта проблема вызвана undefined
ответом API, обычно вызванным простоем сервера, неправильной конфигурацией и т.д.
В вашем случае я протестировал его с помощью Postman, и он выдает ошибку: https://api.fleetdata.com/ не отвечает, поэтому, поскольку вы не заключаете его в a try/catch
или не фиксируете исключение, это не удается, потому что плагин не может извлечь данные.
В качестве альтернативы, поскольку вы делегируете свою реализацию стороннему плагину, я не думаю, что есть способ решить эту проблему без пиара или настройки/настройки плагина. Ваша реализация довольно «базовая» или стандартная, поэтому, чтобы исправить ее, вам, возможно, потребуется открыть поток в репозиторий автора.
Вы всегда можете добавить fetch
запрос в свой API и соответствующим образом настроить данные узлы.
Комментарии:
1. Но куда бы я завернул уловку try? Это делается с помощью плагина Гэтсби, и, согласно документации на github, в конфигурации плагина нет места для установки try catch
2. Ну, не ты, а плагин. Дело в том, что запрос выдает a
FetchError
, потому что он не может получить данные из API. Я не смог сделать запрос GET к этому API, используя ваши параметры (даже получив прямой доступ к api.fleetdata.com . API, похоже, не работает. Ваша конфигурация выглядит нормально, но API не отвечает3. Из соображений безопасности я не опубликовал полный URL-адрес. Это просто держатель места для представления конечной точки API. Я могу пинговать и получать данные json просто отлично, используя postman
4. О, я понимаю. Попробуйте настроить заголовки так, чтобы они принимали только ответы JSON
5. Я добавил
'Content-Type': 'application/json'
в заголовок, но все равно не повезло, та же ошибка