在Gatsby/React中调用API/Ajax

Question

我对盖茨比( Gatsby/React )相当陌生，但我想我可以试着建立我的个人网站。我已经准备好了一个restful设置，可以调用我目前在Spotify上玩的游戏，但是，由于Gatsby是一个静态站点构建器，我很难找到一种实现API的方法，该API可以在每次听到不同的内容时都不需要重新构建站点。有什么想法吗？

Answer 1

没有意义，你不需要担心。Gatsby是一个静态站点生成器，这意味着它在构建(并编译)代码/项目时通过GraphQL查询获取所有数据源(CMS、markdowns、JSON、API等)。这并不意味着您不能在后面进行异步调用，因为它使用了React，当然，您可以！

一个实际的例子

当您编译和构建代码时，它会生成一个简单的HTML，因此，在您的代码可能有一个<h1>{post.title}</h1>的情况下，一旦编译，它将从CMS收集的数据中生成<h1>Real title</h1>。这意味着“静态”，因为代码已经生成，无需额外的服务器调用。不是一个“静态”的意思是简单的，没有要求或其他什么。

另一方面，在代码后面，您保留了所有的JavaScript逻辑和模式，因为它将与所有库、函数和逻辑(使用webpack)一起生成一个捆绑的JavaScript文件，如果添加它，该文件将保留所有异步逻辑。

因此，当然，使用React，您可以发出一个异步API请求来显示/隐藏任何想要的内容。

在React中，有一个名为componendDidMount() (如果使用钩子的话相当于useEffect )的方法，一旦加载了组件，就会在每个页面呈现上触发。来自反应文件

在安装组件后立即调用componentDidMount() (插入到树中)。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，这是实例化网络请求的好地方。

通常，一旦呈现了一个组件，您可能希望将API调用放在那里。您将呈现API调用的响应，而不是呈现一个普通的HTML标记。这正是盖茨比的力量和反应。

​

​

我建议你深入盖茨比并发掘所有这些潜力。但是总结一下，回答你的问题，当然，你可以提出一个API请求，在你的网站上显示Spotify的播放列表，这不是什么大事。