使用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查询,来完成此操作客户端。这应该相对简单,但是如果您需要更多帮助或示例实现,请在评论中让我知道。