Gatsby API 对构建时间的请求

Question

我有一个 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

我在这里做错了什么？

Answer 1

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

Answer 2

通常此问题是由undefined API 响应引起的，通常是由服务器停机、错误配置等引起的。

在您的情况下，我已经使用 Postman 对其进行了测试，但它会引发错误：https://api.fleetdata.com/ 没有响应，因此因为您没有将其包装在 try/catch 中或捕获异常，它会失败，因为插件可以' t 获取数据。

或者，由于您将实现委托给第三方插件，我认为没有办法在不进行 PR 或调整/自定义插件的情况下解决此问题。您的实现非常“基本”或标准，因此要修复它，您可能需要打开作者存储库的线程。

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