盖茨比API在构建时的请求

Question

我有一个盖茨比项目，我需要发出一个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
`
}
}
}

我的node文件中除了调试之外什么都没有这是我的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

我在这里做错了什么?

Answer 1

这是通过在gatsby-node.js文件中简单的获取api调用而不是使用插件来解决的。gatsby-source-custom-api插件似乎并不打算用于这种特殊情况，尽管它的名称和文档。

Answer 2

这个问题通常是由undefinedAPI响应引起的，通常是由服务器停机，错误配置等引起的。

在你的情况下，我已经测试了它使用邮差，它抛出了一个错误:https://api.fleetdata.com/没有响应，所以因为你没有在try/catch或捕获异常中包装它，它失败了，因为插件无法获取数据。

或者，既然你将你的实现委托给第三方插件，我不认为有办法解决这个问题，而不做PR或调整/自定义插件。你的实现相当"基本"。或标准的，所以要修复它，你可能需要打开一个线程到作者的存储库。

您始终可以向API添加fetch请求，并相应地自定义给定的节点。