Gatsby中使用GraphQL和React的小型API查询

Question

我正试图将物品从Airtable导入到Gatsby。我的桌子上有将近800张唱片。这本身并不是一个沉重的负载，但我想一次渲染几个项目，用一个"；更多"；按钮调用下一批。这在Gatsby中并不明显，因为它似乎是针对较小数据库的查询。

这里最好的做法是什么？我已经尝试向按钮添加一个函数来更新startIndex和endIndex变量，但页面不会再次呈现，简单地在按钮上附加forceUpdate是行不通的。我也尝试过将项目列表移动到一个组件，但将按钮放在它旁边总是会引发错误。我应该先将查询存储在常量中吗？以前有人尝试过吗？

import { graphql } from "gatsby"
export const query = graphql`
{
allAirtable(sort: {order: ASC, fields: id}, limit: 100) {
nodes {
id
data {
Name
Area
Year
}
}
}
}
` 
let startIndex = 0;
let endIndex = 10;
const IndexPage = ({ data }) => {
return(
<div>
<h1>Item list</h1>
<p>Page count: {data.allAirtable.pageInfo.pageCount}</p>
<ul>
{data.allAirtable.nodes.slice([startIndex], [endIndex]).map(node => (
<li key={node.id}>
{node.data.Name} <br />
{node.data.Area} <br />
{node.data.Year} <br />
</li>
))}
</ul>
<button>More</button>
</div>
)}
export default IndexPage

Answer 1

搜索'load more in gatsby'。。。

"Initial"gatsby查询用于生成静态内容(gatsby"server"稍后不存在(-"load more"是动态的，不能以这种方式完成，只能进行分页-请参阅gatsby文档。另请阅读'fetch build and run time'。

动态可以用"正常"(用于反应运行时(graphql客户端(例如apollo(来完成。。。或者用fetch/axios加载一些准备好的、由gatsby生成的静态json文件。

Answer 2

有几种方法可以做到这一点。对于某些用例，运行GraphQL服务器是有意义的，您可以查询客户端(例如使用Apollo(，并在Gatsby中使用GraphQL缝合来呈现初始内容服务器端。对于更简单的事情，比如在提要中加载更多的帖子，您将很好地得到每个预期查询的预编译响应。我过去曾在gatsby-node.js中查询我想要的数据，并用分块数据写出JSON文件(在public中(，然后根据需要从客户端对这些文件发出普通的HTTP查询。这应该相对简单，但如果您需要更多帮助或示例实现，请在评论中告诉我。