使用GraphQL和React在Gatsby中进行小型API查询

如何解决使用GraphQL和React在Gatsby中进行小型API查询

我正在尝试将商品从Airtable导入Gatsby。我的表有近800条记录。它本身并不是一个沉重的负担，但是我想一次渲染一些项目，并使用“更多”按钮来调用下一批。这在盖茨比（Gatsby）中并不明显，因为它似乎是针对较小数据库的查询。

这里最好的做法是什么？我尝试将一个函数添加到按钮，以更新startIndex和endIndex变量，但是该页面将不会再次呈现，并且仅将push_back附加到Button上将不起作用。我也尝试过将项目列表移至组件，但将按钮置于其旁边始终会引发错误。我应该先将查询存储在const中吗？有人尝试过吗？

forceUpdate

解决方法

搜索'load more in gatsby' ...

“初始” gatsby查询用于生成静态内容（gatsby“服务器”以后不存在）-“加载更多”是动态的，不能以这种方式完成，只能进行分页-请参阅gatsby文档。另请参阅有关'fetch build and run time'。

可以使用“普通”（用于反应-运行时）graphql客户端（例如apollo）进行动态处理，也可以使用getchs / axios加载一些准备好的，生成的（由gatsby生成的）静态json文件。

,

有几种方法可以做到这一点。在某些用例中，运行查询客户端的GraphQL服务器（例如使用Apollo）并在Gatsby中使用GraphQL拼接来呈现初始内容服务器端是有意义的。对于更简单的事情，例如在feed中加载更多帖子，可以对每个预期查询的预编译响应很好地为您服务。过去，我通过在gatsby-node.js中查询所需的数据并用分块的数据写出JSON文件（在public中），然后根据需要从这些文件发出常规HTTP查询，来完成此操作客户端。这应该相对简单，但是如果您需要更多帮助或示例实现，请在评论中让我知道。