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

Question

我正在尝试将项目从 Airtable 导入到 Gatsby。 我的表有近 800 条记录。 这本身并不是一个繁重的负载，但我想一次渲染几个项目，并带有一个“更多”按钮来调用下一批。 这在 Gatsby 中并不明显，因为它似乎是针对小型数据库的查询。

这里最好的做法是什么？ 我尝试将 function 添加到更新 startIndex 和 endIndex 变量的按钮，但页面不会再次呈现，并且简单地将forceUpdate附加到按钮将不起作用。 我也尝试将项目列表移动到一个组件，但将按钮放在它旁边总是会引发错误。 我应该先将查询存储在 const 中吗？ 有没有人尝试过这个？

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' ...

'初始' gatsby 查询用于生成 static 内容（gatsby '服务器' 稍后不存在） - '加载更多' 是动态的，不能这样做，只能分页 - 请参阅 gatsby 文档。 另请阅读'fetch build and run time' 。

动态可以使用“正常”（用于反应 - 运行时间）graphql 客户端（fe apollo）...或加载一些准备好的、生成的（由 gatsby）static Z466DEEC76ECDF5FCA6D38571/F6Zios24 文件来完成。

Answer 2

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